[Shopify Customer Pixel] How to Track Shopify Add Shipping Info Event Using Google Tag Manager and Facebook Pixel

by ShahzadaAliHassan - 23rd November 2024

Google Tag Manager

Shopify

Facebook Pixel

Ecommerce Tracking

Add Shipping Info

Data Layer

Meta Pixel

Tracking specific customer actions like “Add Shipping Info” is essential for optimizing your Shopify store’s performance. In this detailed tutorial, I’ll guide you through setting up this event using Google Tag Manager, Shopify, and Facebook Pixel. By the end of this guide, you’ll be able to configure and verify the event for accurate tracking.

Introduction to Setting Up the “Add Shipping Info” Event

This tutorial explains how I’ve successfully set up the “Add Shipping Info” event across 40+ Shopify stores in the last four months. The process uses Shopify’s Customer Events, Google Tag Manager, and the Facebook Pixel, making it scalable and precise. The steps are divided into four main sections:

1. Configuring Customer Events in Shopify.
2. Setting up Google Tag Manager on the website.
3. Adding tags, variables, and triggers.
4. Testing the setup to ensure functionality.

Step 1: Configuring Customer Events in Shopify

To start, log into your Shopify admin panel and navigate to the Settings at the bottom-left corner. From there:

1. Locate the Customer Events section and click on the Add Custom Pixels button in the top-right corner.
2. Rename the new custom pixel as Meta Add Shipping Info.
3. Enable the data layer by adding the required variable. Set the following configurations:
   • Permissions: Not required.
   • Data Sales: Does not qualify as data sales.
4. Replace the dummy code with the code snippet provided in the tutorial description or blog post. Paste this snippet in the code section of the custom pixel.

Once done, connect this pixel with the Shopify backend by saving the changes and ensuring it’s correctly integrated.

Step 2: Setting Up Google Tag Manager Integration

To integrate Google Tag Manager, start by obtaining your Google Tag Manager ID. Here’s how:

1. Log into Google Tag Manager and copy the Container ID from the dashboard. This ID appears as something like GTM-XXXXXXX.
2. Return to the Shopify backend, paste the ID in the designated field within the custom pixel setup, and save the changes.

Verify the integration by visiting your Shopify store and triggering the checkout process. Use the browser’s Developer Tools Console to inspect if the event fires correctly when entering shipping information.

Step 3: Adding Tags, Variables, and Triggers in Google Tag Manager

With the basics in place, it’s time to add the necessary configurations in Google Tag Manager.

Importing Templates

• Visit the Templates section in Google Tag Manager.
• Search for and add the Facebook Pixel by Facebook Archive tag template to your workspace.

Next, import the e-commerce parameter generator template. Download this from the blog post accompanying this guide, and upload it into Google Tag Manager. Once imported, save the template for use in the following steps.

Creating Variables

You’ll need three variables for this setup:

1. Facebook Pixel ID:
   • Create a constant variable named Meta Pixel ID and paste your Facebook Pixel ID into the value field.
2. E-commerce Items Array:
   • Create a data layer variable named dlv.ecommerce.items.
3. E-commerce Parameter Generator:
   • Use the imported parameter generator template to create a variable, selecting the Items Array as input.

Save all variables before proceeding.

Configuring Triggers

• Go to the Triggers section and create a new custom event named Add Shipping Info.
• Configure it to fire only on the add_shipping_info event.

Adding Tags

• In the Tags section, create a new tag using the imported Facebook Pixel template.
• Configure the tag:
  • Select the Meta Pixel ID variable for the Pixel ID field.
  • Manually input the event name as add_shipping_info.
  • Load the parameters using the E-commerce Parameter Generator variable.

Save the tag and associate it with the Add Shipping Info trigger.

Step 4: Testing and Verifying the Setup

Testing is crucial to confirm everything works as expected. Here’s how:

1. Preview Mode in Google Tag Manager:
   • Activate the Preview Mode in Google Tag Manager and simulate the checkout process on your store. Check if the add_shipping_info tag fires when entering shipping information.
2. Facebook Pixel Helper:
   • Use the Facebook Pixel Helper browser extension to verify that the event is recorded correctly. Look for the event in the helper’s console.
3. Facebook Events Manager:
   • Navigate to the Test Events section in Facebook Events Manager and connect your store. Trigger the event by entering test data during checkout. Ensure that the Add Shipping Info event is visible with all expected parameters like content name, IDs, and values.

Conclusion and Next Steps

By following these steps, you’ve successfully configured and verified the Add Shipping Info event on your Shopify store using Google Tag Manager and Facebook Pixel. This setup provides granular tracking, helping you understand customer behavior during checkout. To take your tracking further, consider setting up the Add Payment Info event. For a detailed guide, check out the next tutorial in this series.