TrackingAcademyContact

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

by ShahzadaAliHassan - 15th November 2023
Facebook Pixel
Shopify
Google Tag Manager
Begin Checkout

Introduction

In this blog, we'll learn how to set up the Facebook Pixel's Initiate Checkout event on a Shopify store using Google Tag Manager (GTM) web containers. The process is divided into five sections for clarity and ease of implementation.

Step 1: Setting Up Google Tag Manager on Shopify

Firstly, we'll set up the GTM container on your Shopify store to track various events:

  1. Access your GTM dashboard.
  2. Note the container ID.
  3. Copy the head and body tracking snippets.
  4. On Shopify, navigate to Online Store -> Themes -> Edit code.
  5. Duplicate your theme file for backup.
  6. Paste the head code under the <head> section and body code under the <body> section of the theme.liquid file.
  7. Save changes and verify the GTM container is live.

Step 2: Configuring Page View Event for Facebook Pixel

Next, we configure the base tag for Facebook Pixel:

  1. Go to Facebook Event Manager and copy your Pixel (now called a Data Source) ID.
  2. In GTM, use the Facebook Pixel tag template for easier setup.
  3. Create a new tag for the Facebook Pixel, setting it to fire on all pages.
  4. Use a constant variable for the Pixel ID for future convenience.
  5. Verify the pixel fires correctly using Pixel Helper.

Step 3: Setting Up Initiate Checkout Script in Shopify

This section is for those who wish to capture more data, like the item_id, item_name, value, quantity, etc., when the "custom_begin_checkout" event is triggered. 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_begin_checkout whenever a user clicks the Begin Checkout button on the Cart page 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-checkout' on all pages.

Checkout DataLayer Code

This code snippet contains the main logic for populating the dataLayer object with product details whenever a Begin Checkout Event is triggered on the Cart page:

  1. Initial Logging: Outputs a message to verify the script is loaded.
  2. Cart Data & Product Details: Retrieves cart data from Shopify and transforms cart items for Google's ecommerce tracking format.
  3. Cart Total Value: Computes the total value of items in the cart.
  4. Begin Checkout Event Listener: Waits for the page to load and then identifies checkout buttons. For each button: Clears previous dataLayer ecommerce data on click and pushes new ecommerce data to the dataLayer for Google Tag Manager tracking.

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.
    • 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 Checkout DataLayer Code:
    • Click "Add a new snippet" depending on your Shopify version.
    • Name it datalayer-checkout.liquid.
    • Insert the "Checkout 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 Cart page on your Shopify store and click Begin Checkout button.
    • Open browser's developer console.
    • Confirm that the custom_begin_checkout event is fired and the dataLayer object contains the correct product details.

The custom prefixes added to event names (like 'custom_begin_checkout') prevent any conflicts with other possible integrations or plugins that might be using standard event names.

Step 4: Finalizing Tags, Triggers, and Variables in GTM

In this step, we create the necessary components in GTM:

  1. Set up a custom event trigger matching the Begin Checkout event.
  2. Create variables for e-commerce data like items, value, and currency.
  3. Implement a Facebook parameter generator variable for detailed event tracking.
  4. Create a new GTM tag for the Initiate Checkout event with the appropriate triggers and variables.

Step 5: Testing and Publishing

Finally, we test and publish our setup:

  1. Use GTM's preview mode to test the tag functionality.
  2. Simulate a checkout on your Shopify store and monitor event firing.
  3. Once verified, publish the GTM container to apply changes live.

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.