Optimize Your Shopify Store with Google Tag Manager

Table of Contents

1. Introduction
2. Adding Google Tag Manager to Shopify 2.1 Creating a Google Tag Manager account and container 2.2 Copying the Google Tag Manager container code 2.3 Pasting the container code in Shopify
3. Setting up the data layer in Shopify 3.1 Adding extra code above the Google Tag Manager container 3.2 Modifying the data layer code
4. Adding Google Tag Manager to the order confirmation page 4.1 Navigating to the 'Order Status Page' in Shopify 4.2 Pasting the data layer code in the 'Additional Scripts' section
5. Excluding Shopify as a referral in GA4 5.1 Accessing Google Analytics admin area 5.2 List unwanted referrals
6. Configuring the tag, triggers, and variables in Google Tag Manager 6.1 GA4 configuration tag for page views 6.2 Importing pre-configured container for purchase details 6.3 Configuring tags, triggers, and variables
7. Testing and publishing the changes in Google Tag Manager 7.1 Testing the purchase tag with Tag Assistant 7.2 Verifying the data in Google Analytics 7.3 Publishing the changes in Google Tag Manager
8. Conclusion

Adding Google Tag Manager to Shopify: A Step-by-Step Guide

In this article, we will explore how to add Google Tag Manager to a standard Shopify store and effectively capture transaction details for analysis in Google Analytics 4 (GA4). By following the steps outlined below, you will be able to implement Google Tag Manager and track important data points within your Shopify store.

Introduction

Google Tag Manager is a powerful tool that simplifies the process of tracking and managing various tags, including Google Analytics, within your website. By centralizing your tracking codes and events in one place, you have greater control and flexibility over your website analytics. In this guide, we will focus specifically on adding Google Tag Manager to a Shopify store and optimizing it for GA4.

Adding Google Tag Manager to Shopify

2.1 Creating a Google Tag Manager account and container

Before you can add Google Tag Manager to your Shopify store, you need to create a Google Tag Manager account and container. If you already have an account and container set up, you can skip this step. Otherwise, follow the instructions provided by Benjamin from Loves Data in his Google Tag Manager tutorials for guidance on creating an account and container.

2.2 Copying the Google Tag Manager container code

Once you have a Google Tag Manager account and container, you will need to copy the container code. Benjamin advises against using the noscript tag, as it is rarely used and doesn't provide comprehensive tracking. Instead, he recommends copying the container code without the noscript tag.

2.3 Pasting the container code in Shopify

Now that you have the container code copied, you can proceed to your Shopify store. Go to the "Online Store" section and navigate to "Themes." Select your desired theme and choose "Actions," followed by "Edit Code."

In the theme files, locate the "theme.liquid" file, which is responsible for creating the pages on your Shopify store. Paste the Google Tag Manager container code immediately after the opening head tag. This ensures that the container code is included on all pages of your Shopify store, except for the checkout pages.

Setting up the data layer in Shopify

In order to capture transaction details and send them to GA4, you will need to set up a data layer in Shopify. This involves adding some additional code above the Google Tag Manager container code.

3.1 Adding extra code above the Google Tag Manager container

To set up the data layer, refer to Benjamin's Google Tag Manager Help for the necessary code. Copy the provided code, which establishes the data layer on your website, and paste it above the Google Tag Manager container code in the "theme.liquid" file.

3.2 Modifying the data layer code

The data layer code provided by Benjamin uses Shopify's liquid markup to dynamically add values for each transaction on your website. These values include order number, total price, tax, shopping, currency, and item details. Modify the code to include your container ID from Google Tag Manager.

Adding Google Tag Manager to the order confirmation page

To ensure that transaction details are captured on the order confirmation page, follow the steps below.

4.1 Navigating to the 'Order Status Page' in Shopify

In your Shopify store settings, go to the "Checkout" section and scroll down to find "Order Status Page." This is where you can add tracking code to the order confirmation page.

4.2 Pasting the data layer code in the 'Additional Scripts' section

Remove any existing tracking code, such as the gtag.js code, from the order confirmation page. Then, paste the modified data layer code obtained from Benjamin's blog or description into the "Additional Scripts" section under "Order Status Page" in Shopify.

Excluding Shopify as a referral in GA4

Since Shopify does not allow the inclusion of Google Tag Manager container code in the checkout pages, it's important to exclude Shopify as a referral in GA4 reports. This ensures that these pages do not negatively impact your data.

5.1 Accessing Google Analytics admin area

Navigate to the admin area of your Google Analytics account and select "Data Streams."

5.2 List unwanted referrals

Scroll to the bottom of the page and click on "More Tagging Settings." Then, choose "List Unwanted Referrals" and enter "myshopify.com" as the referral to exclude.

Configuring the tag, triggers, and variables in Google Tag Manager

To complete the setup process and effectively track and analyze data in GA4, you will need to configure the tag, triggers, and variables in Google Tag Manager.

6.1 GA4 configuration tag for page views

Create a GA4 configuration tag in Google Tag Manager to send page views to GA4. Select "Tag Configuration" and choose "GA4 Configuration" as the tag type. Paste your measurement ID obtained from the Google Analytics admin area. Set the triggering to "All Pages."

6.2 Importing pre-configured container for purchase details

You can save time by importing Benjamin's pre-configured container, which includes tags, triggers, and variables specifically for purchase details. Alternatively, you can manually configure the tags, triggers, and variables using the details provided in Benjamin's blog.

6.3 Configuring tags, triggers, and variables

If you choose to import the pre-configured container, simply navigate to the "Tags" section in Google Tag Manager, select "Admin," and then "Import Container." Follow the prompts to select the file and merge it with your existing setup. This will import tags for purchases and add to cart events, as well as triggers and variables.

Testing and publishing the changes in Google Tag Manager

Before finalizing your setup, it's important to test and verify that the tags are firing correctly and data is being captured.

7.1 Testing the purchase tag with Tag Assistant

Use the Tag Assistant chrome extension to test the purchase tag. Enter your Shopify store URL, add a product to the cart, proceed to checkout, and complete the purchase. Check the Tag Assistant for the firing of the purchase event and ensure that the relevant details are being captured.

7.2 Verifying the data in Google Analytics

Navigate to Google Analytics and access the "DebugView" under "Configure" to verify that the purchase event has come through. Review the details to ensure accurate data capture.

7.3 Publishing the changes in Google Tag Manager

Once you have tested and confirmed that the tags are working correctly, publish the changes in Google Tag Manager. This will make the necessary configurations and additions live on your Shopify store.

Conclusion

By following the step-by-step guide outlined above, you can successfully add Google Tag Manager to your Shopify store and leverage its capabilities to track and analyze transaction details in GA4. Remember to thoroughly test and verify the setup before publishing the changes, and consider the limitations of tracking on Shopify checkout pages.