Our Complete Shopify dataLayer and GTM Install

Our Guide to Integrating the dataLayer and Google Tag Manager on Shopify

Note: Before proceeding with this tutorial, check if you are using the Shopify Google app with analytics and/or conversion tracking enabled, or if Google Analytics is implemented through other means, such as a gTag code in your Shopify files. If these are enabled or implemented, disable or remove them from your site to avoid double counting.

Additionally, make sure that the 'Additional Scripts' section in the checkout settings does not contain any code related to the methods discussed in this tutorial (GTM, GA4, or Google Ads conversion tracking). If you have code from other providers in this section, consider consolidating everything into your Google Tag Manager container. This will simplify tag management on your Shopify site and prepare it for the future by leveraging new customer events (pixels).

Step 1: Create Data-Layer Snippet in Shopify

  • Access Shopify Theme Code:
    • - Log in to your Shopify admin.
    • - Navigate to Online Store > Themes.
    • - Click on Actions next to your active theme and select Edit code.
  • Create New Snippet for Data Layer:
    • - In the Shopify theme code editor, find the Snippets directory.
    • - Click on Add a new snippet.
    • - Name the snippet data-layer and click Create snippet.
  • Configure the Data Layer Snippet:
    • - Open your snippet.js file containing the JavaScript code for your data layer.
    • - Copy all the contents of snippet.js.
    • - Paste these contents into the data-layer.liquid snippet you just created.
    • - Save the snippet.
  • Implement Data Layer in Theme:
    • - Go back to the theme.liquid file.
    • - Insert {% render 'data-layer' %}immediately after the <head> tag.

Step 2: Setup Google Tag Manager (GTM)

  • Create a GTM Account:
    • - Visit the Google Tag Manager website.
    • - Sign up and create a new account if you don't already have one.
    • - Set up a new container for your Shopify site, selecting "Web" as the platform.
  • Install GTM:
    • - In your GTM dashboard, go to the 'Admin' tab.
    • - Click on 'Install Google Tag Manager' and find the installation code.
    • - You will be provided two snippets of code. Copy the first, larger snippet, which is typically intended for the <head> tag.
  • Embed GTM Code:
    • - In the theme.liquid file or whichever main layout file your theme uses.
    • - Locate the {% render 'data-layer' %} snippet.
    • - Directly beneath the {% render 'data-layer' %}, paste the GTM code snippet you copied from the GTM dashboard.
    • - Save the changes to integrate GTM with your Shopify site effectively.

Step 3: Add a Custom Pixel

  • Navigate to Customer Events Settings:
    • - In Shopify, go to Settings > Customer Events.
  • Add a Custom Pixel:
    • - Click on Add a Custom Pixel.
    • - Name it whatever you want.
    • - Paste the full contents of the customer-event-shopify-pixel.js file into the code box.
    • - Replace 'GTM_container_id' with your actual container ID. Ensure that it stays within single quotes.
  • Save and Connect:
    • - Click Save to save your changes.
    • - Then, click Connect to finalize the integration.

Step 4: Import and Configure GTM Container

  • Access GTM Container Configuration:
    • - Log into your Google Tag Manager account.
    • - Navigate to the Admin tab of the container you are using for your Shopify site.
  • Import GTM Container File:
    • - Click on Import Container.
    • - Browse to the file named GTM Container - Import This.json, which contains a fully functional GTM setup.
    • - Decide whether to Merge or Overwrite your current setup.
  • Configure GA4 and Google Ads Conversion Tracking:
    • - After importing, review all GA4 tags. Go to variables and change the value of your GA4 Measurement ID to yours.
    • - For Google Ads conversion tracking tags, replace placeholders with your actual conversion ID and label from your Google Ads account.
  • Test and Verify Configurations:
    • - Use GTM’s preview mode to test the tags.
    • - Ensure that enhanced conversions and other tracking functionalities are working as expected.
  • Publish GTM Container:
    • - Once confirmed, publish the container to make all changes live on your Shopify site.

Get Code Files Video Instructions Book Support

Triangle Digital's Customer Success Stories