Clever Geek Handbook

Launch Google Analytics View for Angular App when using Google Tag Manager

I am creating a SPA using Angular.js . We use Google Tag Manager to load most of our analytics / marketing scripts, including Google Analytics. I am also using ui-router for state / view management.

I would like to send events pageview

to Google Analytics when a user views a different state in my application. Part of the difficulty with running GTM is that GTM creates a named tracker . This means that all GA events must be added with the tracker name. It usually looks like this:

 ga('trackerName.send', 'pageview', {page: '/a/path/', title: 'A Title'});

GTM uses a randomly generated tracker name, so the tracker name needs to be captured at runtime. This can be done quite simply with the GA function getAll

. If you want to send a pageview event to all trackers, you simply do:

 var allTrackers = ga.getAll();
 for(var i=0; i<allTrackers.length; i++) {
   ga.send(allTrackers[i].getName()+".send", "pageview", {page: '/a/path', title: 'A Title'});
 }

This works great for most of my events. However, there is a race condition between when the ui-router launches the initial view $stateChangeSuccess

(where I start the GA page view) and the analytics.js is loaded.

Before analytics.js is loaded, the Google Analytics snippet creates a faux object ga

that you can dispatch events to. This man-made object doesn't have the rest of the ga functionality on it , so you can't run getAll

. Without the function, getAll

I cannot get the tracker name and I cannot dispatch the pageview events.

As far as I can tell, Google Analytics does not provide any callbacks or events to complete the analytics.js load, so there is no way to know when I can start dispatching events. I am currently using $interval

to check for existence ga.getAll

, but this is not a very efficient or ideal solution. This is what I have:

 gaCheckInterval = setInterval(function() {
   if(typeof(ga) !== 'undefined' && typeof(ga.getAll) == 'function') {
     clearInterval(gaCheckInterval);
     sendBackloggedEvents();
   }
 }, 200);

Is there some other way to recognize when analytics.js has finished loading? Or any other way to send events to a named tracker without access to getAll

?

+3


source to share


1 answer


Attempting to configure and initiate individual trackers bypasses the intent of using the tag manager. Instead, do:

dataLayer.push({event:'spa.pageView', page:..., title:...});

Where:

  • dataLayer

    optionally renamed to gtm snippet

  • spa

    - a convenient abbreviation for your application / project / company / no matter if you need to later distinguish between your actions.

  • page

    and title

    can be anything you like, you will refer to them by adding dataLayer macros to your GTM container.



Then, in the tag manager, you set up:

  • rule

    of {{event}} ends with pageView

    .
  • dataLayer macros

    for page

    , title

    which you insert into the dataLayer.
  • UA Tag

    (and then everything else) to fire (1), and use the macros in (2) for the TAG parameters they override.
  • Repeat (3) as many times as you like for different UA properties with additional blocking rules, alternative macros, or more granular firing rules.

You can now tweak the specifics and add other types of tags that reuse rules and macros without having to change the application for every change.

+3


source






More articles:


All Articles