google-tag-managergoogle-analytics-4google-tag-manager-server-side

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


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


Solution

  • 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.