Google Analytics 4 Scripts from analytics and tagmanager: how are they supposed to cohabit? - google-tag-manager

I am a complete beginner to GA4. By migrating our website to GA4 with the GAnalytics assistant, I first got such script to put at the beginning of the <head> section, which I did:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CN4GDXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-CN4GDXXXXX');
</script>
This is now live and let us see some users in the Reports Snapshot and Realtime view.
Question A) I expected to see the pages browsed by users in Engagement > Pages and Screen but can only see No data available (for the date of today). Should we wait to see data here? Or should we do something?
Then I read I needed Google Tag Manager to be set so I went to https://tagmanager.google.com/ where it didn't link to our actual GA account and asked to created a new account.
Question B) isn't the same account supposed to be used in both https://analytics.google.com/ and https://tagmanager.google.com/ ?
So I asked for a new tagmanager account and it provided two scripts not uploaded yet on the website:
Paste this code as high in the <head> of the page as possible:
<!-- 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-PSXXXXX');</script>
<!-- End Google Tag Manager -->
Additionally, paste this code immediately after the opening <body> tag:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PSXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
Question C) What are the difference between the first script (already uploaded on the website) and the 2x other scripts (not yet uploaded)?
Question D) Should each page contains all 3x scripts?
Thanks

Question D
It is either the 1st one OR the 2nd and 3rd one. I personally don't use the 3rd one anymore, it is the failsafe for visitors without JS or turned off JS.
If you use both (1st and 2nd one) you might end up with duplicate data.
Question C
The 1st one is Google tag (gtag.js). It is the "basic" or "simple" sibling of GTM.
The other one is Google Tag Manager (GTM). This is a tag management system. Just adding it to your website is not enough. You would need to configure it, i.e. adding adding a GA4 "tag" by yourself to actually start collecting data.
Question B
It does not matter. You don't need to use the same Google account. But if it is just you, it makes things easier if you use the same account. I have access to GTM "container" where I don't have access to the GA4 accounts and vice versa.
Question A
In GA4 you cannot see data for today anymore. Only in the Realtime view. You can use Debug Mode to see your own events in the Debug View. A third option is to link Big Query to your GA4 property, where you can see "traffic" in the intraday table/database.
All data is also subject to Data Freshness.

Related

Is it valid to include multiple Google Tag Manager snippets on the same page?

I am working on a website which already has the following Google Tag Manager snippets:
<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-XXXXXXX');
</script>
// ...
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
The marketing team has started a new campaign and they have asked me to add a new GTM to the website, with a different code: GTM-YYYYYYY
<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-YYYYYYY');
</script>
// ...
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-YYYYYYY" height="0" width="0" style="display:none;visibility:hidden"></iframe>
Is it valid to include those snippets on the same page, twice, with different codes? Or do I need to remove the old ones?
Short answer: Yes, it's valid. Technically, unlike some other TMSes, GTM doesn't conflict with other instances of itself. But if marketing does not know whether you need to keep both or delete one, then they definitely don't know what they're doing.
Longer answer: There may be logical conflicts requiring attention. They will share the same dataLayer, hence there may be unintended triggering. Read this for more.
Final answer: Marketing may have hired a GTM specialist to implement tracking. In that case, it's fine, they will be able to tell you whether they need the old container or not. But since you're asking the question here, the answer is: No. Don't allow marketing deploying random GTM containers. Do they know that GTM can execute arbitrary JS anywhere it's deployed? Do you want to give that power over the site to third parties. Is marketing willing to take all the responsibility for it? Are they even qualified to take the responsibility for functional issues caused by the third-party container loaded?
Since marketing tends to need this kind of third party tracking on your site in cases when third parties are selling traffic and want to see how different kinds of traffic convert, GTM offers more proper ways of doing it. Give the third parties access to your GTM container, but limit their rights to only be able to propose publishing and peer-review anything they want to publish to make sure there's no malicious or incompetent code. GTM people tend to deploy unclosured minified javascript right to your DOM, taking all the sweet short (minified) global names and then conflicting with each other for those global vars, if not with the front-end code-base. Debugging something like this may take weeks. Here's more on GTM users/permissions.

Making Sure DataLayer set up correctly

I'm trying to make sure our developer set up Google Tag Manager (GTM) DataLayers on our website correctly, as I'm having trouble validating.
Here's the situation:
I asked our developer to set up DataLayers on our website's product page using the window.dataLayer.push method. They said they did this.
I set up all the proper Variables in our GTM account to match the datalayer names collected on the website. Then I went into GTM's Preview debug mode to ensure that the Variables were populating on any product page. However, each time I checked this, the Variables came up as "undefined". Hmmm.
My developer said everything looked ok on their end and provided a screenshot of a Google Tag Assistant Chrome extension that indicated product variables were being picked up, and I saw the same thing:
GoogleTagAssistantScreenshotProductPage
I checked the source code for this product page and found this:
<script type="text/javascript">
(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/vznvXB90INUtUFVnU1036xQfL3T6LgDlAYStvsoA/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>
<script>
var toPushToDatalayer = ({"event":"productDetail","ecommerce":{"detail":{"products":[{"name":"Business Basics for Law Students","id":"10040","price":"80.9500","category":null,"magento_id":"36"}]}}}); dataLayer.push(toPushToDatalayer);
</script>
<script type="text/javascript">
//<![CDATA[
var Translator = new Translate([]);
//]]>
</script>
<meta name="msvalidate.01" content="DC61177F62A1EFB53CB064D74B1BB401" />
<meta name="google-site-verification" content="75YqkgTbUbVcW7fqgA9EmUo6lrULtbTDW8urj8TJMo0" />
I'm not a developer and so was concerned that not seeing the term window.dataLayer.push anywhere on the page source code might mean that this method was not used to implement DataLayers on the website. Especially since, although the variables are appearing in the Tag Assistant window, they are still coming up as "undefined" in the GTM Preview Debug window under "Variables" (although they DO appear under "Data Layer" tab), as in screenshot below for the same page:
GTMPreviewDebugScreenshot
So, I guess my question is: If my datalayer variables are populating on my product page (per TagAssistant screenshot and Data Layer tab in GTM Preview Debug screenshot (top half), why are my Variables appearing as undefined under the Variables tab in GTM Preview Debug mode (as in the GTM Preview Debug Screenshot (bottom half))?
Just to cover all my bases, here are a couple of examples of how I set up Variables in Google Tag Manager for these product page variables, in case the problem lies here:
GTMVariableSetUp
Sorry for the long post, I wanted to give all relevant info. Thanks in advance for any help!
I think your issue is with your GTM setup. To access say "name" you actually need to do...
ecommerce.detail.products[0].name
but the above will only give you the first product name since there could be numerous products.
also FYI, you don't need to create datalayer variables for out of the box enhanced ecommerce in GTM.

How to add Adsense in Google Tag Manager

I want to use Google Tag Manager to serve Adsense so I also can use other ads from other sources. I found few answers across the sites but not enough to understand. I would appreciate input here if it is possible to use Adsense code in GTM, if yes how? I also use DFP, if I have to use DFP then how it would be.
I assume you already have Google Tag Manager (GTM) running on your site?
Click on Variables on the left side of the screen within your GTM workspace
Create a new user defined variable and call it asClientID
Configure the variable as a Constant. The value to enter is your AdSense Client ID
Click on Tags on the left side of the screen within your GTM workspace
Create a new Tag called AS - Page view - ALL
Because there is no built-in tag in GTM for AdSense you need to use the Custom HTML tag.
Copy and Paste the HTML code shown below into GTM.
Select the trigger All Page views
Test your changes in preview mode
Once everything is working publish the changes to LIVE.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "{{asClientID}}",
enable_page_level_ads: true
});
</script>
As you can see we are using {{asClientID}} in the script which you have created in step 1 and 2. The reason for creating this variable is flexibility. If you need to change the ID you change it within the variable and not within the code.
NOTE: that it is not best practice to implement AdSense via GTM, but it is possible.
Hopefully this is what you are looking for. Please do let me know if it works for you. :-)

Two different google tag manager accounts in same domain

I have two google tag manager accounts one mine and another of third party website and I need to put these 2 in this third party website.
I tried put two gtm scripts after body tag opening but I saw duplicated content of both accounts.
How can I do this?
It's possible?
This is because both GTM tags are using the default "dataLayer". See below:
<!-- Google Tag Manager -->
<noscript><iframe...
(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
Give one or both custom dataLayer names like so...(documentation):
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script’,'gtm1dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
After that you should see no duplicate events firing from either container.
Updated information:
According to Google official document (https://developers.google.com/tag-manager/devguide?hl=en#multiple-containers)
It suggests:
For the best performance of a page, keep the number of Google Tag Manager containers on the page minimal.
If you use more than one container on a page, implement the container snippets with a common data layer object.
Using more than one data layer can cause some triggers to stop working and could have other implications. So don't rename the data layer for a subset of containers on the page.
You can, if necessary, rename the data layer for all containers on the page.
Avoid implementing a Google Tag Manager container through a custom HTML tag in another Google Tag Manager container
For more details and example refer to this official page link: https://developers.google.com/tag-manager/devguide?hl=en#multiple-containers
There should be no issues with multiple GTM containers on the same page. Unless you have duplicate codes in the containers which are double firing pixels. You can add those containers after the opening body tag.
To check what is firing on the entire page. Download firebug for firefox and add the "omnibug" extension. The omnibug extension should be in the firefox firebug window when you open it.
When you go the omnibug in the firefox panel, you will see EVERYTHING THAT IS FIRING!
If there are duplicate tags firing in the omnibug box, then you can check the details of the event and figure out which specific tag and delete them from the GTM container that you own.
Google tells us that you should not use two tag managers on one site.
Google Support:
Multiple installations of Google Tag Manager detected
We suggest you place only 1 instance of the GTM snippet on a webpage. Multiple GTM snippets don"t work well with each other
Multiple GTM snippets don"t work well with each other because of which the tag added via GTM may not always fire correctly.
Place only 1 instance of the GTM snippet on a webpage
https://support.google.com/tagassistant/answer/3207128?hl=en#multiple_tags
Seems possible to find any answer you like for this. According to tag manager developer guide you can add multiple containers but you should use the same datalayer.
https://developers.google.com/tag-manager/devguide#multiple-containers

google analytics - multiple trackers on one page (traditional and asynchronous)

I'm writing a widget that will be embedded in other people's websites. I'm using Google Analytics to track all the people that visit all instances of my script on the embedding websites. I understand that the new asynchronous tracking code resolves this problem so that there's no interference with those websites' own Google Analytics accounts.
However, what if my analytics tracking code uses the new asynchronous tracker, and the embedding website is using the legacy (traditional) tracking code? Would there be any interference between these two blocks of code?
My tracker code:
<script>
...
_gaq.push(
['myTracker._setAccount', 'UA-XXXXX-2'], // naming the tracker 'myTracker' to be different from any default tracker already defined
['myTracker._trackPageview']
);
...
</script>
Embedding website's code:
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-1");
pageTracker._trackPageview();
} catch(err) {}</script>
Can pageTracker and myTracker co-exist and register analytics information to their own separate accounts?
As far as official advice goes this is not a supported scenario:
http://www.google.com/support/forum/p/Google+Analytics/thread?tid=3490dc16fec867c5&hl=en
And there are pitfalls:
http://www.lunametrics.com/blog/2009/02/26/pitfalls-tracking-multiple-accounts-ga/
When you say embedded in peoples websites if you mean that your widget lives inside an iframe then you dont need to worry.
If the code is going to be loose in the page then you should try to use a different variable name to the default one so it doesn't clash. This means change the var _gaq = ... to something else and then renaming it throughout your code.
http://www.google.com/support/forum/p/Google+Analytics/thread?tid=5c7a6e5751bf5789&hl=en
I'm not entirely clear on your setup but if it is being inserted into many domains you are going to need to set up multiple GA accounts and use different account numbers per user.
If this is for clients that you have access to then you might consider simply adding an extra user to the report so that you can view all the accounts from one central account:
http://www.google.com/support/analytics/bin/answer.py?hl=en_US&answer=55500&utm_id=ad

Resources