January 13, 2019
How To Track Single Page Web App with Google Tag Manager
Updated: January 13th, 2019. Tracking page views on regular websites is pretty easy: you just add a tracking code to every page and done! Every time a visitor clicks an internal link, a browser window refreshes, and a new page view hit is caught by the Google Analytics.
But when it comes to single page websites (or web applications), the default tracking stops working. Regardless of what does the user/visitor does on your website, only one page view is tracked. Does this situation sound familiar?
Why does this happen?
In this blog post, I’ll explain how to track Single Page Web App with Google Tag Manager (including SP websites).
What is a Single Page App / Website?
According to Google, a Single Page Application (SPA) is a web application or website that loads all of the resources required to navigate throughout the site on the first page load. As the user clicks links and interacts with the page, subsequent content is loaded dynamically (and the page does not actually reload).
The default Google Analytics tracking works well with traditional websites because the snippet code is run every single time users load a new page.
However, in single page website/app, all of the necessary code is loaded once and the page does not reload during the entire user session. That is why you see only one page view in your GA reports. The URLs might change but that is just to give the perception of separate pages.
A lot of web tracking tools won’t work as expected with SPAs because they’re written for traditional websites where the tracking codes can detect when a new page loads.
Actually, this is not a big deal when you use Google Tag Manager. Continue reading, I’ll show you how deep the rabbit hole goes.
Install Google Tag Manager
If you haven’t yet, install Google Tag Manager to a single page web app or website. I have published a blog post with several options for your consideration. Also, check whether your Google Tag Manager is working properly.
Done? Great, let’s proceed.
History Change Trigger
When you navigate the single page website or app, take a closer look at the browser address bar. Does the URL have a hash mark? For example, https://www.mywebsite.com/home#pricing. If no, don’t panic. I’ve seen websites which no hash mark, but they can be tracked with History Change trigger.
The string of characters that follows a hash mark is called URL Fragment. Luckily, Google Tag Manager can track when the hash changes and provides the perfect way to do it, the History Change Trigger. When activated, it enables a history change auto-event listener. This means that whenever a hash mark changes in the URL, you’ll start seeing gtm.historyChange events in the Preview and Debug mode thus you’ll be able to use them as conditions to send page views over to Google Analytics.
So if your single page application or website use hash marks in the URL, you’ll find this blog post pretty useful.
Enable History Change Trigger
First, you need to enable History Change Trigger. This way you can check whether this type of trigger is suitable for you (and what data can you get). Go to Triggers > New and enter the following options.
Next, head over to Variables. Google Tag Manager offers a bunch of built-in variables related to the History Change Trigger. In Variables section, click Configure (under the Built-in Variables) and enable New History Fragment variable. I’ll explain this choice later.
Check History Change trigger
Now, let’s enable Google Tag Manager Preview and Debug mode. An orange notification bar should appear in your account.
Once the preview mode is enabled, navigate to the site where the container is implemented and you will see a debug console window at the bottom of your browser showing detailed information about your tags, including their firing status and what data is being processed.
Click (or scroll) through various sections of the single page web app (or website) to make the hash mark change in the URL (in other words, just browse your single page app/website).
After the hash mark changes, take a closer look at the event stream in the Preview and Debug console.
Did the gtm.historyChange event appear? If yes, congratulations!
Every time a visitor navigates to a certain section of your app/website, gtm.historyChange event will fire. This is a perfect trigger to fire Universal Analytics Pageview Tag.
However, if gtm.historyChange did not appear, skip to the Plan B chapter of this blog post.
Let’s Check Our New Variable
Remember when I asked you to enable New History Fragment variable a few paragraphs ago? Let’s check what happens with it when a gtm.historyChange event occurs.
In Preview and Debug mode Event Stream, choose gtm.historyChange event and head over to Variables Tab. You should see something like this:
In the screenshot above, New History Fragment variable’s value is contact-us. This means that the address (visible in the browser address bar) is https://www.example.com/#contact-us.
New History Fragment stores the new URL fragment when it changes. If you need the know what was the previous URL Fragment, you can enable a built-in Old History Fragment variable as well.
P.S. If your single page website does not use a hash mark in the URL, try enabling all History Variables and see what data is available in the Data Layer (after the History Change trigger fires). I’ve seen some websites which were pushing valuable information accessible with New History State Change variable.
Checkpoint
OK, let’s do a quick summary what we have so far:
- We have created a History Change Trigger, which enabled a History Change Auto-event listener (somewhere in the background). Every time a URL Fragment changes, a gtm.historyChange occurs (this event is generated by the auto-event listener). If this is exactly what happened to you, this means that it’s possible to send virtual page views over to Google Analytics (with the Universal Analytics Tag).
- Furthermore, we have created a New History Fragment variable. Every time a URL Fragment changes and a gtm.historyChange trigger fires, we will know the exact value of the Fragment. This data will be later passed to Google Analytics as Page URL.
Is there something we’re missing? Ah, yes… the Universal Analytics Tag itself.
Universal Analytics Tag and GA Settings Variable
The last but not least, Universal Analytics tag. We’ll use it in order to pass the data to Google Analytics.
Normally, Universal tag fetches the value of the Full Page URL automatically and transfers it to Google Analytics servers. But unfortunately, URL Fragment is not a part of Full URL, thus Google Analytics does not catch it by default.
We’ll need to do some additional configuration in the Universal Analytics tag in order to send URL Fragment value over to GA.
First, if you haven’t created a Universal Analytics Page view yet, do that by going to Tags section in Google Tag Manager account. Click New and choose the following settings:
- Tag Type: Universal Analytics
- Track Type: Pageview
- Choose Google Analytics Settings Variable. If you’re not familiar with it, read more in my other blog post.
Now, we need to set a certain Google Analytics parameter page, that we’ll use to send the hashmark’s value over to GA. There are two ways how you can do that:
Way #1: Override GA Settings Variables settings. Then go to More Settings > Fields to Set > page >>> {{New History Fragment}} (just like in the screenshot below).
Do that with every Universal Analytics tag in your container (this will pass the {{New History Change}} value with every Google Analytics hit (page view, event, etc.). What if you have 50 GA tags in a single container? Yup, you’ll need to do this change 50 times. Yeah, terrible. That’s why there’s a better way.
Way #2. Set the page parameter in the GA Settings Variable (it will automatically be used by all GA tags that use the variable).
First, click the “i” icon next to the GA Settings Variable field.
And then go to More Settings > Fields to Set > page >>> {{New History Fragment}}.
In both ways, we tell Google Analytics to ignore the Full Page URL value it fetches by default and use the {{New History Fragment}} instead.
So if website’s or web app’s address is https://www.example.com/#contact-us, the Universal Analytics GTM tag will send contact-us to GA as page value.
And finally, the History change trigger we have created at the beginning of this blog post. Assign it to this Universal Analytics Tag.
You might also need to assign the default All Pages trigger to the GA Page view tag if the gtm.historyChange event does NOT appear in the Preview and Debug mode when the initial page load happens.
What does this mean? In some projects, I’ve seen gtm.historyChange event occurring in the GTM debug console together with the initial page load.
First, you see Page view, then DOM Ready event, and then gtm.historyChange. If that’s your case, you should just be using the History Change trigger in your page view tracking (and avoid the All Pages). Because if you also used the All Pages trigger here, the first page view would be tracked twice, 1 time because of the Page view event and the 2nd time because of the gtm.historyChange event.
Now, save the Universal Analytics tag, refresh Preview and Debug mode, and try interacting with various parts of a single page app/website. Every time you navigate somewhere, a Universal Analytics Pageview Tag should fire.
Don’t forget to check the data in GA Real-time reports.
That’s it! The technique we used here is called Virtual Pageview. Although the page was never reloaded, we imitated a Virtual Pageview with help of History Change Trigger and sent it over to Google Analytics.
Things to keep in mind
If website’s/app’s address contains not only URL fragment but Page Path as well (e.g. https://www.example.com/category1/product2/#contact-us), the solution I’ve described above will only send contact-us to Google Analytics and category1/product2 will be ignored.
So if your single page website/app address contains not only URL Fragment but also Page Path, you should update the Universal Analytics settings to this (either in all GA tags or in the GA Settings Variable):
- Instead of page >>> {{New History Fragment}}
- Enter page >>> {{Page Path}}{{New History Fragment}}
Plan B
If (for some reason) History Change trigger isn’t working for you, there’s a Plan B how to track single page web app with Google Tag Manager. Ask a developer to fire a dataLayer.push event whenever a user navigates to any part (or section) of a website/web application.
Here’s a sample code snippet that the developer could use:
|
1 2 3 4 5 6 7 |
<script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'Pageview', 'url': 'https://www.example.com/something/contact-us' }); </script> |
Note: The ‘url’ parameter (in that code snippet) should be dynamically changed to the address of the page a visitor is currently viewing. A developer should take care of that.
Anyway, what does that code mean?
Every time a user goes to a particular section of your page, a developer should fire that little piece of JavaScript code. It indicates that a “Virtual Pageview” occurred and the current page address is https://www.example.com/something/contact-us. You should use it as a trigger to dispatch a Universal Analytics tag.
To achieve this, complete the following steps:
Create a variable:
- Title: dlv – url (dlv stands for “Data Layer Variable”)
- Variable type: Data Layer Variable
- Data Layer Variable Name: url
Create a Trigger
- Title: Custom – Pageview
- Type: Custom Event
- Event name: Pageview
- This Trigger Fires On: All events
Update Universal Analytics Pageview tag or the GA Settings Variable (that I have previously described):
- Fields to set: page = {{dlv – url}}
- Trigger: Custom – Pageview
Fix the rogue referral issue
Working with a single-page application and sending virtual page views to Google Analytics might mess your referral data up. Simo Ahava has posted a solution how to fix the rogue referral issue. So after you follow my tips on how to track a single page web app with Google Tag Manager, head over to Simo’s blog and implement his solution too.
Track Single Page Web App with Google Tag Manager: Conclusion
The problem with single-page web apps or websites is that regular pageview tracking does not work. All of the necessary code is loaded once and the page does not reload during the entire user session. This is why you see only one page view in your GA reports.
Fortunately, that’s a fairly easy issue to overcome. In order to track a single page web app with Google Tag Manager, enable History Change Trigger and built-in History Fragment variables. Use that trigger to create a virtual page view by dispatching a Universal Analytics tag.
If History Change trigger isn’t working, there’s also another way to track a single page web app with Google Tag Manager. Ask a developer to send you a virtual pageview event via dataLayer.push every time a user interacts with the page. Then create a Custom Event trigger as a condition to fire a Universal Analytics tag.
By the way, if you found this post about tracking single page web app with Google Tag Manager useful, consider subscribing to my newsletter. You’ll get various bonuses and useful stuff related to GTM.
Did I miss something or do you have any questions? Let me know in the comments.
108 COMMENTS
Great post, my site uses SPA and we have been taking advantage of our fragment identifiers for Google tracking. However Facebook custom conversions doesn't recognize the fragment identifiers. Has anyone found a way for Facebook custom conversions to trigger based off a pageview for a SPA site?
Hey, no solutions yet. I've bookmarked your question and will take a look sometime later.
Cheers
Julius
I've found the solution. Find out more by reading my guide - Track Pageviews with Facebook Pixel in Single Page Applications.
Hi Julius, great post. I have a question? In case of Plan B (History Change trigger isn’t working) do you think can I use a Custom Html tag to send the dataLayer.push event? How can I use a trigger to activate the custom tag when a user is on a specific section of the page (ex. id = contact-us)?
Thanks
Stefano
Hey, To be honest, I have never tried to do what you're looking for. Could you give me a link to a website you're trying to track?
Hey Julius, perfect post. found your post after a little search. I configure everything well, the trigger is working an it fires up! I tried it and it is working very good, but im not getting the data into my analytics. I checked it in the realtime sheet but it is not working. But the tag is not so difficult to set up. I dont get it!
ok i got it! It takes in the GA realtime some minutes(5) to see the values. Thanks again for that goog posting
Hi Julius,
Fantastic post!
Setting up GA makes perfect sense.
I have a related question: how does comScore play with these history changes?
I've worked with media companies who are moving to more dynamic front end experiences--especially for galleries and infinite scroll pages.
Using GTM, I suppose the same trigger could call the primary comScore tag, but I haven't seen any documentation about it.
Thanks for posting this guide!
Hey Ben,
Unfortunately, I am not familiar with comScore and how it works, therefore I cannot give you any advice.
Cheers
No worries!
Hi Julius,
I've used your method and can track the historyChanges in preview/debug mode of GTM however cannot see the #success in GA. The page is www.example.co.uk/sample/#success, in Real Time reports of GA I can see the /sample but not the #success. Any advice?
Thanks,
Liam
Hey,
By default, Google Analytics does not track URL Fragments (in your case, #success). In this blog post, there is a section called "Universal Analytics tag" where I explain how to solve this issue. You'll need to send an additional parameter "page" with every pageview.
Cheers
Hey Julius,
I've created an additional UA Tag and use the Field name 'page' with the value {{Page Path}}{{New History Fragment}} and still cannot see it pulling through into GA. As I say, it appears to be firing correctly as once the #success is called the debug shows gtm.historyChange as you have shown above. Any ideas?
Thanks
Hey, first of all, you don't need an additional UA tag. You need to update your current pageview tag.
Secondly, In preview and debug mode, click gtm.historyChange event and go to Variables tab. What is the value of the New History Fragment variable? Is it empty? Or is it "success"?
Thirdly, when your gtm.historyChange event occurs in GTM Preview console, click it and then click the box of Universal Analytics Tag (in "Tags Fired on This Event" section). Then check what values were passed with that tag to Google Analytics. "page" parameter should also be visible there. Maybe you'll notice something suspicious there and it'll help you debug.
Let me know if anything helped or gave you new clues.
Sorry I'm just finding my feet with this so apologies for all the questions. If I update the current UA tag, do I leave the fire on all pages and add the new 'History Change - All Events' trigger also?
When in Variables tab the New History Fragment is indeed success, it appears to be working as expected however I cannot see the page in GA. I have setup other events through GTM and they pull through to GA but tracking the url fragment is becoming very problematic!
The answer to the first question is "both". You should keep both triggers.
As for the other question, it's really hard to debug without seeing actual preview mode or google analytics. Could you share access with julius @ analyticsmania.com to your Google Tag Manager Container and Google Analytics account. I could take a quick look.
Also, please send me the link of the website you're trying to track.
Hey again, I'm looking at your thirdly advice. I'm seeing this which looks fishy: fieldsToSet: [{fieldName: 'cookieDomain', value: 'auto'}],
Shouldn't that be fieldname: page value,/XXXX?
Everything else seems to be working correctly. I just can't connect this last piece. Thanks!
No, cookieDomain variable is for another purpose. If you want to pass the page URL as a variable, use "Fields to set: page" (just like I did in this guide).
Yes, my tag looks exactly like your example. I don't get passed tho when I look in the preview
Send me an email to julius [ at ] analyticsmania.com with the following information:
- Link to that website
- Also share "edit" access to that GTM container with julius [ at ] analyticsmania.com
- And give "read" permission to the GA property + view that you're checking the incoming data.
Done. Thanks so much Julius!
Thanks for the help Julius. I've granted you access and sent you an email so hopefully we'll be able to get this sorted. Thanks again!
Hi Julius, in that case it's same with fragment parameter through custom variable, and send the value as virtual page in custom field in google analytics tag?
Because, really I don't understand the importance of history change with fragment if I have a custom variable created, and I think both are same things, no?
Thank you for your reply!,
Marcus
Hey Marcus,
What do you mean by saying "Custom variable"? Is it a Custom JavaScript variable? If yes, then sure.
History change with fragment is a solution for non-developers who can easily track URL changes without writing additional JavaScript. If you know JavaScript, then you can achieve pretty much the same result.
I hope I understood your question correctly.
Julius
Hi Julius,
Thanks for another fantastic post! Your website is a gold mine, seriously.
I am preparing the tracking strategy for a hybrid app that runs most actions in webviews so I will use a regular web setup for Analytics but obviously, it's a bit trickier and your article is the first that provides actual, updated info on the topic of virtual pageviews!
Quick question though: along with the pageview event, you send the 'page' variable, which is a standard GA variable (correct me if I'm wrong). What if I want to send custom dimensions along with each pageview? How would the event look like?
Thanks in advance!
Marine
Hey, that's a good question. Since you're passing the pageview data with an additional "page" parameter, custom dimensions will also be accepted and processed by GA.
In other words, Custom Dimensions will work in the same manner just like with regular pageviews.
That makes sense.
This solution works perfectly for hit-scope dimensions. What about user- and session-scope custom dimensions?
Should work as well.
I wouldn't be able to query them against user and session dimensions though if they are sent with a pageview hit, don't you think?
All dimensions sent with a pageview needs to be hit-scope, do you agree with that?
Honestly, I'm not sure :) I still believe they should work with all scopes. Julian from MeasureSchool has posted an interesting video how to debug the data collected by GA with different scopes. Feel free to check it out, maybe it will give you additional insights.
Thanks for this post. Correct me if I'm wrong but the history change strategy does not allow you to trigger a page view for the first page a user visit. Do you have any suggestion for this use case?
Yes, history change usually does not work right after the page is loaded. In that case, assign two triggers to Google Analytics Tag: "All pages" and the one with "History change". IF any of these is triggered, the Virtual Pageview GA Tag will fire.
How do you get the hash value if no state has change on the initial hit?
You can use regular All pages trigger on the initial load. In other words, you can assign two trigger to your GA tag:
- "All pages" which captures the initial page load.
- "History change" which track further changes of the URL fragment.
Here's what I ended up with, I added a new variable to get the path with the hash for both of the instances:
function() {
// Handles history state changes, as well as first initial loads with hashes
var hash = {{New History Fragment}} ? '#' + {{New History Fragment}} : window.location.hash;
return {{Page Path}} + hash;
}
Hi Julius
Thanks for the post. Wont there be duplicate count from All pages and history change for non home pages.?
Hey, it depends on how the SPA is developed. If the history change trigger is triggered right after the page load, then the regular All Pages trigger is unnecessary.
@GH I ended up using a caching layer which adds an extra event in.
So on history state change it calls custom JS that checks if the Current URL state is different than the Last URL state, if they are then pushes the data layer updating the Last URL state to the Current URL state as well as pushing out an event for "pageUrlChanged" I then listen for that as a custom trigger to fire off GA.
Thanks for this post, Julius.
Incredibly useful.
Also thanks to Cody for his function to solve this problem.
I set this up using two triggers, one to catch regular page views and one for History Change. Should I switch to one Tag with two triggers or is it ok as two seperate tags?
Hi, nice tips. thank you.
But i just wondering i i use the Plan B with declaring datalayer 'url' as page url do i also get page path, hostname, automatically or i should also declare them id datalayer?
have you tried that?
thanks
It depends you on how you declare that URL in the data layer. The best way to find out is to try. Give it a try and see what happens :)
Hi Julius,
first of all: Helpful article, thank you! I use your event + data layer push method (for page / title) for a web app (no hashes, no reload) but unfortunately it only works in about 60 % of the cases. In 60 % of the cases it shows the correct page / title, in 40 % it shows the default uri / meta title.
When I check GTM's debug mode, the data layer is filled correctly.
Any idea?
Nope, no ideas yet. If you want, you can send me more details to email julius [at] analyticsmania.com.
The information I'd need:
- The URL of the page where the title is wrong
- The URL of the page where the title is right
- Send me a link to the shared Preview and Debug mode.
Cheers
Hello Julius,
Your guide worked great for pageview tracking but I can't figure event tracking.
None of my events are coming through into GA.
Any insights would be appreciated.
What does GTM Preview and Debug mode say? Do those event tags are displayed as "fired" in the preview console? Each event might require a separate GA Event tag.
Hello Julius,
Great article!
If we only want to track the page paths and not work with fragments. Can we skip creating the new history fragment and skip this part?:
"Choose Google Analytics Settings Variable. This time, I will not go into details, how it works. You can read more about it in my other blog post. This time, I’ll choose to override the GA settings variable.
Enter Tracking ID. The best practice here is to add it as a Constant Variable.
More Settings > Fields to Set > page >>> {{New History Fragment}}"
Yes, looks like you can skip that part.
Hi Julius,
I have using this method for a year. and i have my ultimate problem.
my case is an SPA using react,
when "histroyChange" is triggered, variable on "Page Title" or "isJWPlayerFoundOnPage" is still have value from earlier page. basically, any variable which would have a correct value on window loaded on conventional website, will not updated yet on "historyChange".
so, i end up with correct page value but often have inconsistent on page title on google analytic.
do you have solution for that? thanks in advance.
Yes, talk with developers. Ask them to fire a dataLayer.push every time a state (page) changes. That .push should contain Page title and other useful information, e.g.:
window.dataLayer.push({
'event': 'Pageview',
'pageTitle': 'This is a page title',
'someUsefulInformation': '123abc'
})
After that, create Custom Trigger, Data Layer Variables and use them. History change trigger and variables will not be useful in this case. Using dataLayer.push is a very robust solution which increases the quality of your data.
Is the {{Constant - GA ID}} set to your UA-XXXXXX (Universal Analytics ID)?
Yes, even better if you use Google Analytics settings variable - https://www.analyticsmania.com/post/google-analytics-settings-variable/
Thank you for the great article.
I have a question, we have multiple subdomains on single domain, using 1 GAID. Only one subdomain is a single-page app. Is that a safer approach to create a new page view trigger to only fire on this SPA (subdomain) with your solution, and create a blocking trigger for current pageview tag not fire on this SPA (subdomain), or it really does not matter?
Hi, it depends on the structure of the single-page website + the structure of other sites, their settings, etc. Both approaches can work fine. I'd prefer using one pageview tag and set history change triggers to fire only on that landing page.
Thank you very much Julius, that makes perfect sense! I am going to try with your suggestion !
Hi, and thanks for the great article!
But we have an issue: before login or registration we have SEF URL, like /category/page. After registration or login user goes in "SPA part of site" with #! urls. The problem is that on first page after login, analytics tracking fire twice:
1 - like pageview (because page reloaded after click on "register" button)
2 - like history change (because we have #!thankyou url fragment after successful registration)
So - i don't know how to get rid of this f*cking doubled data. Maybe you know something decision?
Hi, One of the ways would be update your history change trigger to not fire when url fragment equals to "login" (or whatever the value is at that moment).
Ok, thanks, i will try it.
Hi Julius,
We have questionnaire on the website and with every question it will add quiz/#/question1 quiz/#/question2 etc. to the url. When someone goes from question 1 to question 2 etc is all works perfect.
But when someone goes directly to quiz/#/question1 the history fragment is nog loaded and the page url in GA will be /quiz instead of /quiz/#/question1.
How can I solve that?
But is the fragment visible in the URL? If yes, what is the value of the URL fragment-related variables in the preview and debug mode?
Yes the fragment is visible: http://comsla-kaluangan.savviihq.com/quiz/#/naw (staging website). When you go direct to the URL is gives the value "Undefined".
If you visited a page before, click on a link to start the questionnaire it gives the fragment as a value.
I don't have the access to my laptop now but I guess that the URL fragment is not yet available on the pageview event. Here's a guide that you could try as a workaround. It will delay the History change trigger https://www.simoahava.com/analytics/delay-the-history-change-trigger/
Hi and thank you for article. I was able to implement it on our SPA website. The problem I see is that Chrome GA plugin can't detect that it runs properly, but GA reports the numbers. So I guess it works.
Also I'd like to implement conversion tracking separately for several forms. I tried many different setups in TGM, but it is still unable to trigger it. Could you write article about this issue as well? Thanks.
Hello, I've gotten almost all of our SPA working with GTM, only problem I'm having is before when our site used to be a regular site, we were able to be deliberate about certain pages not even having any tracking scripts (For example, the login page) for obvious reasons. But in a SPA, once a GTM trigger has been fired and a JS script is already on the page, if a user goes to the login page, is there any way to remove any tracking script on that page without a full reload of the SPA?
If you search the comments for "login" there's a similar situation above from Max with an answer to not fire when the url fragment = "login".
There's also similar logic to fire off a custom HTML tag which you can then filter out whether or not you want to fire off the next event which will actually fire off the analytics or modify the data layer you're passing over. For example we test that the last URL isn't the same as the new one, you could also test that it's not the login page. If the conditions are met though then you can push an event into the data layer with whatever information you want (we push the lastUrl into the data layer) then we fire the analytics from that event.
I understand when scripts won't get fired on certain SPA pages, but if a script is already on the DOM, any script can hook on to let's say a window event. Now if I go to that login page, that event would still be there even if the script isn't executed again, any solution?
GTM should not be considered as a tracking script if the container does not fire anything on that moment. Therefore, if a visitor goes to the login page, just set your tags not to fire there by adding a blocking trigger. Blocking trigger's rules:
Event name: .* (enable Regex checkbox)
Condition: New History Fragment contains /login/ (or something like that).
Add this trigger as an exception to all the tags which you do not wish to fire on a login page.
Hi Julius
I just have a few things I hope you have some articles on. I'm using GTM and is familiar with GA.
I want to be able to track and see if some events lead to a conversion compared to others. Ultimately create "charts" showing me what event path create a conversion and which doesn't. I have managed to create a Funnel Visualisation in GA using GTM. However, this is not providing me with the information I seek.
- For example, all my users who read "Reviews" tend to complete their booking. Those who don't fail to make use of their booking.
I hope this makes sense.
Hey Matias, sorry, I don't have articles on funnels.
Hi Julius!
Thanks, this post is awesome. I use it to track users accessing #sections in a couple of my pages.
I have an issue with your first method, though: it seems like every single scroll state is now accounted as a single page view. As a consequence, the day I sent this tracking live, I had a huuuuuge increase of views counts on pages including fragments :/
Do you know how I could track only fragments appearance?
Thanks!
Hey, could you share a link to the GTM preview and debug mode?
Hi Julius!
Thank's for the post. It was really useful. But i need your help. My website has the # between // like this www.page.com/#/page/us ... I've already did everything you said in the post in the tag fires everytime but i can't see the result in Analytics
Can you help me please?
Best Regards!
Hey, if the tag fires but you still cannot see pageviews in the GA Real-time reports, there are several general ways how to troubleshoot this and fix it https://www.analyticsmania.com/post/google-analytics-real-time-reports-not-working/.
I have an SPA that's being used on a touchscreen at a congress and multiple users will be using it throughout any given day. I can easily track pageviews as stated above however how can I tell GA that a new session has started when another user comes to use the app? I don't refresh the browser at any point between users sessions however i can do this if needs be. My main question is: will GA/Tag Manager know intuitively that it's a single page app based on the pushing of custom pageview events (i'm using plan B) and register a new session if the page is refreshed?
Hey, in your case, you could use "sessionControl" field in the Google Analytics Pageview tag. Every time a user comes in, you'll need to refresh the page. On that refresh, you could pass the additional field "sessionControl":"start" (in the "Fields to set" field of your GA Pageview tag). The Pageview tag must fire only on All Pages, DOM ready or Window Loaded trigger (definitely not on history change or custom dataLayer.push).
Here's more about the session control parameter https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#sessionControl
Hi Julius,
Thank you for your useful guide. In your answer to Liam on JANUARY 3, 2018 AT 6:38 PM, You asked him to see if the UA tag fired. (as he saw the history change fire but does not see the variable in Analytics)
In the Variables tab of google tag manager I see the New history fragment Data Layer Variable string: 'pricing'
but in the tags tab, it tells me that the UA tag does not fire. Is this normal or could this be the issue why I don't see the label "pricing" in analytics -> behaviour -> site content?
Thank you
Jean
If the tag does not fire although it's supposed to, then it's definitely not an expected behavior. If the tag did not fire, it looks like your trigger is misconfigured. In Preview and Debug Mode, click the history change event, then click the tag that was supposed to fire (but did not). You'll see the conditions of your trigger and which ones were met. This should give you more clues of what's wrong.
thank you so much
I found this helpful in all sort of ways. I really appreciate what you have done here, so much lesson in just one go.
However Plan A and B aren't working for me. The Web App uses the Menu items to point to different container DIV's on a SPA. All Sections appear on load, the menu item is to make it easy to move from section to section using the routerLink="/promotions" to match Container DIV ID. Any solutions to this as yet?
Sorry, I did not understand the problem. Could you rephrase it?
Hi - this post is incredibly helpful and is exactly what I'm looking for. I do have one question. My site has a mixture of pages with and without anchors but I'd like to track the anchors. I currently have GTM configured to trigger on "page views." I want to make sure that whatever I do doesn't result in double counting page views, so do I:
1. Keep my existing trigger and add a history change trigger,
2. Remove my existing trigger and replace it with a history change trigger set to page >>> {{Page Path}}{{New History Fragment}}, or
3. Something else?
Thanks so much
Hey, you need to combine both options:
1. Keep the original Pageview trigger and add the History Change trigger.
2. Set the "page" parameter to {{Page Path}}{{New History Fragment}}
If the {{New History Fragment}} is empty (meaning that there is no fragment), then the variable will return an empty string "" (and that is harmless to your data).
Hi Julius! Thank you very much for the post. Our website it has been build under Angular (SPA) and the URLs look like this: https://app.fasttrack.menu/#/shops/16 I followed every step but when I tried to enable Preview and Debug mode, the orange notification didn´t appear.
Do you have any clue, what´s going on?
Thank you very much in advance from Spain.
Mikel Azkarate
Hey Mikel, most likely, your browser or a 3rd party extension (AdBlock, Ghostery) blocks 3rd party cookies. Read this guide https://www.analyticsmania.com/post/google-tag-manager-preview-mode-not-working/
You´re right! Thank you very much!!
Thanks for the well explained article! Really good!
Hi Julius,
Quick question. I have done set up as you suggested. And its working fine. But the problem I have is, in all pages of the SPA the history change fires twice. For example from the landing page, when I navigate to inbox it will send two page views. This happen across all pages. Any idea how I can overcome that.?
Thanks a million
Regards,
Keshan
Hey, in this case, I'd consult with a developer:
- Either ask to take a look at why there are two URL changes at once and ask to fix it and make it only one.
- Ask a developer to push every URL change to the data layer (just make sure that a developer does not send duplicate events). This guide might be useful https://www.bounteous.com/insights/2018/03/30/single-page-applications-google-analytics/
Also, check if there aren't multiple history change triggers or multiple containers on a page with enabled history change triggers.
Hi,
If you have a website where the url does not change (only the content dynamically reloads) is it better to push virtual pageviews or track navigating through the app as events? The best practice?
Best Regards
Hey, the best practice then is to ask a developer to push the data layer events when the state of your app changes and also with that event he/she should push the "fake URL", for example "/dashboard/". Then you could fetch that fake URL with the Data Layer Variable and send it to GA together with the virtual pageview.
Hey! Great article but I've a problem with configuration. I'm trying to add chat on every page but without cart page. I added variables with "path page does not contain cart" and it's still not working. It's good when I navigate by clicking on url path and loading again all app. How to configure GTM in dynamically routing path?
The issue with the SPA is that if a script fires it will be active as long as the page is not fully reloaded (with F5 or Refresh). So if a chat has already loaded in, say, product page, it will also be visible in the cart as well (because the page does not reload).
You should consult with the developers/creators of your chat solution and ask if there is some sort of JavaScript API that allows showing/hiding a chat by firing a little snippet of code.
Thank you!
Hi Julius,
I actually have a website which is done on Wix and the GTM code is place according to their instructions, the GTM account ID was just introduced in the CMS.
Problem is that pageviews do not fire when you change the page from the menu. If I reload the page it works fine but if I press on anything from the menu, like if I press on blog, or about page, no pageview is triggered. The URL of the page changes as it should (no hash, the URL acually changes) and below the menu the content changes. But my guess is that when the content changes the page is not reloaded. None of the history change variable are showing anything and I just can't figure out what's going on.
Could you please help?
Thanks,
Catalina
Hi,
I just found out a solution. My URL is changed without hash and even though the history variables are not showing anything the Page Path does change, which is great because that can be caught with a History Change trigger -> Fire on Some History Changes -> Page Path matches RegEx :* and this trigger can be added to the Pageview Tag. Just in case anyone needs this as well :).
There is a better way to track Wix pageviews. Read this
Hi Julius,
Thanks a lot for sharing such great content.
One of my client has a ReactJS app and want to track events and pageviews in it.
I read your post and it seems that I can do it without any specific library. But I saw on some other websites that with REactJS, it seems mandatory to use specific library like :
https://github.com/faouzioudouh/react-tracker
https://www.npmjs.com/package/react-google-tag-manager
Did you already implement some Google TAg MAnager and Google Analytics tracking on a ReactJS app ?
Do you think the implementation you provide can work on this environment ?
Thanks a lot
For React apps, it's better not to use my provided solution and go with either some custom libraries or just as a developer to code a solution. Every time a state changes in the React app, a developer should push that change to the Data Layer, e.g.
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pageview',
'pageUrl': '/something-something/',
'pageTitle': 'Page Title'
});
OK. Thanks a lot :)
Thanks Mate! Never know there is a variable called HistoryChange. This is the first time am doing GTM setup for one page application. Keep sharing!
Hey Julius,
I implemented all of what you have specified above + I see the gtm.historyChange in my debugger + i review what is passing through to GA when that UA tag is fired , and I see
fieldsToSet
[
{
fieldName: 'page',
value: '/resort-detail?sid=MjQ2MzIzYzYtNTkxZC01ZWI1LTFkYWYtZjRmZjZiMzAwOGVj'
},
{
fieldName: 'page',
value: '/search-resorts?sid=MjQ2MzIzYzYtNTkxZC01ZWI1LTFkYWYtZjRmZjZiMzAwOGVj
'
},
{
fieldName: '/resort-detail?sid=MjQ2MzIzYzYtNTkxZC01ZWI1LTFkYWYtZjRmZjZiMzAwO
GVj',
value: '/resort-detail?sid=MjQ2MzIzYzYtNTkxZC01ZWI1LTFkYWYtZjRmZjZiMzAwOGVj'
}
which is great! I'm able to see all the information needed when I look in the debugger, however again problem I am having info isnt passing to GA
Can I email you with more details?
Thank you so much!!!!!!
How to use adsense auto ads via Google Tag manager for SPA ? Since adsense auto ads is not working for SPA.
I am creating a destination goal for my funnel visualization.I have created virtual page views and used same in my funnel step inside goal.My Funnel report is ok if user completes a session , but its not showing drop outs from any step (not showing the exit).Please help.
Hi Julius,
Basically, we have a static one-page solution and on that page is a multi-step form. Visitors go through several steps and each step is marked with a fragment.
For example
Visitors land on the page /umzug/#step1 clicks on a button which takes them to the next step of the form. The page doesnt reload, instead #step1 changes to step#2 and so on.
I did everything as explained (at least I think I did) and it works, generally speaking (tracks everything I want in Google Analytics).
Way #1: Override GA Settings Variables settings. Then go to More Settings > Fields to Set > page >>> {{page path}}{{New History Fragment}}
As soon as I check that box and go into preview mode and click a button, the page seems to load again everytime I go to the next step (page goes blank and seems to load the new #site). Like I said, it works, but that "loading" of the next step takes about 2secs.
Any idea on why this happens?
This is not related to URL Fragment tracking. It sounds like you have a Link Click trigger enabled somewhere on a page that:
a) has "Check validation" checkbox enabled. Disable it.
b) has "Wait for tags" checkbox enabled. Disable it as well.
Try now.
b) has "Wait for tags" checkbox enabled. Disable it as well.
--> that was it for me! Thanks! I created a priority chain for google optimize.
Google Optimize Anti-Flicker Snippet before Google Optimize and Google Optimize before Google Analytics.
However, how do I guarantee now that the Google Optimize code is fired before google analytics?
Really want to avoid hardcoding it on every page (the pages that need them are not being managed with a cms). I know it is recommended to distribute the optimize code via tag manager and to hardcode the anti-flicker snippet on each page (with the google tag manager container as the target of the anti-flicker snippet).
Any recommendations?
Solved
Thanks for this excellent article! Been of big help!
Our URL-Pattern looks like
https://www.domain.com/de-de/shop/suche/#/q/regenhose/
I have set "page" to "{{Page Path}}{{New History Fragment}}"
Now there are two trailing slashes between {{Page Path}} and {{New History Fragment}}:
/de-de/shop/suche//q/regenhose/
How would you solve this?
Hey,
This is not a problem, just cosmetics. You can enter # between {{Page Path}} and {{New History Fragment}} in your "page" parameter, but this will add the # when there is no fragment in the URL, e.g. homepage.com/#