TrackingAcademyContact

[Shopify Customer Pixel] How to Track Shopify Initiate Checkout Event Using Google Tag Manager and Facebook Pixel

by ShahzadaAliHassan - 24th November 2024
Google Tag Manager
Shopify
Facebook Pixel
Ecommerce Tracking
Initiate Checkout
Data Layer
Meta Pixel

If you're looking to set up the Initiate Checkout event for your Shopify store using Google Tag Manager (GTM), this guide is tailored for you. Over the past few months, I’ve successfully configured this event across more than 40 Shopify stores. This tutorial outlines the process in detail, ensuring you can replicate it seamlessly on your site.

Overview of the Configuration Process

The process involves four main steps:

  1. Setting up data layer events in Shopify.
  2. Configuring the Google Tag Manager container.
  3. Creating variables, triggers, and tags for tracking.
  4. Testing the setup to ensure accurate functionality.

Now, let’s dive into each step.

Step 1: Setting Up Data Layer Events in Shopify

The first step is to configure the customer events in Shopify, which allow us to capture checkout-related data. Here’s how:

  1. Access Customer Events in Shopify:

    • Log in to your Shopify admin panel.
    • Navigate to Settings (found in the bottom-left corner).
    • Scroll down and click on Customer Events.

  2. Add a Custom Pixel:

    • In the Customer Events section, click Add Custom Pixel.
    • For the Meta (Facebook) Initiate Checkout data layer, choose to Add a new pixel.

  3. Set Permissions:

    • Ensure that Permissions are set to "Not Required."
    • Set Data Sale to "Data Does Not Qualify."

  4. Insert the Code:

    • Scroll to the code section and paste the provided code snippet. (You can find the code snippet in the blog linked in this tutorial.)
    • This code will trigger the begin_checkout event and include all the e-commerce details needed.
  1. Add Google Tag Manager Container ID:
    • Copy your Google Tag Manager container ID from your GTM account.
    • Paste the ID in the designated field within Shopify's custom pixel setup.
    • Save the changes.

Step 2: Configuring the Google Tag Manager Container

After configuring Shopify, we need to set up the Google Tag Manager container. This ensures events are tracked and pushed to Meta.

  1. Import the Facebook Pixel Template:

    • Go to the Templates section in your GTM account.
    • Search for the Facebook Pixel Archive Team tag template.
    • Add it to your workspace.

  2. Import the E-Commerce Parameter Generator Template:

    • Download the e-commerce parameter generator template (link available in the blog post).
    • Import the template into GTM by clicking Import, selecting the file, and saving the changes.

With these templates ready, we can move on to creating the necessary variables.

Step 3: Creating Variables, Triggers, and Tags

This step involves creating the building blocks required to capture and send the Initiate Checkout event data.

  1. Create Variables:

    • Facebook Pixel ID:
      • Add a constant variable for the Facebook Pixel ID.
      • Copy the Pixel ID from your Meta Events Manager and paste it into the variable.
      • Name it "Meta Pixel ID" and save the changes.
    • E-Commerce Items Array:
      • Create a data layer variable named "dlv.ecommerce.items."
      • Save this variable for use in generating the e-commerce parameters.
    • E-Commerce Parameter Generator:
      • Use the e-commerce parameter generator template to create a variable.
      • Name it "E-Commerce Parameter Generator for Meta."

  2. Set Up the Trigger:

    • Create a custom event trigger for the begin_checkout event.
    • Name it "Begin Checkout Trigger" and save the changes.

  3. Configure the Tag:

    • Add a new tag to GTM.
    • Use the imported Facebook Pixel template for the tag configuration.
    • Link the following variables:
      • Facebook Pixel ID (Meta Pixel ID variable).
      • E-Commerce Parameters (from the e-commerce parameter generator).
    • Name the tag "Meta Initiate Checkout" and save it.

Step 4: Testing and Verification

Before finalizing the setup, it’s crucial to test and ensure the Initiate Checkout event is firing correctly.

  1. Publish Changes in GTM:

    • Save and publish the changes in your GTM container. Name the version for clarity, such as "Meta Initiate Checkout Tracking."

  2. Test on Shopify Frontend:

    • Add a product to your cart and navigate to the checkout page.
    • Open the browser's developer tools (right-click and select Inspect).
    • Go to the Console tab and check for the begin_checkout data layer event.

  3. Verify with Meta Pixel Helper Extension:

    • Install the Meta Pixel Helper extension in your browser.
    • Visit the checkout page and confirm the "Initiate Checkout" event is firing. Check for parameters like content name, ID, value, and currency.

  4. Confirm in Meta Events Manager:

    • Open the Meta Events Manager and connect your Shopify store.
    • Go to the Test Events tab.
    • Navigate to the checkout page again, and check if the event is displayed with the correct parameters.

Conclusion

Setting up the Initiate Checkout event on Shopify with Google Tag Manager ensures precise tracking of customer actions, helping you optimize ad performance and retarget effectively. With this guide, you now have a clear roadmap to implement this functionality successfully.

For additional insights, such as setting up the View Cart event, explore related tutorials linked in this blog. Happy tracking!