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: 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.
    • - Once GTM is set up, you will be taken to your workspace. In the top right, you will see a number that looks like this: GTM-XXXXXX. You'll need the numbers after the dash in step 2.

Step 2: 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 V3.2 - triangle-customer-events.js file into the code box. This file is found in the folder called 'Shopify Customer Events (Version 3.2)'.
    • - Update GTM-XXXXXX with your own GTM ID
  • Save and Connect:
    • - Click Save to save your changes.
    • - Then, click Connect to finalize the integration.

Step 3: 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 the chrome debugger to test your implementation.
    • - 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