TrackingAcademyContact

Complete Guide to Facebook Pixel Purchase Event Setup on Shopify Using Google Tag Manager

by ShahzadaAliHassan - 16th November 2023

Facebook Pixel
Shopify
Google Tag Manager
Purchase

Introduction

In this comprehensive guide, we'll explore how to configure the purchase event on Facebook Pixel using Google Tag Manager (GTM) for your Shopify store. This setup is crucial for tracking conversions and ensuring accurate attribution in Facebook Ads. The process is divided into five distinct sections:

  1. Setting up GTM container on Shopify.
  2. Configuring the Facebook configuration tag for tracking.
  3. Adding tracking scripts for purchase events.
  4. Setting up GTM to track these scripts.
  5. Testing and finalizing the setup.

Prerequisites

Section 1: Setting Up GTM on Shopify

Step-by-Step Instructions:

  1. Access GTM for Tracking Scripts: Navigate to the GTM overview page, find your GTM container ID, and access head and body container codes.
  2. Copy Head Code: Begin by copying the head container code.
  3. Shopify Store Setup:
    • Go to 'Online Stores' in your Shopify dashboard.
    • Ensure you have the necessary permissions to edit themes.
    • Duplicate the theme for backup.
    • Find and edit the theme.liquid file.
    • Insert the head container code below the <head> section.
  4. Add Body Snippet: Copy the body snippet from GTM and insert it into your Shopify store's theme layout, typically around line 255.
  5. Verify Tracking: Use the GTM preview and debugging tools to ensure events are firing correctly on your site.

Final Thank You Page Tracking:

Section 2: Configuring Facebook Pixel Tag

  1. Access Facebook Business Manager: Go to 'Event Manager' in your Facebook business account.
  2. Copy Pixel ID: Obtain your Facebook Pixel (now called 'database') ID.
  3. Set Up in GTM:
    • Use the Facebook-provided template in GTM's template library.
    • Create a constant variable for the Facebook Pixel ID for ease of use.
    • Configure the Facebook Pixel tag to fire on all pages, ensuring page view tracking and user session data capture.

Section 3: DataLayer code for Purchase Events

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_purchase whenever a user visits the final /thank-you/ page on Shopify after making the payment.

Order Status DataLayer Code

  1. This script, embedded within a Shopify platform, serves to track purchase-related data for analytics purposes.
  2. When a user accesses a site for the first time (first_time_accessed), the script checks if the user is a registered customer. If so, it fetches the user's order count and total spend.
  3. The script then initializes the dataLayer object if it doesn't already exist and populates it with purchase details like transaction ID, total value, shipping, tax, currency, and details of items in the order.
  4. These details include individual product attributes such as the product's ID, SKU, name, price, brand, variant, quantity, and other related info.

Steps to Add the DataLayer Code Snippets in Shopify:

  1. Log into Your Shopify Admin Panel:

    • Visit your Shopify store's URL followed by /admin.
    • Enter your login credentials to access the admin panel.

  2. Access Checkout Settings:

    • On the left-hand side menu, click on Settings.
    • From the dropdown, select Checkout.

  3. Locate the Additional Scripts Section:

    • Scroll down until you find the Order processing section.
    • Within this section, you'll see a text box labeled Additional Scripts. This is where you can add scripts that will run on the order status page after a customer completes their purchase.

  4. Paste Your Script:

    • Copy the script you have.
    • Paste it into the Additional Scripts text box.

  5. Save Changes:

    • After you've pasted your script, scroll to the bottom of the page and click on the Save button.

  6. Test the Script (Important):

    • After saving, make a test purchase to ensure that the script runs as expected on the order status page.
    • Check if all data is being collected and pushed to the dataLayer as intended by your script.

Note: The Additional Scripts section in the Checkout settings allows you to add scripts that will run after a customer has completed their purchase. This is a safe place to add conversion tracking codes, analytics scripts, or other scripts you want to trigger once a sale is confirmed.

Section 4: GTM Configuration for Purchase Tracking

  1. Create Custom Trigger: Set up a trigger in GTM for the custom purchase event.
  2. Set Data Layer Variables: Establish variables for transaction ID, value, tax, currency, and item details.
  3. Tag Creation and Setup:
    • Use the Facebook Pixel tag.
    • Configure event parameters (e.g., order ID, content type, items).
    • Ensure correct mapping to Facebook Pixel requirements.

Section 5: Testing and Publishing

  1. Preview and Debug: Utilize GTM's preview mode to test the setup.
  2. Conduct Test Transactions: Perform dummy purchases to verify the firing of purchase events and data capture.
  3. Final Checks:
    • Confirm event tracking on the Facebook Pixel helper extension.
    • Review data in Facebook Event Manager.
  4. Publish Changes: Once satisfied, publish the changes in GTM.

Conclusion

By following these steps, you can effectively configure the Facebook Pixel purchase event on your Shopify store using Google Tag Manager. This setup enhances your Facebook Ads' tracking and attribution accuracy, crucial for successful digital marketing strategies.