David Vallejo
ANALYTICS

How to track AMP / GA4 Pages using Google Tag Manager

David Vallejo •
Share

Hi, tomorrow 1st of July is the day when Universal Analytics is being sunsetted for all free account users, 360 accounts will enjoy of an extra year for dealing with the full migration .

On 26th June, Google luckily announced the official Google Analytics 4 support for AMP pages. Which makes me really happy since in some time from now I won't need to worried to keep my solution and CDN servers online, (sorry it feels like a lot of responsability to keep something for almost 1B unique users and +3B monthly hits, and also there will be some more money in my pocket )

I've been following the coments on social networks and forums, and it seems there's a lot of people that were waiting for some AMP/GTM support. But as now 24h to the deadline, there's no a template for GTM AMP containers.

I worked on this the past summer, but I didn't publish it since not having a template on GTM wasn't making much sense, in any case, I feel this may end help some people (or not...). But I'm showing you how you can do the GA4 tracking on AMP using GTM.

First of all we need to modify our main <amp-analytics> tag to include the type="googleanalytics" , this is needed for having access to the session information variables.

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-THYNGSTER&gtm.url=SOURCE_URL" data-credentials="include" type="googleanalytics">
</amp-analytics>


Oki doki, we have the first step, now, current GTM containers for AMP doesn't have the predefined variables to build a proper Google Analytics 4 hit, for example it's missing the session_id, session_count, client_hits, and some other details. And here's were we're going to make use of the current AMP variables to accordingly calculate this information so we can later or using it in our hits. For this we need to add some vars to our Google Tag Manager configuration, I took care of building everything you, so you just need to copy and paste. ( just change the GTM container ID )

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-THYNGSTER&gtm.url=SOURCE_URL" data-credentials="include" type="googleanalytics">
    <script type="application/json">
        {
            "vars": {
            "sid": "$CALC(SESSION_TIMESTAMP, 1000, divide, true)",
	        "sct": "SESSION_COUNT",
        	"seg": "$IF($EQUALS(SESSION_ENGAGED, true),1,0)",
	        "_et": "$CALC(INCREMENTAL_ENGAGED_TIME,1000, multiply)",
	        "gcs": "$IF($EQUALS(${GOOGLE_CONSENT_ENABLED},TRUE),G10$IF($EQUALS(CONSENT_STATE,sufficient),1,0),)",
        	"uaa": "${uach(architecture)}",
	        "uab": "${uach(bitness)}",
        	"uafvl": "${uach(fullVersionList)}",
	        "uamb": "$IF($EQUALS($DEFAULT(${uach(mobile)}, EMPTY), EMPTY),,$IF($EQUALS(${uach(mobile)}, false),0,1))",
        	"uam": "${uach(model)}",
	        "uap": "${uach(platform)}",
        	"uapv": "${uach(platformVersion)}",
	        "uaw": "$IF($EQUALS($DEFAULT(${uach(wow64)}, EMPTY), EMPTY),,$IF($EQUALS(${uach(wow64)}, false),0,1))",
            "is_first_visit": "$IF($EQUALS($CALC(SESSION_COUNT, $CALC($CALC(${timestamp}, 1000, divide, true),$CALC(SESSION_TIMESTAMP, 1000, divide, true), subtract), add),1), _fv, __nfv)",
            "is_session_start": "$IF($EQUALS($CALC($CALC(${timestamp}, 1000, divide, true),$CALC(SESSION_TIMESTAMP, 1000, divide, true), subtract),0), _ss, __nss)"
            }
        }
    </script>
</amp-analytics>


How are we going for now?, easy, isn't it?. At this point, we have all the necessary data points to properly build a Google Analytics 4 hit payload.

Now we just need to create some Custom Image tags in GTM for our page_views and events . Just to keep making your life easy, I'm attaching the full main payload you should be using in ALL of our hits. Yuu need to take this and then add your custom details based on the data you want to sent to GA4.

This is the core custom payload you need to use:

https://region1.google-analytics.com/g/collect?v=2&tid=G-THYNGSTER&ds=GTM-AMP&_p=${pageViewId}&cid=${clientId}&ul=${browserLanguage}&sr=${screenWidth}x${screenHeight}&_s=${requestCount}&sid=${sid}&sct=${sct}&seg=${seg}&dl=${sourceUrl}&dr=${documentReferrer}&dt=${title}&uua=${uaa}&uab=${uab}&uua=${uaa}&uafvl=${uafvl}&uamb=${uamb}&uam=${uam}&uap=${uap}&uapv=${uapv}&uaw=${uaw}&${is_session_start}=1&${is_first_visit}=1

Now you only need to add the data related to the event, if you just want to fire a page_view, add the folloowing to the end

&en=page_view
or for a custom event name
&en=outgoing_link

If you want to add event parameters you need it this way:

&ep.page_type=homepage // if it's an string
&epn.page_load_time=122 // if it's a number, note the epN

If you need to add user properties, it will work this way

&up.user_name=thyngster // if it's an string
&upn.life_time_value=234 // if it's a number, note the epN

Just in case someone got lost, the page_view hit looks like this:

https://region1.google-analytics.com/g/collect?v=2&tid=G-THYNGSTER&ds=GTM-AMP&_p=${pageViewId}&cid=${clientId}&ul=${browserLanguage}&sr=${screenWidth}x${screenHeight}&_s=${requestCount}&sid=${sid}&sct=${sct}&seg=${seg}&dl=${sourceUrl}&dr=${documentReferrer}&dt=${title}&uua=${uaa}&uab=${uab}&uua=${uaa}&uafvl=${uafvl}&uamb=${uamb}&uam=${uam}&uap=${uap}&uapv=${uapv}&uaw=${uaw}&${is_session_start}=1&${is_first_visit}=1&en=page_view

At this point i still advice you to update your setup to GTAG tag type on AMP, since it's not clear at this point if GTM for AMP will be supported in the future, hopefully there will be some announements about this at some point.

Hope this helps someone in the last minute.