Tag: angular2

Using Google Analytics with your SPA Angular 2 Web App

Using Google Analytics with your SPA Angular 2 Web App

In order to track navigation in your Single Page Application, it takes a little more work up front. This article explains how to use Google Analytics with an Angular 2 Web App.

First you’ll need to register your web domain with Google. There a few different ways to verify your site. Once verified you’ll be able to download a JavaScript snippet to add to your site. With a traditional (non-SPA) site, you just drop this into your layout template and you’d be good to go.

The technical details of how tracking SPA navigation is detailed in this guide with Google. The key to grab the creating key from the snippet. We’ll use that later in the implementation.

ga('create', 'UA-69737250-1', 'auto');

First add this to your index.html. This will be the only modification to that page.

<script async src='https://www.google-analytics.com/analytics.js'></script>

Next modify your package.json include the autotrack library from Google. 1.0.3 is the version available when this post was written.

"autotrack": "~1.0.3",

Next we’re going to create a service. This will be a global service instantiated when our app first loads.

import {Injectable} from '@angular/core';
require('autotrack');

@Injectable()
export class AnalyticsService {
    constructor() {
        (window).ga=(window).ga||function(){((window).ga.q=(window).ga.q||[]).push(arguments)};(window).ga.l=+new Date;

        (window).ga('create', 'UA-69737250-1', 'auto');
        (window).ga('require', 'cleanUrlTracker');
        (window).ga('require', 'eventTracker');
        (window).ga('require', 'outboundLinkTracker');
        (window).ga('require', 'urlChangeTracker');
    }

    pageView(url: string) {
        (window).ga('set', 'page', url);
        (window).ga('send', 'pageview');
    }

    //to track clicks on html attributes
    //ga-on="click"
}

If you have a app.module.ts, or a similar file, where you’re bootstrapping your application, add your service there to the providers: [] array.

From your component where you want to track the navigation, import the reference and inject it into your component class. Then on the ngOnInit log the page navigation. (This is not a full component code sample. Just the pieces you need for it to work).

import {AnalyticsService} from './../services/analytics.service'; //path will likely differ

  constructor(private _analytics: AnalyticsService) {
  }

  ngOnInit() {
    this._analytics.pageView('/login.html');
  }

That’s all there is to it. If you want to see if it’s working you can view all network traffic from the Chrome Developer Console, or of course log into your Analytics account to see if the traffic is being captured.

My Experience with Angular 2

My Experience with Angular 2

I’ve been working with Angular 2 since the early betas, and now into the release candidates. Working with a new platform (yes Angular 2 is a platform vs. a framework) during beta releases is a bit painful. Even working through the release candidates (1-4 so far) has been trying as well. You have to know what you’re signing up for, be patient, and willing to learn new things quickly.

To be the most productive when developing in Angular 2, you should be developing with Typescript. If you’ve done ES6 (ES2015) recently, then Typescript will feel right at home. The Typescript learning curve is pretty small, so don’t be intimidated by it. Trust me, it’s worth learning. It’s worth it because Angular 2 is written in Typescript and most of the examples you’ll see on the blogs and overflows are in Typescript.

So how does it stack up against Angular 1? For starters, it’s much simpler to learn. There are 50 some less built in directives in Angular 2. There are no factories, just services (which are now called providers). Directives and Controllers are now pretty much the same thing which are called components. Components have a selector attribute, which is the tag name the component represents (such as <registration>). Directives are there just for element attributes (<button sound-alert-on-click>) with sound-alert-on-click being the directive.

Routing is pretty straightforward, but the router is still in beta while the Angular 2 platform is currently in release candidate 4 (July 10th 2016). The new router isn’t hard to learn at all.

Forms and validation still seem to be in flux too. They were changed a little bit in release candidate 3, so hopefully they will stable now.

Binding and event handling is different, but not hard to pick up if you’ve done Angular 1.x development before. The main difference is that you can bind to any dom event and any standard html element attribute without using an Angular directive, like ngModel. So for example if you want to bind to the click event of a button, you do <button (click)=”submit()”>Submit</button>. submit() is simply a method in your class that represents your component.

Binding is isolated more in Angular 2 with use of Zones, made in party by zone.js. zone.js is what Angular 2 relies on for binding. Without zone.js in your project, binding won’t work.

What’s the hardest thing to learn in Angular 2? I would have to say Observables. Angular 2 uses the RxJS framework in place of promises. What the difference between observables and promises? I suggest watching this video from ng-conf. It’s the best explanation I’ve seen yet. You can get going without really knowing a lot about RxJS, but I suggest digging into it. I’ve already used for a global event provider that was extremely useful in my application.

One last learning curve you should be aware of is the CLI (command line interface) to build your Angular 2 project. ES5 should be not be used when building a Angular 2 application (even though the build process spits out ES5). So if you’re using ES6, you’ll be using babel. If you’re using Typescript, you’ll need to transpile that to ES5 as well. I’ve been using Webpack along with the Angular 2 Webpack starter. Webpack is a little overwhelming at first, but once you get what it’s doing you realize how powerful it is and how much you love it 😍.

You can also go with the Angular CLI project which is a lot simpler and straight forward, but not near as powerful as Webpack.

Nativescript recently added support for Angular 2. So you can now use Angular 2 to build native iOS and Android apps. I’ve also heard about a little hack that will allow Nativescript to build an app for Apple TV, so you can technically use Angular 2 to build Apple TV apps as well.

The Angular 2 ecosystem will only continue to evolve, which is why I said that Angular 2 is a platform earlier. The future is bright for Angular 2 and your future will be bright as well if you hop onboard.