{"id":148261,"date":"2025-03-21T19:12:14","date_gmt":"2025-03-21T19:12:14","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/access-the-tracker-object-in-your-page-view-tag\/"},"modified":"2025-03-21T19:12:14","modified_gmt":"2025-03-21T19:12:14","slug":"access-the-tracker-object-in-your-page-view-tag","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=148261","title":{"rendered":"Access The Tracker Object In Your Page View Tag"},"content":{"rendered":"


\n<\/p>\n

\n

If you read my previous post<\/a> on fetching the Client ID<\/em> from the Universal Analytics tracker object with Google Tag Manager<\/a>, you might have agreed with me that it sucks you can\u2019t access the tracker object interface in real time using Google Tag Manager. This is because all of the set<\/code> commands you add to a Universal Analytics tag template take place before the analytics.js<\/strong> is loaded and the tracker object is properly created.<\/p>\n

The other issue with the tag template is that there\u2019s no set way to access the tracker object anyway. I mean, you can use the set<\/code> command, sure, but you can\u2019t really use get<\/code> or, for that matter, make use of any other interface methods you\u2019d want to such as plugins (more on them in this post<\/a>).<\/p>\n

\n

<\/p>\n

\"Setup<\/p>\n

<\/a><\/p>\n<\/div>\n

So, in this post I want to show a method you can use to actually mine the tracker object for whatever information you want, and at the same time ensure that the data is usable by the time your all-important Page View Tag fires. This is a notable improvement to the method I talked about in the previous post, which was to basically use a Window Loaded Trigger to fire a non-interactive Event Tag with the Client ID.<\/p>\n

This article was inspired and intellectually fuelled by the amazing Carmen Mardiros<\/a> (follow her: @carmenmardiros<\/a>).<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

The method<\/h2>\n

You\u2019ll have to use Custom HTML for this. I know, I know! It\u2019s a huge step backwards from the awesome, templated world you\u2019re used to. Using a Custom HTML Tag is necessary precisely for the reasons I listed in the beginning. Until the Tag Template supports adding arbitrary JavaScript code between the create<\/code> and send<\/code> commands in the template, you\u2019ll have to use a workaround.<\/p>\n

The upside is that all you need the Custom HTML code for is to setup the tracker object, and then push an initialization event in to dataLayer<\/code>, which will subsequently fire your actual Page View Tag. So, you\u2019ll end up with one extra Tag and a very slight delay to your Page View Tag, but the delay is so minimal it doesn\u2019t really make a difference.<\/p>\n

Here\u2019s what will take place:<\/p>\n

    \n
  1. \n

    Tracker object for your UA-code is created<\/p>\n<\/li>\n

  2. \n

    The Client ID is extracted from the tracker object as soon as it\u2019s available<\/p>\n<\/li>\n

  3. \n

    When the Client ID has been extracted, it\u2019s pushed into dataLayer<\/code> together with the initialization event<\/p>\n<\/li>\n

  4. \n

    This event fires your Page View Tag, and you can use a normal Data Layer Variable to retrieve the Client ID<\/p>\n<\/li>\n<\/ol>\n

    The Custom HTML Tag<\/h2>\n

    So, start by creating a new Custom HTML Tag<\/strong>, and make sure it fires on the earliest possible Trigger – usually the All Pages Trigger.<\/p>\n

    As for the code within, you\u2019ll get that from your Google Analytics Admin, under Property Settings<\/strong> -> Tracking Info<\/strong> -> Tracking Code<\/strong>.<\/p>\n

    \n

    <\/p>\n

    \"Tracking<\/p>\n

    <\/a><\/p>\n<\/div>\n

    Copy-paste that into your Custom HTML Tag. Now, proceed to remove the line which says ga('send', 'pageview');<\/code>. We\u2019re removing this because we still want to use the actual tag template for sending the pageview hit.<\/p>\n

    Now, if there are any modifications you need to do, such as adding additional trackers, you can set them up here. This guide has been written with a fairly basic setup in mind.<\/p>\n

    NOTE!<\/strong> Any modifications to the tracker, such as allowLinker : true<\/code>, custom cookie settings, and so forth need to be setup on this Custom HTML tracker, so that the Client ID you will be fetching from this custom tracker matches the one used by your main Page View Tag.<\/p>\n

    The next part is important. The analytics.js<\/strong> library is loaded asynchronously<\/em>, which means that you don\u2019t actually know when the tracker object has been created and its get<\/code> method can be invoked. So, the library lets you pass a callback function to the ga<\/code> object, which will be executed once the library has loaded and the tracker has been created. As I mention in the beginning: this feature is not available in the default tag template<\/strong>, which is why we need this workaround.<\/p>\n

    To add the callback, you add the following rows of code after the ga('create', ...);<\/code> expression:<\/p>\n

    \n
    ga(function<\/span>(tracker) {\n  ...any methods which need the tracker object\n});\n<\/code><\/pre>\n<\/div>\n
    Any code within the callback function will be executed only once the library has been loaded, the tracker has been created, and the tracker object responds to interface methods. In this callback function, we\u2019ll first fetch the Client ID, and then push it into dataLayer<\/code> together with an initialization event:<\/p>\n
    \n
    ga(function<\/span>(tracker) {\n  window<\/span>.dataLayer.push({\n    'event'<\/span> : 'trackerReady'<\/span>,\n    'cid'<\/span> : tracker.get('clientId'<\/span>)\n  });\n});\n<\/code><\/pre>\n<\/div>\n
    As you can see, I\u2019m invoking the get<\/code> command of the tracker object, and asking to retrieve the Client ID from the tracker. This wouldn\u2019t be possible without the ga(function(tracker) {})<\/code> call.<\/p>\n
    \n
    script>\n  (function<\/span>(i,s,o,g,r,a,m){i['GoogleAnalyticsObject'<\/span>]=r;i[r]=i[r]||function<\/span>(){\n  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1<\/span>*new<\/span> Date<\/span>();a=s.createElement(o),\n  m=s.getElementsByTagName(o)[0<\/span>];a.async=1<\/span>;a.src=g;m.parentNode.insertBefore(a,m)\n  })(window<\/span>,document<\/span>,'script'<\/span>,'\/\/www.google-analytics.com\/analytics.js'<\/span>,'ga'<\/span>);\n\n  ga('create'<\/span>, '{{GA Tracking Code}}'<\/span>, 'auto'<\/span>, {'allowLinker'<\/span> : 'true'<\/span>});  \n  ga('require'<\/span>, 'simoPlugin'<\/span>); \/\/ Any plugins you want to load would go here  \n<\/span>  ga(function<\/span>(tracker) {\n      window<\/span>.dataLayer.push({\n          'event'<\/span> : 'trackerReady'<\/span>,\n          'cid'<\/span> : tracker.get('clientId'<\/span>)\n      });\n  });\nscript<\/span>><\/code><\/pre>\n<\/div>\n
    Just a few comments on the customizations:<\/p>\n
    My personal, finished example for the Custom HTML Tag looks like this. Remember, any customizations you need for the tracker object need to go here as well, so be sure to read up on how to set up advanced configurations<\/a> for your Universal Analytics tracking code.<\/p>\n