Tracking fragments based navigation websites with GTM the right way
Table of Contents
We're going to learn how to track those websites where the navigation is based on Ajax, ie: no pages reloads with Google Tag Manager. As you may know a full page reload is needed in order to have Google Analytics tracking your pageviews, but those sites like the ones based on AngularJS are not reloading the page just the current page content, so this new pages won't be tracked by our Analytics tools, or even catched by our conversion pixels.
Those sites use the popstate event, to push a live URI change in our browser without reloading the page. We could write our own "popstate listener" to catch up those changes, but GTM is pretty smart and it has a tool called history listener , that we'll use to track those uri changes.
Every time that GTM detects a popstate event it will push an automatic event to the dataLayer called "gtm.historyChange" along with the previous fragment value and the new pushed one :
event | "gtm.historyChange" |
gtm.historyChangeSource
| "popstate" |
gtm.newHistoryState
| null |
gtm.newUrlFragment
| "contact" |
gtm.oldHistoryState
| null |
gtm.oldUrlFragment
| "" |
So basically what we're going to do is adding a new pageview tag that is gonna be fired when this event is pushed to the dataLayer, but there're some points that we need to have in mind:
Luckily we can think in some extra configurations in our Google Tag Manager container configuration to fix those previously mentioned situations.
AngularJS
Needed
Tags
History Listener Tag
Page Load Pageview Recording Tag
Fragment Change Pageview Recording Tag
Rules
Rule for the default pageView Tag
Rule for the fragment change pageView Tag
Macros
Macro for fixing the pagePath for page load Pageviews
Macro for fixing the pagePath for Fragment Pageviews
Null Value Returning Macro
There we go, now our Google Tag Manager container will record the right pageviews taking in mind the fragment part when registering the pagePath, and it will take care of firing a new virtual pageView when the pages fragment is uptated. Just off the record, this will work too for implementation not only changing the fragment but for all page types that change the uri path in the fly. ( ie: /contact.php to /aboutus.php without a page reload )
Any thoughs about this post ?, any improvement that you'll have done to have a better tracking ?, Just leave a comment so we can discuss about it :)