How to Enable Google Tag Manager in Shopify
I get lots of questions on how to add events in Shopify. It is tough to do that without using Google Tag Manager(GTM). However, there is no space in Shopify preferences to add the GTM code. So one is stymied.
Not quite. There is a sneakier way to still do this. So let’s give it a shot.
Step 1
First, add the UA-XXXXXXXX code that you get from Google Analytics into the box marked in Shopify as seen in the picture below.
To get to this page, you need to click on “Online Store” on the left Menu and then click “Preferences”.
Step 2
Now, go and build a GTM container. An excellent video to show you how.
Now that you are done deploying Google Tag Manager, put a couple of events together in the container besides page view tracking.
Step 3
Let’s choose scroll tracking and outbound click tracking because they can apply to pretty much every website.
For Scroll Tracking, again an excellent video by LovesData will guide you.
Now, try and put together an event for tracking outbound links. We will use another great video by Whole Whale on YouTube.
Step 4
Now that you have configured both events, go ahead and pause the tag for page view tracking. Let me show you how to do that.
Step 5
Now that all these steps are done, copy the code for the header from GTM. It will look like this
<!– 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-XXXXXXX’);</script>
<!– End Google Tag Manager –>
Step 6
Let’s go back to the Shopify interface and add the GTM code above into the yellow area shown in the image below
Click Save in the top right corner(not shown in the picture).
This is going to make sure that all the events that are added can be fired through Google Tag Manager. The page view collection will be done by the Shopify integrated Google Analytics code. In case you are not able to add the GTM code and get an error that says, “Analytics extras is disabled for the moment. Contact support to enable editing of this field”, you do not have admin permissions. Either get them assigned to you or ask the admin to put in this code for you.
Step 7
There is just one more thing, add a product in your shopping cart and go to the “/cart” page. You will notice that GTM does not show up at all. This is a bit of a doozy and has to do with the interaction between GTM and Shopify. To get over this, you will have to take the footer code in GTM, given below:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-NHJDFPQ”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
..and add it to the start of the <body> tag in theme. liquid file. You can place it at the end of the body tag too. This will enable GTM code on the checkout page. Please save the theme.liquid file and please re-load the website to make sure nothing is broken. Of necessity, you are doing this in production( small shops don’t have a staging Shopify environment), so it pays to be extra careful.
What happens if the site breaks?
Don’t panic! Just revert to the earlier theme.liquid file and make sure that your copy-paste job has the correct code. Re-input the code within the body tag; save again and check again. If it doesn’t work again, revert to previously working code and notify your programmer. They will help you fix this issue.
This is a hack and you should not assume that it will work in your account. Please test and make sure that only one pageview tracker is firing. A surefire way to know that two trackers are firing is to observe bounce rates in Google Analytics. They will immediately go to zero.
I hope this works for you. Do let me know if you have any questions.
Tracking Google Analytics Events in Squarespace
The education of an Analyst
A Paradigm for Business Intelligence Evolution
About Author
mammalsrus
2 Comments
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Hi, I am still not able to get the GTM on the checkout page. To start with, i have a basic shopify account. I added the async GTM code to the liquid file but still cannot view the GTM tag in t[preview mode.
Hello there,
We would need some more detail to debug this issue. Why don’t we connect offline and I will help you set this up correctly.