MoOx / pjax

Easily enable fast Ajax navigation on any website (using pushState + xhr)
MIT License
1.45k stars 124 forks source link

[Enhancement] Google Tag Manager #154

Closed Malvoz closed 6 years ago

Malvoz commented 6 years ago

How would I go about modifying the current pjax.min.js from having the currently integrated Analytics code to Google Tag Manager instead?

Google is now recommending GTM over Analytics, could we have an example of such integration?

BehindTheMath commented 6 years ago

I've never used GTM. Can you post the code you're currently using?

Malvoz commented 6 years ago

@BehindTheMath

https://developers.google.com/tag-manager/quickstart

<!-- Google Tag Manager -->
<script>(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-XXXX');</script>
<!-- End Google Tag Manager -->
BehindTheMath commented 6 years ago

I don't mean the initialization code from Google. I mean the code you use to actually log events. Similar to the ga() function for Google Analytics. What are the function calls? When are they called? What type of data do you pass to them?

The Pjax's analytics function is called after all switches finish, right after the pjax:complete and pjax:success events are tiggered (see here). If all you want to do is log the page view, you can override that function by doing something like:

pjax.options.analytics = function() {
    // Your code here
}

You can see here how the default function for Google Analytics works.

Alternatively, you can add an event handler for those events and put your code there.

Malvoz commented 6 years ago

I'm not using pjax in production, and the initialization code from Google is the only code I've used in other projects, with GTM you instead add events in your account within the GTM interface.

BehindTheMath commented 6 years ago

So you don't have to add any manual logging code to your site? GTM takes care of that automatically, and you can just look at the dashboard and see all the logged events?

Which events are you looking for that you aren't seeing with Pjax? Just page navigation events?

BehindTheMath commented 6 years ago

I did a bit of Googling about how GTM works with SPAs, and from what I've read quickly, it looks like there's a History Change Trigger (see here, for example). Did you try that?

BehindTheMath commented 6 years ago

Closing due to lack of follow-up from OP.