Barba: Google Tag Manager Issue

Created on 3 Nov 2017 · 5Comments · Source: barbajs/barba

Hi,
It's not clear how can I update Google Tag Manager with barba js? it's in the <head> tag right now, but I've tried initStateChange instead.. But it's dosen't seems to work.. please help.

Barba.Dispatcher.on('initStateChange', function() { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-*******'); });

Source

wezzou123

Most helpful comment

With the recent Google Tag Manager Script I've added this code.

// Barba Google Analytics
Barba.Dispatcher.on('initStateChange', function() { if (window.ga && (document.location.hostname != "localhost" && document.location.hostname != "xcrap.local")) { gtag('config', 'TRACKING-ID-HERE', {'page_path': location.pathname}); } });

The reason I have document.location.hostname != "localhost" && document.location.hostname != "xcrap.local" It's not to track page changes in my localhost environment. And of course you have to have the normal code above in every page.

xcrap on 20 Nov 2017

👍4

All 5 comments

I using something just like this for GA

Barba.Dispatcher.on('initStateChange', function() {
  if (typeof ga !== 'function' || Barba.HistoryManager.history.length <= 1) {
    return;
  }
    var trackers = ga.getAll();
    trackers.forEach(function(tracker) {
      ga(tracker.get('name') + '.send', 'pageview', window.location.pathname);
    });
});

czapizzle on 7 Nov 2017

Scripts in the document do not get reevaluated on change. In GTM we created a History Change trigger and have the GA tag set to fire on All Pages and the History Change event.

dnwhte on 9 Nov 2017

👍2

With the recent Google Tag Manager Script I've added this code.

// Barba Google Analytics
Barba.Dispatcher.on('initStateChange', function() { if (window.ga && (document.location.hostname != "localhost" && document.location.hostname != "xcrap.local")) { gtag('config', 'TRACKING-ID-HERE', {'page_path': location.pathname}); } });

xcrap on 20 Nov 2017

👍4

@xcrap this code doesn't seem to work properly. It pushes to data Layer but tag manager doesn't recognize the page_path

skigo on 15 Jan 2018

@skigo Are you using the latest Google Analytics Tracking code and replaced the "TRACKING-ID-HERE" with your Analytics ID ?

path_path is one of the page_view properties.
https://developers.google.com/analytics/devguides/collection/gtagjs/pages

Are you testing this on localhost or live ? Because if you are testing on localhost remember that I've added document.location.hostname != "localhost" && document.location.hostname != "xcrap.local" so it's does not track on localhost, you would have to remove that to work.

xcrap on 15 Jan 2018

Was this page helpful?

0 / 5 - 0 ratings