TrackingAcademyContact

Tracking 'Add to Cart' Event in Shopify Using Google Tag Manager and Facebook Pixel🚀

by ShahzadaAliHassan - 14th November 2023

Facebook Pixel
Shopify
Google Tag Manager
Add to Cart

Introduction

In today's blog, we'll cover tracking the 'Add to Cart' event for Facebook Pixel using Google Tag Manager on your Shopify store. The tutorial is divided into four sections:

  1. Configuring Google Tag Manager Container on Shopify
  2. Configuring Page View Tracking for Facebook Pixel
  3. Adding Add to Cart Script in Shopify
  4. Finalizing Add to Cart Event Tracking in Google Tag Manager

Prerequisites

Section 1: Configuring Google Tag Manager Container on Shopify

  1. Go to your Google Tag Manager account.
  2. Copy the container ID. (Your ID may vary.)
  3. In Shopify, navigate to Online Stores and access the Theme file.
  4. Duplicate the theme file (recommended for major changes).
  5. Edit the code to paste the Google Tag Manager head container code under the theme section.
  6. Return to Google Tag Manager to copy the body code.
  7. Paste the body code right below the Shopify store's body tag.
  8. Preview and verify Google Tag Manager's functionality on your Shopify store.

Section 2: Configuring Page View Tracking for Facebook Pixel

  1. Access Facebook Business Manager.
  2. Navigate to 'All Tools' > 'Event Manager'.
  3. Click on your Facebook Pixel or create a new one.
  4. Instead of using direct code, opt for Facebook Templates provided by the Google Tag Manager community.
  5. Copy your Facebook Pixel ID (Database ID).
  6. Import the Facebook Pixel template in Google Tag Manager.
  7. Create a configuration tag using the Facebook Pixel template and attach it to 'All Pages' trigger.
  8. Verify the tag's functioning via preview mode.

Section 3: Adding Add to Cart Script in Shopify

  1. Add scripts to global pages or directly on product pages.
  2. In Shopify, create two snippets: 'Head Data Layer' and 'Product Data Layer'.
  3. Insert the provided code into these snippets.
  4. Include the 'Head Data Layer' snippet below the Google Tag Manager body snippet.
  5. Verify the Add to Cart event triggers in the data layer.

This section we will see how to capture more data, like the item ID, name, value, quantity, etc., when the "Add to Cart" event is triggered.

Tip:  For this section, some programming knowledge is beneficial. If that's not your strength, you can share our document with your developer.

DataLayer Code Snippets Overview

This section provides code examples for integrating Google Tag Manager's dataLayer object with a Shopify store. Its primary function is to track and send a custom_add_to_cart event when a user clicks the AddToCart button on a product page in Shopify.

Initializing DataLayer in Head Section

This snippet ensures the dataLayer array is set up. It detects if the user is on a 'product' page and, if so, implements a 'datalayer-product' snippet.

Capturing Product Page Details in DataLayer

Here, the code snippet captures essential product information when a product page is accessed:

  1. It identifies the product's current variant.
  2. It constructs an itemObject filled with product specifics.
  3. Upon document loading, it sends this information to the dataLayer object.

Integrating DataLayer with Shopify Theme

This snippet places the head-datalayer code within the Shopify theme. Typically, this should be added to the GTM Body Code section.

Steps for Implementing DataLayer Snippets in Shopify:

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

  2. Navigate to Theme Files: Log in to Shopify Admin, select Online Store > Themes. In your active theme, click "Actions" then "Edit code".

  3. Insert Head DataLayer Snippet: Find theme.liquid in the left menu. Place the "Head DataLayer Code" within the <head> section.

  4. Add Product DataLayer Snippet: Choose "Add a new snippet" (this varies with Shopify version). Name it datalayer-product.liquid and include the "Product DataLayer Code". Save the file.

  5. Place Theme DataLayer Snippet: Decide the location for this code (usually within the <head> in theme.liquid). Insert the "Theme DataLayer Code" there. Save your changes.

  6. Verification: To test, visit a product page on your Shopify store and open the browser's developer console. Ensure that the custom_add_to_cart event triggers and the dataLayer shows accurate product information.

Note: These instructions are based on a standard Shopify configuration. Custom themes may require different methods. Always conduct thorough tests before and after implementing changes.

Section 4: Finalizing Add to Cart Event Tracking

  1. In Google Tag Manager, create a custom event trigger for the Add to Cart event.
  2. Use Facebook Parameter Generator for mapping event parameters.
  3. Create necessary variables for item ID, price, quantity, etc.
  4. Add a data layer variable for 'ecommerce.currency'.
  5. Create the Add to Cart event tag using the Facebook Pixel template.
  6. Configure the tag with event parameters and set it to trigger on the Add to Cart event.
  7. Verify the event firing through preview and Facebook Pixel Event Manager.
  8. Submit the changes to make them live.

Conclusion

By following these steps, you'll effectively track the 'Add to Cart' events in your Shopify store, using Google Tag Manager and Facebook Pixel. This setup helps in detailed analytics and marketing strategies. Remember, always preview your changes before going live to ensure proper tracking and data accuracy.