TrackingAcademyContact

A Comprehensive Guide on Adding Products to Cart and Tracking Conversions with Google Ads and Shopify

by ShahzadaAliHassan - 5th January 2024
Google Ads
Shopify
Google Ads Conversion 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: Enhancing Shopify with Add To Cart Data Layer Integration for Google Tag Manager

The provided code snippets aim to integrate the dataLayer object for Google Tag Manager (GTM) with a Shopify store. The main goal is to send an event called custom_add_to_cart whenever a user visits a product page and clicks on the AddToCart button on Shopify.

Head DataLayer Code

This code initializes the dataLayer array if it hasn't been already. It then checks if the current page template is a 'product' page and renders a specific snippet called 'datalayer-product'.

Product DataLayer Code

This code snippet contains the main logic for populating the dataLayer object with product details whenever a product page is viewed:

  1. It first captures the current variant of the product.
  2. It constructs an itemObject containing various product details.
  3. On document load, it pushes this data to the dataLayer object.

Theme DataLayer Code

This code renders the head-datalayer snippet. Depending on the setup of your Shopify theme, this is likely where the head datalayer code resides. Add this code GTM Body Code.

Steps to Add the DataLayer Code Snippets in Shopify:

  1. Backup: Before making any changes, always backup your current theme.

  2. Access Theme Files: Login to your Shopify Admin. Then, go to Online Store > Themes. Click on the "Actions" dropdown for your live theme and select "Edit code".

  3. Add Head DataLayer Code: In the left sidebar, locate and click on theme.liquid. Insert the "Head DataLayer Code" snippet within the <head> tags.

  4. Add Product DataLayer Code: Click "Add a new snippet" depending on your Shopify version. Name it datalayer-product.liquid. Insert the "Product DataLayer Code" snippet into this new file. Save changes.

  5. Add Theme DataLayer Code: Determine where you want this code to render (usually within the <head> tags in theme.liquid). Insert the "Theme DataLayer Code" snippet in the desired location. Save changes.

  6. Test: Visit a product page on your Shopify store. Open browser's developer console. Confirm that the custom_add_to_cart event is fired and the dataLayer object contains the correct product details.

Remember, these instructions assume a typical Shopify setup. Some custom themes might require a different approach. Always test thoroughly before and after making changes.