How to Install Google Tag Manager on Shopify (Step by Step)

Is your Google Tag Manager installed on Shopify correctly? In this post, we are going to install Google Tag Manager on your Shopify store so you can make use of the tag management system from Google. In this post we’ll show you how it’s done.

Google Tag Manager is a tag management system that can manage all of your tracking codes across your site from a single interface. This tutorial will show you how to place the Google Tag Manager (GTM) snippet on all your site pages of your Shopify store. Unfortunately it’s not longer possible to place the code on the Checkout Pages (unless you are a Shopify Plus store).

If you want to install Google Tag Manager on another site platform? Check out our other guides here:

Install Google Tag Manager Snippet on Shopify Store

All Pages

In order to make sure this all actually works, you first need to check the normal pages without Google Tag Manager. For example, the homepage, product pages, cart and checkout functions should all be working before you try to add any new code. Click around and test these out–if they look good, then you can start adding code.

Access Theme Code Editor

The official Shopify Help Center says you can install Google Tag Manager via the theme code editor. In your back end, you’ll find it under your Online Store: click on Themes, then click on the Actions drop-down button and click Edit HTML/CSS

add-Google-Tag-Manager-GTM-to-Shopify

Add Snippet to Theme.Liquid file

Specifically, you are looking for the theme.liquid file. This is where you will place the snippet.

how-to-add-snippet-to-theme

Open your Google Tag Manager account on a separate tab. You will find the code snippet you want by clicking near the top of your window on the GTM ID.

where-to-find-Google-Tag-Manager-GTM-snippet

This will prompt you with a popup containing the two GTM snippets for you to install in the head section and the body section of the HTML of your Shopify store.

Google-Tag-Manager-GTM-head-and-body-snippet

In your Shopify store, those snippets would go respectively in the head section and in the body section. If you scroll through the theme, you’ll find the head section here:

Shopify-theme-HTML-CSS-head-section

And the body section here:

Shopify-theme-HTML-CSS-body-section

Checkout Pages

WARNING: THIS METHOD NO LONGER WORKS —

Problem: GTM will not be Installed on Checkout Pages for non-Plus users

However, I found a problem when trying to install these snippets here: Google Tag Manager would not be installed on all the pages–namely, the checkout pages were skipped.

Now, the Shopify Help Center says that you should place your code in the checkout.liquid file, but this feature is actually only available to Shopify Plus users. If you are on any other Shopify plan, it’s not possible to access this file.

Solution: Workaround

Copy GTM Body Code Snippet to Body Section of HTML

So I devised a workaround to solve this problem for Shopify users. Start by copying the body snippet, including the noscript portion. Scroll down in your theme.liquid file on Shopify and paste it right after the opening body tag. Make sure you remember to  save your new code!

insert-Google-Tag-Manager-GTM-body-snippet-into-theme
Copy GTM Head Code Snippet to Shopify Preferences

Here is where we’ll do something slightly different. For the head section, you won’t use this integration in the Themes section. Instead, you will actually click over to Preferences

Here, we can enter custom JavaScript that will be added to our Google Analytics code. Click on Add custom JavaScript and enter your Google Tag Manager head code. 

insert-Google-Tag-Manager-GTM-head-snippet-into-theme

You may have already noticed that this box is already surrounded by script tags and that no HTML is allowed. This means that you’ll have to  get rid of the script tags at the beginning and the end of your head code so that you are left with just the JavaScript tag.

remove-script-code-in-Google-Tag-Manager-GTM-head-snippet-1

Make sure you remember to get the script tag at the end, too. When you’ve deleted both tags, click Save to update the script.

remove-script-code-in-Google-Tag-Manager-GTM-head-snippet-2

Top Tip: Don’t Install noscript Tag on Checkout Pages

Now, I must warn you that there is a slight downside to this workaround because you wouldn’t install the noscript tag on the checkout pages this way. Your checkout page will only have the head tag installed. You can check this yourself if you go to the checkout page by right-clicking and clicking on View Page Source.

view-checkout-page-source

Here, you’ll find the head code but not the noscript tag. That noscript tag will be installed on all your other pages, but not your checkout page.

checkout-page-source-head-code-no-noscript-tag

That said, I wouldn’t worry about this too much. The purpose of the noscript tag is for tracking users on browsers that do not have JavaScript enabled. In my experience, that is a very rare case (most of your customers will use browsers with Javascript enabled) so the tracking difference would be very low or negligible.

Testing

Go over to your store and then refresh the page to see your Tag Assistant for Google Chrome now should have Google Tag Manager installed. 

Google-Tag-Manager-GTM-on-Tag-Assistant

Another easy way to see if Google Tag Manager is installed on all the pages is by entering the preview and debug mode.

Shopify-Google-Tag-Manager-GTM-preview

Once you’re in preview mode, refresh the page. If your code is working correctly, you will see that Google Tag Manager is now on this page. 

Google-Tag-Manager-GTM-installed-on-Shopify

To be sure the new script is working across all pages, you should do a quick sweep through your site in preview mode. Check your homepage, product pages, cart view, checkout, and thank-you page. Each time, you should see that the console opens with Google Tag Manager installed.

From here, you can go ahead and add your tags to your Google Tag Manager account. I think it’s wise to set up GTM on your Shopify store for any retargeting, conversion tracking or other marketing tags that you want to deploy. Using Google Tag Manager makes a lot of the tracking much easier to handle.. 

Publish

Once you’re finished, don’t forget to make your changes live! Click Submit to prompt a popup.

submit-changes-to-Shopify

Give your update an appropriate name, then click Publish so that your changes will go live to all your users.

publish-changes-to-Shopify

That’s it! Now you have Google Tag Manager installed on all your pages on Shopify. With this, you can manage all of the marketing tags across your entire site with one integrated tool.

FAQ

Should I install Google Analytics with GTM on Shopify?

I would recommend not installing Google Analytics through Google Tag Manager because Shopify already has a very good direct integration with Google Analytics. You can also use the enhanced eCommerce tracking features native to this integration, which wouldn’t necessarily work if you deployed Google Analytics through Google Tag Manager (you would need to set up very specific data layers for this to work). If you’re you’re really set on installing Google Analytics with Google Tag Manager, however, then check out our guide on setting it up.

GTM-Google-Analytics-eCommerce-on-Shopify

Summary

So there you have it, that’s how you can install Google Tag Manager on every page of your Shopify store. Now that you have Google Tag Manager installed you are all set to install tags for all your marketing tools. To learn how consider enrolling in our free email course Google Tag Manager for Beginners.

Would you like to see more content on Shopify, Google Tag Manager? Let us know in the comments.

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
15 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Juan
Juan
1 year ago

Thank you Julian, but I have a problem I published an HTML tag on the checkout page (path contains /checkouts) and I can’t see any changes. On the /cart page It’s ok everything

Quentin
Quentin
11 months ago

If you implement through the extra JS section of GA, would you also include the noscript in the theme templates files?

Greg Trinidad
Greg Trinidad
11 months ago

Hi Julian, It seems that Shopify is no longer allowing GTM tags in the Additional Script Field. Do you have another work around for that?

Sanjay Kumar
Sanjay Kumar
10 months ago

It shouldn’t, as now Shopify adds the Additional script in an <iframe> in <body> tag and its giving error:
“Refused to load the script ‘https://tagmanager.google.com/debug’ because it violates the following Content Security Policy directive”

Sanjay Kumar
Sanjay Kumar
10 months ago

sorry i pasted the wrong error,
error:
“Uncaught DOMException: Failed to execute ‘postMessage’ on ‘Window’: function(){var la=x&&x.hitCallback;va(la)&&
la();n.vtp_gtmOnSuccess()} could not be cloned.”

Olga Timofeeva
Olga Timofeeva
10 months ago

Hi Julian, great guide! How about cases when Storefront API was used to integrate with Shopify? Half of the flow is build on our server and the checkout is done through Shopify server. I have implemented Marketing tags on our website and also installed same GTM through the Shopify admin. But I’m not able to create any tags to capture anything that is on the end of the Shopify (after the redirect)…

Amnon Gissin
Amnon Gissin
9 months ago

hi Julian first i want to say thank you ! I learned a lot about gtm
i sew that gtm doesn’t work on checkout page what can I do ?

VInce
VInce
7 months ago

Hey Julian, thanks for bringing out a coherent and updated guide out there. So much content on this seems to be trashed, so very glad to have found yours.

We’re on Shopify Plus so we’ll be able to add this in the checkout as well.

I heard that Google Optimize integration is way smoother with Google Tag manager, and doesn’t cause as many issues integrating it without GTM. Do you have any guide how this could be done?

Alexis Bressan
Alexis Bressan
5 months ago

Any update on install google tag manager on checkout ?
Thank you

Blog Categories

Join 30,000+ marketers getting exclusive resources and our latest content!

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.