Google Ads Remarketing Tracking: Shopify AddToCart Tracking with GTM and DataLayer

by ShahzadaAliHassan - 11th December 2023

Section 1: Setting Up Google Tag Manager on Shopify

To begin tracking, the first step is integrating Google Tag Manager with your Shopify store:

  1. Access GTM Account: Log into your GTM account and note your container ID.
  2. Implement GTM Snippets:
    • Go to your Shopify admin, navigate to Online Store > Themes.
    • In the theme editor, find the <head> and <body> tags.
    • Insert the GTM head snippet below the opening <head> tag and the body snippet immediately after the opening <body> tag.
  3. Verify the Integration:
    • Use GTM's 'Preview' mode to confirm that the container is firing correctly across all Shopify pages.

Section 2: Implementing 'Add To Cart' Tracking in Shopify Using Google Tag Manager's Data Layer

This section is dedicated to integrating Google Tag Manager's dataLayer with a Shopify store to track the custom_add_to_cart event. This event is triggered each time a user accesses a product page and clicks the AddToCart button.

Initial Setup of DataLayer in the Head Section

This part involves setting up the dataLayer array. If it isn't already in place, the code will initialize it. Specifically, it checks if the page is a product page and, if so, implements a 'datalayer-product' snippet.

Embedding Product Details in DataLayer

Here, the code captures essential data when a product page is loaded:

  1. It identifies the product's current variant.
  2. An itemObject is created, holding key product information.
  3. Upon the page's full load, this information is pushed to the dataLayer.

Inserting DataLayer Code into the Theme

This section of code links the head-datalayer snippet to your Shopify theme. This is generally where the head datalayer code is placed. It should be added to the GTM Body Code.

Steps for Integrating DataLayer Code Snippets into Shopify:

  1. Backup First: Always create a backup of your current theme before any modifications.

  2. Access Theme Files: Log into your Shopify Admin, navigate to Online Store > Themes. Under your live theme, click the "Actions" dropdown and choose "Edit code".

  3. Insert Head DataLayer Code: Find theme.liquid in the left sidebar and add the "Head DataLayer Code" snippet within the <head> section.

  4. Place Product DataLayer Code: Select "Add a new snippet" as per your Shopify version. Name it datalayer-product.liquid. Input the "Product DataLayer Code" snippet into this file and save.

  5. Apply Theme DataLayer Code: Decide the placement (usually within the <head> of theme.liquid). Add the "Theme DataLayer Code" snippet accordingly and save your changes.

  6. Verification: To test, visit a product page on your Shopify store and open the developer console in your browser. Check that the custom_add_to_cart event triggers and that the dataLayer reflects accurate product details.

Note: These steps are based on a standard Shopify configuration. Custom themes may require a different approach. Always conduct thorough tests before and after applying these changes.

Other Related Blogs

A Comprehensive Guide on Begin Checkout Remarketing Tracking on Google Ads and Shopify

In this guide, we explore the process of setting up a remarketing tag for the 'begin_checkout' event in Google Ads, using a data layer script on your Shopify store. We'll walk through creating a conversion action in Google Ads and configuring the remarketing conversion tag in your Google Tag Manager container. Before we start, ensure that your Google Tag Manager container is correctly firing on all pages of your Shopify store.

Shopify, Facebook Pixel & Google Tag Manager Setup for View Content! 🚀

Learn how to configure the 'View Content' event for Facebook Pixel on a Shopify store using Google Tag Manager, a key step for accurate e-commerce tracking and marketing analytics.

Setting Up Facebook Pixel's Initiate Checkout Event on Shopify with Google Tag Manager.

This setup will allow you to effectively track the Initiate Checkout event on your Shopify store via Facebook Pixel, providing valuable insights into your customers' shopping behaviors. For detailed scripts and more information, refer to the video description.

A Comprehensive Guide on Begin Checkout Conversion Tracking on Google Ads and Shopify

Google Ads Dynamic Marketing stands out for its ability to utilize e-commerce event data, such as item details, IDs, and names, to create targeted and efficient marketing strategies. By the end of this guide, you'll understand how to set up these conversion tags and send dynamic parameters back to Google Ads.