TrackingAcademy.comEnroll Now

Tracking Pageview event on Shopify using Google Tag Manager and Facebook Pixel.

by ShahzadaAliHassan - 10th November 2023

Facebook Pixel
Shopify
Google Tag Manager
Page View

Introduction

In our latest tutorial, we dive into the process of integrating Facebook Pixel with your Shopify store using Google Tag Manager. This approach is particularly useful if you're experiencing issues with Shopify's native Facebook and Instagram app tracking.

Understanding the Complexities

Before we begin, it's crucial to acknowledge that migrating from Shopify's native integration to Google Tag Manager entails a complex setup involving cookies and server-side tracking. This method is recommended for those who have prior experience or a deep understanding of these systems.

Prerequisites

The tutorial assumes that you already have a Google Tag Manager container account, a Facebook Business Manager account, and a Shopify store ready for configuration.

Step-by-Step Guide

Section One: Configuring Google Tag Manager on Shopify

  1. Access your Google Tag Manager container.
  2. Navigate to 'Admin' > 'Install Google Tag Manager' to obtain the necessary tracking snippet codes for Shopify's head and body sections.

Adding the Codes to Shopify

  1. Within your Shopify store, go to 'Sales Channel' > 'Online Store' to reach the themes section.
  2. Choose 'Edit Code' and locate the 'theme.liquid' file.
  3. Insert the head snippet code within the opening head tag and the body snippet code below the opening body tag.
  4. Ensure correct formatting and indentation for clarity, then save your changes.

Verifying the Integration

  1. Return to the workspace in Google Tag Manager and select 'Preview'.
  2. This connects your store with the Shopify debug view to monitor events firing on your website.

Section Two: Configuring the Basic Facebook Pixel Tag

  1. Head over to Facebook Business Manager and locate 'Events Manager' under 'All Tools'.
  2. In 'Data Sources', select your Facebook pixel or create a new one if necessary.
  3. Use either custom HTML tags or template tags to configure your pixel. We will focus on custom HTML tags first.

Creating a Custom HTML Tag in Google Tag Manager

  1. In Google Tag Manager, go to 'Tags' > 'New' and choose 'Custom HTML Tag'.
  2. Copy the base code provided by Facebook for manual setup and paste it into the tag configuration.
  3. Set the trigger to 'All Pages' to ensure the tag fires across your website.

Testing the Facebook Pixel Integration

  1. Use the 'Preview' mode in Google Tag Manager to confirm that the Facebook pixel is firing correctly.
  2. Disable any native Shopify Facebook integrations to avoid conflicts.

Section Three: Using Templates for Easier Configuration

  1. Explore template tags provided by the community within Google Tag Manager.
  2. Add a Facebook pixel template from the tag gallery and configure it with your Facebook pixel ID.
  3. Rename the tag appropriately and save your settings.

Publishing and Testing

  1. Publish the Google Tag Manager container after final testing.
  2. Use Facebook Business Manager's 'Test Events' feature to validate event tracking on your Shopify store.

Observing Results

  1. Enter your website's URL in the 'Test Events' section to link it with Facebook's debug view.
  2. Monitor page views and other events to ensure they register correctly.

Conclusion

This detailed guide is designed to give you a granular look at setting up Facebook Pixel on Shopify using Google Tag Manager. By following these steps, you'll be able to track valuable customer interactions on your Shopify store with precision.