[Shopify Customer Pixel] How to Track Shopify Page View Event Using Google Tag Manager and Facebook Pixel

by ShahzadaAliHassan - 20th September 2024

Shopify recently introduced a new way to track customer events, making it easier to monitor and manage your store's performance. This blog post will guide you through the process of setting up Shopify customer events, using Google Tag Manager and Facebook Pixel. If you're new to tracking customer events, don't worry! We'll break it down step-by-step, keeping it simple and easy to follow.

Introduction to Shopify Customer Events
Step 1: Adding the Data Layer Event Code
Step 2: Adding Google Tag Manager Container
Step 3: Configuring Facebook Pixel Tags
Step 4: Testing the Facebook Pixel Events
Tracking Add to Cart Events
Conclusion

Introduction to Shopify Customer Events

Shopify's updated customer event tracking allows you to gather detailed information on your store visitors, including page views and user activity. Over the past three months, I've set up over 40 Shopify stores with this system. Here's a simple, four-step guide to help you do the same:

Add the Data Layer Event Code
Install the Google Tag Manager container
Configure Facebook Pixel Tags
Test everything to ensure proper tracking

Let's dive into the steps!

Step 1: Adding the Data Layer Event Code

The first step is to add the data layer event code in your Shopify store settings.

How to Add the Data Layer Code:

Go to Shopify Settings
In your Shopify admin panel, click on the settings button located in the bottom-left corner.
Navigate to Customer Events Section
Scroll down and find the "Customer Events" section.
Add a Custom Pixel
Click on the "Add Custom Pixels" button in the top-right corner.
Rename the Pixel
For clarity, rename this pixel to something like "Meta Page View Data Layer" (since we're setting it up for Facebook Page View events).
Set Permissions
Ensure that the permission settings are set to Not Required and the data sale status to Does Not Qualify as Data Sale.
Get the Code Snippet
The code snippet can be found through the link provided (e.g., blog post or description). Copy the code and paste it into the section on your Shopify store.

That’s it! You've successfully added the data layer event code.

Step 2: Adding Google Tag Manager Container

Now, we’ll integrate the Google Tag Manager (GTM) container code.

How to Add GTM Container:

Find the GTM Snippet
If you scroll up in the customer pixel section, you'll notice a base code snippet for Google Tag Manager.
Get Your GTM ID
Go to tagmanager.google.com and copy your Google Tag Manager ID.
Replace the Dummy ID
In Shopify, replace the placeholder ID in the base snippet with your actual GTM ID.
Save Changes
After replacing the ID, click the "Save Changes" button at the top.
Connect the Pixel
Hit "Connect" to ensure the pixel is now associated with your Shopify store.

Once done, verify that the page view event is working by inspecting the data layer through the browser's developer console.

Step 3: Configuring Facebook Pixel Tags

Next, we’ll configure Facebook Pixel using Google Tag Manager.

How to Configure Facebook Pixel Tags:

Create a New Tag in GTM
Go back to your Google Tag Manager account, and create a new tag. Since we want the page view event to trigger on all pages, create a custom trigger.
Set Up a Custom Trigger
Instead of using the default "All Pages" trigger, create a custom trigger that fires when a page view event is detected in the data layer.
Add Facebook Pixel Template
Rather than using custom HTML, use a Facebook Pixel template. Go to the template gallery in GTM and search for "Facebook Pixel Tag" (created by the Facebook Archive Team). Add this template to your workspace.
Insert Facebook Pixel ID
Get your Facebook Pixel ID from the Facebook Events Manager and paste it into the template. You can store this ID as a constant in GTM for easier management.
Save and Publish
Rename the tag to something like "Meta Configuration Tag" and hit save. Afterward, publish the changes to apply them to your site.

Step 4: Testing the Facebook Pixel Events

Testing ensures that everything is working properly before you go live.

How to Test Facebook Pixel:

Use Facebook Pixel Helper
Install the Facebook Pixel Helper extension for Chrome to check if the pixel is firing correctly. When you load your Shopify page, the extension should show that a "Page View" event has fired.
Check in Facebook Events Manager
You can also test the pixel through the Facebook Events Manager. Go to the "Test Events" section and input your website's URL. Facebook will display the events in real-time.
Test on Multiple Pages
Try visiting different pages (e.g., homepage, contact page, catalog) to verify that page view events are being tracked accurately.

Tracking Add to Cart Events

Once you’ve set up page view tracking, you can move on to more advanced events, like tracking "Add to Cart" actions.

Steps to Track Add to Cart:

Create a New Tag for Add to Cart
Similar to the page view event, create a new tag in GTM but this time for "Add to Cart" events.
Configure the Trigger
Set up a trigger that fires when a user clicks on the add-to-cart button. You can find this in the data layer.
Publish and Test
After configuring the new event, publish the changes and test using Facebook Pixel Helper and Events Manager.

Conclusion

Congratulations! You've now learned how to set up Shopify customer events using Google Tag Manager and Facebook Pixel. Following this process will allow you to track critical customer behaviors like page views and add-to-cart actions, enabling you to optimize your store's performance.

Make sure to regularly test your tracking setup to ensure it continues to work as expected. If you run into any issues or want to add more complex events, feel free to revisit these steps or explore advanced tracking options.

Happy tracking!