[Enhancement] Google Tag Manager #154

New Issue

2018-04-27T04:37:42-05:00

Malvoz commented

2018-04-27 04:37:42 -05:00

(Migrated from github.com)

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?

How would I go about modifying the current [pjax.min.js](https://cdn.jsdelivr.net/npm/pjax/pjax.min.js) from having the currently integrated Analytics code to [Google Tag Manager](https://developers.google.com/tag-manager/quickstart) instead? Google is now recommending GTM over Analytics, could we have an example of such integration?

BehindTheMath commented

2018-04-27 08:05:48 -05:00

(Migrated from github.com)

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

Malvoz commented

2018-04-27 20:26:07 -05:00

(Migrated from github.com)

@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 https://developers.google.com/tag-manager/quickstart ```  <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>  ```

BehindTheMath commented

2018-04-29 14:04:19 -05:00

(Migrated from github.com)

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.

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](https://github.com/MoOx/pjax/blob/7d26a75fdfe4a8c24ff479612ea9a563ea72a81f/index.js#L216)). 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](https://github.com/MoOx/pjax/blob/7d26a75fdfe4a8c24ff479612ea9a563ea72a81f/lib/parse-options.js#L34-L40) 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

2018-04-29 15:09:20 -05:00

(Migrated from github.com)

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

2018-04-29 15:19:05 -05:00

(Migrated from github.com)

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?

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

2018-04-29 15:24:02 -05:00

(Migrated from github.com)

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?

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](https://www.analyticsmania.com/post/single-page-web-app-with-google-tag-manager/), for example). Did you try that?

BehindTheMath commented

2018-05-27 17:59:06 -05:00

(Migrated from github.com)

Closing due to lack of follow-up from OP.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#154