TrackingAcademy.comContact

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

by ShahzadaAliHassan - 11th December 2023

Google Ads
Shopify
Google Ads Remarketing Tracking
Google Tag Manager
Add To Cart

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.