Google Tag Manager with AngularJS?

Question

How do I use GTM with Angular?

I'm trying to fire a (virtual) pageview event when I load a new partial using this code:

dataLayer.push({
    'event' : 'pageview',
    'pageview' : $location.path(),
    'virtualUrl' : $location.path()
 });

But I don't see the event firing (I'm using the Google Analytics Chrome debug extension to view fired events).

Answer 1

The possible way to do this is using $window service.
Look at this answer to try, if it works: Tracking Google Analytics Page Views with Angular.js
Hope it works.

Answer 2

Similar to the accepted answer, we created a simpler, more explicit solution using a pagename variable in a Javascript in our controller for our single-page app,

// Note, this may not be how your app works, YMMV
var pagename = $location.path().substr(1,$location.path().length);

and push them to the dataLayer like this:

window.dataLayer.push({'event':pagename+'-page'})

Then in GTM we added triggers in GTM like so:

Trigger: Custom Event
Event Name: home-page

... about-page, faq-page, etc.

For more complex angular apps, there are some available extensions for using Google Analytics and Google Tag Manager with Angular.

See Angulartics (which also supports web analytics solutions other than Google Analytics via its plugin architecture) and the related NPM package for GTM.

Answer 3

I find the Chrome extension unreliable. Simply run the global variable dataLayer in the console to print the array of events. One of the objects should be your pageview event.

Here is an example of how we are using it:

Note: we're not simply using $location.path(), instead everything in the url after the domain. Which includes the .search() & .hash().

$location in the Angular docs

modules/analytic.js

(function(window, angular) {
    'use strict';
    angular.module('Analytic.module', ['Analytic.services']).
        run(function($rootScope, $window, $location, GoogleTagManager) {
            $rootScope.$on('$viewContentLoaded', function() {
                var path= $location.path(),
                    absUrl = $location.absUrl(),
                    virtualUrl = absUrl.substring(absUrl.indexOf(path));
                GoogleTagManager.push({ event: 'virtualPageView', virtualUrl: virtualUrl });
            });
        });
})(window, window.angular);

services/analytic.js

(function() {
    angular.module('Analytic.services', []).
        service('GoogleTagManager', function($window) {
            this.push = function(data) {
                try {
                    $window.dataLayer.push(data);
                } catch (e) {}
            };
        });
})();

In GTM

You'll need {{virtualUrl}} and {{event}} Macros which listen for the dataLayer variables of the same name.

You'll need a Google Analytics Event Tracking Tag with a Firing Rule which triggers when {{event}} equals 'virtualPageView'. Make sure you remove the default 'All Pages' Rule which makes it run on every page load. Instead, you want it to run when you dataLayer.push() the event, which may happen multiple times per page refresh.

The Tag should be configured with:

1. Track Type == 'Page View'
2. More Settings > Basic Configuration > Virtual Page Path == '{{virtualUrl}}'

Answer 4

I would highly recommend you to use the angulartics library. I have used it on multiple sites. It gets you running pretty quickly.

It includes support for Virtual Page Views and events out of the box. It does not support GA eCommerce but has support for extensibility.

Also - I have used with both GTM and Piwik.

Answer 5

No need to add code.

Configure a "history change" trigger, this is triggered by angular route changes, add it as a trigger to your "page views" tag.