Search
Close this search box.

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

Last Modified on March 2, 2024

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. 

GTM For Beginners

Sign up to the FREE GTM for Beginners Course...

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

🚨 Note: There’s a new Google Analytics 4 Shopify connector, be sure to check it out!

Here is an overview of how to install Google Tag Manager on Shopify:

  1. Adding Google Tag Manager on Shopify
  2. Installing Snippets Into Google Tag Manager
  3. Testing Your Installation of Google Tag Manager in Shopify
  4. Installing Google Tag Manager on the Thank You Page
  5. Installing Tags with Google Tag Manager
  6. Testing if Google Analytics 4 is Installed & Firing Correctly

So, let’s start!

How to Add Google Tag Manager on 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. 

1. 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

2. 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

3. 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. 

4. Next, you’ll configure “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

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

Installing Snippets Into Google Tag Manager

1. 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. 

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

3. 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. 

Navigating to theme.liquid file in Layout and copying the "snippet 1" and adding it to the <head> of the page

4. 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. 

5. 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 on Shopify

1. Let’s open Workspace in Google Tag Manager.

2. 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.

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

Connecting the website URL to Google Tag Assistant plugin

4. 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

5. 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

6. 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. 

How to Install Google Tag Manager on the Thank You Page

1. 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. 

2. 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. 

3. 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! 

4. We’ll open a product on our website, and click on Add to Cart.

5. Then, we’ll also click on View Cart

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

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

7. 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

8. 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. 

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

10. 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

11. 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 on Shopify. This Tag is known as the Google Analytics 4 Tag. 

Installing Shopify Tag with Google Tag Manager

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

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

Adding the Shopify property on the Google Analytics account

3. 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

4. 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

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

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

7. 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

8. Once done, let’s click on Create stream

Configuring a data stream to collect data by Google Analytics 4

9. 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

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

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

12. 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. 

13. 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 Shopify Tag is Installed & Firing Correctly in Google Analytics

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

2. 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

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