How to use google universal analytics in Hot Towel durandal SPA + typescript

Question

I'm building app based on Hot Towel Template. Fall into issue with Google Analytics. I'm completly new in that and here is what i've done so far:

1) registered in google analytics account

2) in my index.cshtml file just before closing tag i pasted:

 <script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
</script>

3) added TypeScript definitions from nuget to shell.ts file (I rewrote it to TypeScript)

/// <reference path="../../scripts/typings/google.analytics/ga.d.ts" />

The version is 0.0.9.

Later in activation method:

        this.router.on('router:navigation:complete', (instance, instruction) => {
         ga('create', 'UA-XXXXX-1', { 'cookieDomain': 'none' });
         ga('send', 'pageview');
    });

But cannot compile the file - the ga object definition in ga.d.ts doesn't not have any functions declared - only properties.

I did some research and found working solution:

        var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-51465809-1']);
    _gaq.push(['_setCookieDomain', 'none']);
    _gaq.push(['_gat._anonymizeIp']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_setAllowLinker', true]);
    _gaq.push(['_setAllowHash', false]);
    _gaq.push(() => {
        var tracker = _gat._getTrackerByName('UA-51465809-1');
        tracker._trackPageview();
    });

But it seems to be for previous Google Analytics version - not most current one.

Was trying to use information with site http://petermorlion.blogspot.com/2014/04/using-google-analytics-in-durandal-spa.html but without success - the ga object definition in ga.d.ts doesn't not have any functions declared.

Any help is appreciated.

Answer 1

Here is my activation logic from shell.ts:

 activate = () => {
    ko.validation.configure({
        registerExtenders: true,
        messagesOnModified: false,
        decorateElement: true,
        errorElementClass: 'error',
        messageTemplate: 'errorMessageTemplate',
        errorMessageClass: 'error',
        decorateInputElement: true
    });



    return m_dataservice.DataServiceInstance.primeData()
        .then(this.boot)
        .fail(this.failedInitialization);
}

boot = () => {
    m_dataservice.DataServiceInstance.getHelpLink().then((data) => { this.helpLink = data.results; });
    m_dataservice.DataServiceInstance.getFooterLinks().then((data) => {
        this.tmpLinki(data.results);
    });


    var routes = [
        { route: '', moduleId: 'home', title: 'My Apps', nav: true, customBind: false },
        { route: 'appcatalog', moduleId: 'appcatalog', title: 'App Catalog', nav: true, customBind: false },
        { route: 'aboutus', moduleId: 'aboutus', title: 'About Us', nav: true, customBind: false },
        { route: 'faq', moduleId: 'faq', title: 'FAQ', nav: true, customBind: false },
        { route: 'login', moduleId: 'login', title: 'Login', nav: true, customBind: false }
    ];


    this.router.on('router:route:not-found', function(fragment) {
        this.logError('No Route Found', fragment, true);
    });

    this.router.on('router:navigation:complete', (instance, instruction) => {
        ga('create', 'UA-XXXX-Y', { 'cookieDomain': 'none' });
        ga('send', 'pageview');
    });



   var tmp = this.router.makeRelative({ moduleId: 'viewmodels' }) 
       .map(routes) 
       .buildNavigationModel(); 
   return tmp.activate(); 

}

Lines beginning with 'ga' are underlined with red - 'Cannot invoke an expression whose type lacks a call signature'.

Answer 2

Are you sure your activation method is correct? The d.ts file https://github.com/borisyankov/DefinitelyTyped/blob/master/google.analytics/ga.d.ts seems consistent with what is mentioned here https://developers.google.com/analytics/devguides/collection/gajs/ currently