How to use Google Tag Manager with AMP on Shopify
Google Tag Manager (GTM) is a valuable tool that helps website owners consolidate their multiple tracking services into one, and gives a user one simple dashboard for all their analytics scripts.
In today’s analytics driven e-commerce industry, a single website may use multiple tracking services for things like Google Analytics, Facebook Pixel, Instagram, and other third-party analytics providers. Since these are all separate services, they all require a website owner to install a different JavaScript tracking code on their website.
What Google Tag Manager solves
GTM is certainly not necessary or required for everyone who wants to add analytics to their site, but it is generally useful for websites with multiple analytics accounts or websites with advanced event tracking. These are the 3 key issues that GTM intends to solve:
1) GTM reduces the number of individual Javascript <script> tags loaded on a website, which improves overall page speed and performance.
2) GTM gives the webmaster easier access to add/remove/update analytics scripts as necessary, all under one consolidated dashboard.
3) GTM makes it easy to create events for advanced event tracking such as creating a Google Analytics custom event that tracks a click on some certain specified HTML element.
Real-world examples of what Google Tag Manager can do
Consolidate Tags for speed and SEO
Mary owns an ecommerce business and she has noticed that some Page Speed Insights services recommend that she reduce the number of `<script>` tags on her page in order to make things load faster. She also notices that a number of these `<script>` tags are due to analytics code that she has been requested to add to her site in order to track user data. Mary can use GTM to combine all of these `<script>` tags into one, thereby improving her page speed and ultimately her SEO.
Provide an easy to manage dashboard
John owns a T-shirt business and has hired a development agency to build his website. John is using multiple analytics tools. He notices that every time he has to add/remove/update an analytics script/pixel, he has to consult his developer, which adds friction to the process of acquiring the data he needs. John can have his developer install only one `<script>` tag — his GTM script, and then John can manage his analytics scripts and events himself, straight from the GTM dashboard, without needing to go through his development team, and without needing any knowledge of HTML.
Should I use Google Tag Manager on AMP or should I use Standard Google Analytics?
We recommend using GTM when you require customized analytics events from third-party providers that you are already using on your non-AMP pages. For example, if you require customized dynamic remarketing tags, or other tags that you already use GTM for. If you don’t need any other custom analytics set-up, if you aren’t sure about your analytics set-up, or if you aren’t versed in what Google Tag Manager actually is, then we recommend sticking with standard GA on AMP for Shopify. This is because our default Google Analytics setup tracks several e-commerce events automatically, and requires nothing other than to enter your Google Analytics Property ID in the AMP app configuration. I want to stress this a second time: If you are using GTM, you are required to create your own analytics events from within GTM. We will go over this slightly, but if you are unsure of why this is the case, or if you have never done this before, we do recommend sticking to standard Google Analytics.
If you’re NOT using GTM, AMP will track the following by default
- Page view
- Add to Cart click
- Search
- Link to full site click
When using standard Google Analytics, AMP by Shop Sheriff provides these events automatically, logging key metrics where you need it most — right in your Google Analytics dashboard.
As we mentioned, some users want more granular control of their analytics events, or they want specific third-party integrations. For them, we recommend GTM.
If you’re using GTM, you need to create your own events
It is not possible for AMP to automatically create events in Google Tag Manager for you. Therefore, if you are using Google Tag Manager, you need to create your own events. This will require you to understand how to create events in Google Tag Manager and therefore it can be a rather advanced undertaking.
How To Add Google Tag Manager To AMP Pages using AMP by Shop Sheriff
Adding Google Tag Manager is super simple. We will be creating what is called an “AMP Container” by using the GTM dashboard. An AMP Container is just a “container” for which your AMP analytics configuration will go. Once you create this container, you’ll add the GTM script to the AMP app, and then you’ll create some analytics events using GTM.
Setup Outline
1) Create an AMP container in GTM
2) Copy the AMP container ID into the AMP app
3) Create your desired analytics events within GTM
4) Create an event in your GTM AMP container
5) Verify that your events are working properly
1) Create the AMP Container in GTM
- Navigate to your GTM dashboard and click on “Create Container”
- During the container creation, give your container a unique name, select the “AMP” container, and click “Create”.
2) Copy the AMP Container ID
- Immediately after creating your AMP container, you will be presented with a popup. Within this popup, note the <body> code. You will see an AMP container ID in there. In this example it is “GTM-WBRC6RN”. For you it will be different.
- You do not need to copy the <head> code — AMP by Shop Sheriff does this automatically for you.
3) Paste the code provided into the AMP app
Navigate to the AMP app. Head to Settings and input your Google Tag Manager AMP Contianer ID into the section that asks for this GTM ID.
At this point, you’re properly set up with GTM on AMP for Shopify. What you don’t have, yet, are any analytics events that will be firing. This is because when using GTM, the AMP app cannot send any events unless you explicitly create them yourself. You will need to create your own events, so let’s start by creating a page view.
4) Create a Page View event within your AMP Container
When using Google Tag Manager, it is your responsibility to create triggers for every event that you want to log. In this case, you want to track every page view, so create an event for it.
To create a new page view trigger, go into your AMP Container within Google Tag Manager, and then:
- Click Triggers > New
- Click Trigger Configuration and choose a page view trigger type.
- Save the trigger and publish. (make sure you successfully publish your container!)
More information on creating a page view trigger in Google Tag Manager can be found here.
5) Validate that GTM is working on your AMP pages
You can test that Google Tag Manager is working by now navigating to one of your AMP pages, and heading over to Google Analytics to see if you have a new active user on your site. To do this, you can click on the “Real time” tab in Google Analytics, which will accurately display the traffic to your site down to the last minute. Note for those who might be using the Google Tag Assistant chrome plugin: this plugin does not work for AMP pages. Do not rely on this plugin for your validation process.
Step-by-step process to validating that GTM is working
- Navigate to your Google Analytics account dashboard
- Click on “Real time”
- Visit any AMP page
- Your visitors count should now increase by 1
That’s it! You’re all set up with Google Tag Manager and AMP. Enjoy!
Final Thoughts
Google Tag Manager is generally useful for advanced analytics control. At Shop Sheriff, we notice that a lot of Shopify Plus merchants use Google Tag Manager to easily manage custom event tracking for their e-commerce website. If you’re unsure of how to use Google Tag Manager after reading this blog, we recommend some video tutorials that might help break the ice a little bit. All in all, our standard Google Analytics event tracking will work for the vast majority of users, so don’t feel like you’re missing out of anything by just using the standard setup.
Cheers!
Team Shop Sheriff
