I am trying to use Google Tag Manager to collect event data (including page view) but it isn't feeding through to Google Analytics once its deployed to Vercel.
I have checked the following things:
GTM has a GA4 Configuration Tag with the measurement ID from GA
I have set up the GTM measurement ID as a public variable in env.local (and reflected this in Vercel)
T have added the script to _app.js
I have added the iframe to _document.js
Set up the tags required in GTM and published it
Using dev tools I have checked that the gtm script (with the correct reference) is fired in the Network tab
Also checked dataLayer in the Console tab is collecting the data expected
However, in spite of all of this I can't see any data in Google Analytics. Played around a bit yesterday expecting to see some today but nothing.
It seems to work on localhost and checking both in real time Vercel doesn't register a view but localhost does.
Previewing the Vercel URL from GTM does say its connected and I can view that in real time in GA when going this way, but if I go to the address directly it's not logging it. Checking 'Tag Coverage' on GTM also says the pages aren't connected.
Am I missing something? It seems to work in theory, just not in practice when visiting the Vercel address directly (as opposed to via GTM preview)?
Thank you in advance
I think I found an answer myself and it's rather basic. It seems a pop up blocker I had installed ('Pop up blocker for Chrome™ - Poper Blocker') was preventing it from firing. Disabling the extension seems to have done the job.
Related
I'm trying to get GA4 e-commerce working for a client. For some reason though I cannot get the testing environment to send data over to any GA4 property. The preview and DebugView work just fine with the production website but the second I change the address in preview to the staging website nothing gets picked up anymore in GA.
The container shows in preview that it's installed correctly, you can see the events trigger like normal in GTM and when you open the tag it shows the correct measurement ID.
I created a new testing property to try and see if that made a difference, it didn't. It still only shows the events from the production site, not staging.
Tag assistant shows that the container is properly loaded on staging.
Anyone has any clue what i should be looking at? Any help would be greatly appreciated.
thanks
Double check that you're not inadvertently running AdBlock or have Firefox configured to block marketing tags. Either would result in the GTM Preview indicating conditions met and tag fired, but the browser could be prevented from actually sending the data.
Alternatively, check that your GA account/property doesn't have a filter engaged that's preempting the data from being processed in GA.
I was asked to implement the Google Tag Manager scripts into the React application. I've added the scripts to head and body of my html file. I've tested the site in the Preview mode of GTM and everything seems to working fine. Clicks and route changes are tracked correctly.
I have one doubt... What about the localhost development ? Is it going to generate unnecessary logs on the analytics (which I have no access to)? Or maybe it's just enough to paste the snippets and that's it?
I can't find an answer so that's why I decided to ask here.
If someone has some experience on that topic - please let me know :)
I would advise you to map separate Google Analytics property IDs by either a datalayer variable, URL or custom JavaScript to return a separate property ID based on whether users are accessing your website from either your localhost development environment, your UAT environment (if any) and then your production environment (or others as applicable).
Essentially you're looking at having something that says "if the URL contains "localhost", return my development property ID", then use this variable name in your Google Analytics tag(s) instead of a static value.
Yes, unfortunately all your existing testing is all in your profile because if you had the production property ID configured and fired off a bunch of events and pageviews, it absolutely collected and sent there as part of the debugging experience. Generally though, that's a low concern on a production app because you make up such a small portion of overall traffic; you're just a couple of blips in the larger dataset.
I am using GTM with Google Analytics and I can't get out of debug mode. I am not in GTM "Preview" mode and don't have the GA debugger extension installed. It's happening on all browsers - for everybody. Every page load dumps dozens and dozens of lines in the console like this:
I have checked all the settings I can think of both on GA and GTM. All the tags on GTM that use analytics have the debug set to false, and debugging by default is not checked for the environment (screenshots).
I am kind of frustrated and also concerned that this is slowing site browsing.
Any help appreciated.
Follow-up - I already suspected this, but it appears that GTM is the culprit. It's loading analytics_debug.js instead of analytics.js (despite there being no obvious setting set to debug).
I have another site that uses analytics directly (not through GTM), and it does not have this problem.
Well, turns out I did have a tag that had "use debug version" set to "true". I thought I had checked all the tags, but I hadn't noticed that there is now a 2nd page.
My client created a website and a google analytics account. The report indicates that the account is receiving data -- and yet, when we do a view-source of the pages of the site, there is definitely absolutely no analytics code there. How is this posssible?
It is possible that the Analytics code is added via Javascript, not appearing in the "View Source" page. It is also possible for it not to appear in the inspector either.
I do not know how this happens, but I have encountered scripts that exist and run although they are not displayed in either the source page or the live DOM inspector (in Google Chrome). This happened to me while loading a PHP template containing Javascript through an Ajax request.
If you have access to the source code of your website, search the entire project for for the Analytics ID (Here's how to find it: https://support.google.com/analytics/answer/1032385?hl=en), and you'll locate your tracking code.
If your project is running on a Linux server, here's a post about how to quickly find a keyword (like the Analytics ID) in a folder: How do I find all files containing specific text on Linux?
I run a standard google analytics tracking code (ga.js asynch version) on a website.
I am wondering if there is a line of js I can add to the tracking code so that I can segregate dev/prod data? e.g. when I pull in the codebase to do dev work, I can set the tag to DEV. When releasing back to production, DEV tag gets replaced with PROD tag.
Is this even possible and if so, how do i implement it?
One method I thought of is just to create a new "property" (which would generate a new ua number, which I could add during dev. that would allow me to track it all separately.)
Wondering if there are any other methods I should consider.
Alternative to mike's answer is to setup a filter in your profile based on the url or domain or based off any number of other things.
I'm not worried about collecting data from my development server, but I do want to make sure I'm not polluting my production data -- I've been using some variation of the following:
if (!/devServer|localhost/.test(window.location.hostname))
{
_gaq.push(['_setAccount', 'UA-11111111-1']);
}
On the devserver domain (or on localhost), _setAccount doesn't get executed, so the tracker defaults to the default tracker, UA-99999999-1. This allows you to still see tracking data being sent to the analytics servers (via ga_debug.js, chrome dev tools, firebug, fiddler, etc), but doesn't register against your production profiles.
Downsides -- it is an extra bit of code that get's run on the client.
If you do want analytics from your development servers, you could try something like:
gaq.push(
[ '_setAccount',
/devServer|localhost/.test(window.location.hostname) ? 'UA-11111111-1',
'UA-22222222-1']
);