Adding Google Tag Manager to a Shopify Store

Last Updated / Reviewed: Jan 10th, 2023

Execution Time: ~5-10 minutes

Goal: To add Google Tag Manager to a Shopify store.

Ideal Outcome: Google Tag Manager is properly installed without any technical issues.

Prerequisites or requirements: You need to have Google Analytics on your store. If you haven’t done it yet, you can follow SOP067 - How to add Google Analytics to a Shopify Store.

Why this is important: Google Tag Manager is a great tool to add and manage multiple pixels and tracking codes without needing to edit the code of a site.

Note: If you want to add Google Analytics to a Shopify store, do not do it through Google Tag Manager but follow SOP 067 - How to add Google Analytics to a Shopify Store instead. However, Google Tag Manager is still the most recommended way to deploy other scripts to your Shopify site.

Where this is done: In your Shopify admin panel and Google Tag Manager.

When this is done: Only once—the first time you install Google Tag Manager.

Who does this: The person responsible for website management or analytics.

Environment Setup

1. Download and install the Google Tag Assistant Chrome Extension (Free)

‌

Grab your Google Tag Manager container code

A. If you don’t have a Google Tag Manager account yet:

1. Sign up for Google Tag Manager (Free):
   1. You’ll need to log in to your Google account.
   2. You’ll be prompted to set up a Google Tag Manager account right away.
      • You can just use your company/website name for both the account and container.
      • Under “Where to Use Container”, select “Web”
        
   3. Accept the terms and conditions.
   4. You will see your Google Tag Manager code.
      1. Copy the code without the <script></script> tags, you will need it for the next chapter.
         
      2. Below that you will find another piece of code copy the whole code including the <noscript> tags, you will also need it for the next chapter.
   5. Once you are in your Workspace, click on Submit > Publish > Continue to publish your Google Tag Manager container:

‌

B. If you already have a Google Tag Manager account:

1. Log into your Google Tag Manager account;
2. On the top header click “Admin” → “Install Google Tag Manager
   
3. Copy the code between the <script></script> tags (do not copy those tags). You will need it in the next chapter.
   Important: pay attention to the section of the code being copied. You’ll need to exclude the “<script>” and “</script>” tags to follow this process.
   
4. Below the first snippet of code, you will have a second one, this time copy all the code (including the <noscript> tags. You will also need it for the next chapter.

Adding Google Tag Manager to your Shopify Store

Note: This method allows you to add Google Tag Manager to your whole website in contrast to the official documentation that would only allow you to add GTM to the non-checkout pages unless you are a Shopify Plus customer.

If you are a Shopify Plus customer, follow the official documentation laid out here.

1. Log into your Shopify store.
2. On the sidebar, under “Online Store” click “Preferences”.
   
3. Click “Add custom JavaScript to Google Analytics.

4. Paste the section of code you got from the previous chapter. Step 3 “Copy the code between“.
   

    

   
   Paste the section of code you got from the previous chapter. Step 3 “Copy the code between“.
   
   

    

    

    

5. Click “Save”
   
6. On the sidebar, under “Online Store” click “Themes”:
   
7. Click “Actions” → “Edit Code”
   
8. On the search bar, search for “theme.liquid” → Click “theme.liquid”
   

9. Locate a section of the code that starts with “<body” you can either scroll down until you find it or you can just use your browser’s search feature (typically Ctrl+F for PC, and ⌘+F for Mac) → Paste the second snippet of code that you got from Google Tag Manager (the one that contains the <noscript> tag from previous chapter part B, Step #4) in there:
   

    

   Example:
   

    

10. Click “Save” in the top right corner:

‌

QA-ing your installation

1. Open your website homepage using Chrome.
2. Click on the Google Tag Assistant Chrome Extension
   
3. Click on “Enable”
   
4. Refresh the page and click on the Google Tag Assistant Chrome Extension again
5. You should see a green tag for Google Tag Manager, indicating that the installation was successful.