Tag Archives: Angular2

Track Google Analytics on Angular2

Nowadays Single Page (Web) Application (SPA) is taking over traditional full post-back website. Google Analytics standard tracking code is though yet to support SPA website. We then have to manually implement to track route change.

Google Analytics , at the moment, provides this kind of tracking js code.

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

ga(‘create’, ‘UA-123456-1’, ‘auto’);
ga(‘send’, ‘pageview’);

Per my previous post – Passing javascript global variable to Angular2 (Typescript). We can archive by sending ga object to Angular2. You can choose either approach 1 or 2.

Then at the root component, AppComponent in my previous post, update constructor as follow.

constructor(private router: Router, @Inject(‘ga’) ga:any) {
router.subscribe((val) => {
ga(‘send’, ‘pageview’, { page: val });

We need to inject router to the constructor and inject ga variable from javascript also.

router has ability to subscribe route change event. We make use of it and call ga function to post tracking to Google Analytics. val parameter is path of target route.

Updated version of Angular2 probably also updated the router class. Please try following if you use a newer version of Angular2.

router.changes.subscribe((val) => {
ga(‘send’, ‘pageview’, { page: val });

Then you can use Live overview of Google Analytics to validate if it works properly. Enjoy ๐Ÿ™‚

Tagged , , ,

Passing javascript global variable to Angular2 (Typescript)

This content refers to angular2 version 2.0.0-beta.8. If it does not work for you probably because of breaking change in the future updates.

There are a couple ways to do this but I would basically mention only 2 approach.

The first approach, simply add declare var in component that you need to use.

In javascript code, declare variable in global scope:

var func = function() { … }

In Angular2, in the component that need to refer to javascript variable simply declare the same variable with the same name.

declare var func:Function;

This is the easiest way to archive the need but not the most efficient way. It looks like to be a magic variable in the component and is a great enemy of unit testing.

Since dependency injection (DI) pattern is one of the core concept of theย  Angular2 (and AngularJS) and we should comply that ๐Ÿ™‚

The second approach, import and inject from javascript to Angular2.

In javascript code, declare variable in global scope:

var func = function() { … }

at import statement which normally in the main html page. Passing func variable to the main function of main module.

.then((module) => module.main(func));

Update main.ts TypeScript file. Wrap Angular2 bootstrap with a main function which accept a parameter from import statement above. Inject func variable using provide feature.

import {provide} from ‘angular2/core’;


export function main(func) {
bootstrap(AppComponent, [
//…providers and services
provide(‘func’, { useValue: func})

In AppComponent that bootstrap from main.ts, inject func variable to constructor and use as needed. For more information about @Inject decorator please refer to this screencast tutorial – https://egghead.io/lessons/angular-2-using-the-inject-decorator.

export class AppComponent {
constructor(@Inject(‘func’) func:Function) {
// use func variable as needed

Now you have access to javascript variable and retain dependency injection concept and of course no magic variable!



Tagged , ,