How to Install Google Tag Manager (and GA4) in Shopify

Do you want to collect data that explains the behavior of users who visit your Shopify website? 

You can track and analyze all the audience movements by installing Google Tag Manager in your Shopify store. 

In this guide, we’ll learn how to install Google Tag Manager in Shopify and then also configure the new Google Analytics 4 to the system. 

🚨 Note: If you’re new to Google Tag Manager, check out our in-depth Google Tag Manager tutorial and master all the basics.

Here is an overview of what we’ll cover: 

So, let’s start!

How to Add Google Tag Manager in Shopify

You can add Google Tag Manager to Shopify by configuring the snippets of codes extracted from the Google Tag Manager into your Shopify account. 

The first requirement is to have a Google Tag Manager container. We have created one for demo purposes, and it’s empty. 

From there, you need to have access to your Shopify store. This is because you’ll need to open and modify the theme files directly through Shopify. 

Once the theme files are ready, you need to find the appropriate location to install the codes within the Google Tag Manager interface. 

Start by clicking on the button for your GTM  account.

Accessing the GTM codes for adding Tags to the Shopify website from the Google Tag Manager home screen

You’ll find two snippets of codes, “snippet 1” and “snippet 2”, that you can install on the GTM pages. 

Accessing the GTM codes for adding Tags to the Shopify website from the Google Tag Manager

Additionally, you can also find both of these snippets by navigating from Admin → Install Google Tag Manager

Accessing the GTM codes for adding Tags to the Shopify website from the Admin section of Google Tag Manager

Upon clicking on Admin, you’ll find both of the aforementioned snippets of codes, which you will then install in Google Tag Manager. 

Next, you’ll configure the “snippet 1” in the <head> section of the HTML page and “snippet 2” in the <body> section. 

Accessing the GTM codes for adding Tags to the Shopify website from the Google Tag Manager

Open the Admin section of the Shopify backend to install the two snippets. 

Installing Snippets Into Google Tag Manager

Navigate to Online Store → Themes → Actions → Edit Code

Opening the HTML codes of the Shopify website from the admin section of the website

By following these steps, the Edit code option will allow us to install the code. It is important to note that this is a one-time process. 

Navigate to the theme.liquid file within the base HTML code that appears on the screen after you click on Edit code. 

Next, we’ll copy the “snippet 1” and add it to the <head> of the page. The “snippet 1” will be placed directly below the <meta> sections at the top of the code. 

Next, we’ll install “snippet 2” by placing the code in the body of the HTML code. 

Scroll to the portion of the code where the <body> section begins. This code may be situated in slightly different locations depending on the code of each website. 

To make it easier on yourself, search the code for the word body. Once you find it, paste our second snippet exactly under the <body> text within the code. 

Once done, click Save to keep the changes you made to the code. 

Configuring the head code snippet into the HTML code of the Shopify website and saving the final code

Now, we’ll need to implement the code into our theme file. 

Testing Your Installation of Google Tag Manager

Let’s open Workspace in Google Tag Manager. From there, we’ll click on Preview to check our installation. 

Opening the preview section of the current version of the website from the Google Tag Manager

If your Google Tag Manager is comparatively new and you don’t have any Tags or versions already set up, you won’t be able to access the Preview option. 

However, you can create an initial version by clicking on the Submit option. 

Submitting the current version of the website from Google Tag Manager

You can add an initial name to the version and then publish it. 

Publishing an initial version of the website from Google Tag Manager

You’ll now be able to access the Preview mode. This will lead you to Google Tag Assistant. 

Add your website address to the URL section and click on Connect

Connecting the website URL to Google Tag Assistant plugin

If the Connected pop-up message appears on your screen, then you have installed Google Tag Manager correctly. 

Google Tag Assistant connected successfully to the Shopify website

With the Tag Assistant, you’ll see entries denoting the number of recent visits to your website. 

Verifying the Pageview event tracked by Google Tag Assistant

Let’s try to open another page on the website. In another tab, Google Tag Assistant will register new entries for the page we visit next. 

Observing the product page visit tracked by Google Tag Assistant

You can also choose various products and items on your webpage to verify your installation. 

Every time you open a different page, Tag Assistant will track it on its interface. 

At this point, we have successfully installed Google Tag Manager on most of the pages on the Shopify website. 

Next, we’ll also add Google Tag Manager to the Thank You page. 

Installing Google Tag Manager on Thank You Page

Open the backend of the Shopify website and navigate to Settings → Checkout

Accessing the Checkout option from the settings section of the backend of the Shopify website

You should see a section titled Additional scripts. It is located below the section about the status of order processing. The content within the Additional scripts section will appear on the order status page as a confirmation when the user places an order. 

Therefore, this will be the section where we’ll configure our Tag codes for the two snippets. 

We’ll copy and paste “snippet 1” and “snippet 2” in their respective order. Place the copied text into the box below the Additional scripts text. 

Click on Save once you’re done. 

Configuring code snippets in the Additional scripts section of Shopify’s website settings

Let’s see how the code works! 

We’ll open a product on our website, and click on Add to Cart. Then, we’ll also click on View Cart

Adding a product to the cart and viewing the cart on Shopify

Let’s now open the Tag Assistant to see the collected data. 

We can see that the activities relating to the Shopping Cart are being tracked in the Tag Assistant. 

Verifying the shopping cart event tracked by Google Tag Assistant

Let’s go back to the cart page and click on Check Out

This will lead you to the page that requests your contact information and payment details. 

This type of page is restricted to the Google Tag Manager. As such, the Tag Assistant won’t be able to track the movements when it comes to this page. 

You’ll also notice that your Tag Assistant debugger will disappear during this period. 

However, you can utilize the Shopify Plus Store feature if you want to edit the checkout files. You can also use other relevant stores to track this information. But currently, it’s not possible for this specific setup. 

Let’s proceed with our order. Fill in your contact information and payment details to confirm your order. 

Next, you’ll be redirected to the Thank You page. The Tag Manager will connect again. 

Google Tag Assistant connected successfully on the Thank You page of the Shopify website

Additionally, you’ll also see that Tag Assistant has tracked the recent activity of the Thank You page on its interface. 

Observing the Thank You page activity tracked by Google Tag Assistant 

With this setup, we have installed Google Tag Manager on the Shopify website. Google Tag Manager tracks the majority of Shopify pages, except for checkout pages. 

There are multiple ways to configure this setup. You can install the codes differently in your theme files, or you can use a plugin, as well as many other similar methods, to configure the setup. 

However, this is the most successful method we have found so far. 

As the next step, let’s also install the first Tag with Google Tag Manager in Shopify. This Tag is known as the Google Analytics 4 Tag. 

Installing Tags with Google Tag Manager

Open your Google Analytics account to set up the GA4 Tag. 

Add the property’s name and select the appropriate currency. Then, click on Next

Adding the Shopify property on the Google Analytics account

You can fill up the other information, but currently, for demo purposes, we’ll skip that and click on Create.

Creating the Shopify property on the Google Analytics account

As this is a web-based store, we’ll click on the option of Web

Choosing the right web platform to set up a stream to collect data on Google Analytics

We’ll input the URL of our website as our medium is the web. Let’s also add a stream name. 

Furthermore, the option for Enhanced measurements will be active. We’ll keep it as active. 

This is because it will be able to track many movements automatically, including Page views, Scrolls, Outbound clicks, Site search, Video engagement, and File downloads

Once done, let’s click on Create stream

Configuring a data stream to collect data by Google Analytics 4

We’ll be able to view the Web Stream details if the configuration is correct. Copy the Measurement ID code from the details section. 

Accessing the measurement ID from the webstream details of the created Shopify property in the Google Analytics account

Next, we’ll open our Google Tag Manager account. Let’s create a new Tag. 

Choose Google Analytics GA4 Configuration as the Tag type and paste the Measurement ID code that we copied earlier into this space. 

For the trigger, we’ll choose an All Pages trigger. This is because we want to deploy the Tag on all of our website pages. 

Add a name to the Tag and click Save once done. 

Configuring a Google Analytics GA4 Configuration Tag with an All Pages trigger on the Google Tag Manager platform

Let’s see how the Tag works! 

Testing if Google Analytics 4 Is Installed & Firing Correctly

We’ll open the preview section to see how the Tag works. 

It will redirect you to the website page that you have connected to the Tag Assistant. 

Google Tag Assistant connected successfully to the Shopify website

If the configuration is correct, you’ll already be able to see a Pageview event on the Tag Assistant interface. 

Verifying the pageview Tag for the Shopify website fired on the Google Tag Assistant interface

Let’s also see how it works in Google Analytics. 

We’ll open the debug point of view from the home screen of Google Analytics and refresh the page. 

Accessing the debug point of view section from the home screen of the Google Analytics account

This may take some time to load. Meanwhile, you could click on various options directly on your website so that you can produce data that will then populate the screen. 

Once the data loads, we can see that it registers as a page_view event whenever we open a page. 

If you click on the specific event, you’ll also see the data sent over to Google Analytics for that particular event.

Observing the real-time page view event tracked by the Google Analytics 4 version installed on the interface

Let’s also open a web page and scroll to the bottom in order to generate a scroll event. 

We’ll see that the scroll event appears on the interface in real time. 

Observing the real time scroll page event tracked by the Google Analytics 4 version installed on the interface

Moving forward, you’ll be able to use this information in various other reports in terms of Google Analytics as well. 

But before that, don’t forget to submit the current version that you have created. Doing so will make the changes live on your Shopify store and keep them in place in the future. 

Add a Version Name and click on Publish

Publishing a final version of the website from Google Tag Manager

Summary

So, that’s how to install Google Tag Manager and Google Analytics 4 for your Shopify store. 

This is extremely useful when it comes to automatically tracking and analyzing events. This process doesn’t even require us to create multiple Tags or triggers either. It’s very straightforward and simplistic. 

Additionally, if you have multiple websites, you can also choose to facilitate additional tracking on your system by setting up cross-domain tracking with Google Tag Manager

Have you set up form field tracking? Check out our guide and learn how.

Have you used Google Analytics 4 for website tracking yet? What other user movements did you track with this method? Let us know in the comments below! 

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
18 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
1 year 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
1 year 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
1 year 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
1 year 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
1 year 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
1 year 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
1 year 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
1 year ago

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

Nayan
Nayan
1 year ago

how we cam implement GTM tags (Google Tag Manager ) shopify thankyou page

Last edited 1 year ago by Nayan
Millicent Branca
Millicent Branca
11 months ago

I followed this method (the newer method in your 2021 video, which does not implement code within Shopify preferences) and am getting a message in tag manager that states “multiple instances of google tag manager.” Have you seen this before/ do you know how I fix this?

Jake
Jake
7 months ago

Hi Julian, am I understanding correctly that I should not have GA linked with GTM or pageviews will double count?

I am trying to set-up tracking for phone clicks, email clicks, form submissions, etc. on my shopify store, so would need GA connected to GTM for that. Do you have any advice, or can you point me in the right direction?

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.