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

by ShahzadaAliHassan - 21st September 2024

Shopify recently introduced the Customer Event Section, a new way to track eCommerce events. In this post, I’ll walk you through setting up the Facebook Pixel View Category Event using Google Tag Manager (GTM) and Shopify’s new Customer Event features.

Whether you're managing a single Shopify store or migrating multiple stores, this step-by-step guide will help you efficiently track essential eCommerce events like View Category and improve your store’s performance.

Introduction to Shopify Customer Events

Shopify’s Customer Event Section is a new method of tracking eCommerce events, replacing the older data layer. Over the last few months, many Shopify stores have successfully migrated to this new setup. This guide will show you how to configure the View Category Event for the Facebook Pixel using Google Tag Manager in Shopify’s Customer Event Section.

We'll walk through a 4-step process:

Add the data layer event code
Configure the Google Tag Manager container
Set up Facebook Pixel Tags
Track and verify the View Category Event

Step 1: Adding Data Layer Event Code

To start, we need to add a custom data layer event to Shopify.

Go to Shopify Settings:
- Log in to your Shopify store and navigate to the bottom-left corner to click Settings.
- In Settings, find the Customer Event section.
Add a Custom Pixel:
- At the top-right, you'll see the button Add Custom Pixel. Click it.
Rename the Pixel:
- Since this pixel will trigger the View Category Event for Facebook (or Meta), rename it appropriately, like "Meta View Category Data Layer Event."
Configure the Permissions:
- Set Permissions to "Not Required."
- Set Data Sale to "Does Not Qualify as Data Sale."
Add the Code Snippet:
- Remove any demo code and paste the View Category Event code into the section for adding your custom pixel code. You can find this snippet in the video’s description or a linked blog post.

Step 2: Adding Google Tag Manager Container

Now that the data layer event is set up, it's time to integrate Google Tag Manager.

Get the GTM Container ID:
- Log in to your Google Tag Manager (GTM) account and copy the Container ID.
Add the Container ID to Shopify:
- Return to your Shopify store and paste the Container ID into the corresponding field.
Connect the Pixel:
- After saving, click the Connect button to link the pixel to your Shopify store.
Verify Connection:
- Go to the Online Store and use Inspect mode in your browser’s console to ensure the data layer event is firing correctly. You should see the View Item List Event triggered along with product details like item name, value, and currency.

Step 3: Configuring Facebook Pixel Tags

With the data layer event and GTM container set up, we can now configure the Facebook Pixel tags in GTM.

Create a New Tag in GTM:
- In GTM, create a new tag. You can either use a custom HTML tag or import a tag from the template gallery.
Choose the Facebook Pixel Tag:
- Search for Facebook Pixel in the template gallery and select the one managed by Facebook AR. Add it to your workspace.
Add the Facebook Pixel ID:
- Get your Facebook Pixel ID from Facebook Events Manager.
- In GTM, create a constant variable named Meta Pixel ID and save it. This avoids manually copying and pasting the ID multiple times.
Set Up the Page View Event:
- Set this tag to fire on all pages or only on specific page views, as needed.
Configure View Category Event:
- Create another custom event trigger for View Category. Name it accordingly and set it to fire only when the View Item List Event from the data layer is triggered.

Step 4: Tracking View Category Events on Facebook Pixel

For the View Category Event, we will pass additional information from the data layer, like product IDs and names, to Facebook.

Import the E-Commerce Parameter Generator Template:
- From the video description or blog post, download the e-commerce parameter generator template (TPL file).
- Go to GTM → Template → Custom Variables and import this template.
Create a New Variable:
- Use the imported template to create a variable that pulls e-commerce data from the data layer (like product names, IDs, and currency).
Link the Variable to the Tag:
- Go back to your View Category Tag and link the newly created variable that contains the e-commerce parameters.
Publish the Changes:
- Once everything is set up, publish your changes in Google Tag Manager.

Verifying Pixel Events in Shopify

Before we wrap up, let’s verify that everything works as expected.

Test the Pixel Events:
- Visit your Shopify store’s frontend and go to a category page.
- Use the Meta Pixel Helper browser extension to verify that the View Category Event has fired. The event should include the content IDs, content array, currency, and other parameters.
Check in Facebook Events Manager:
- In Facebook Events Manager, go to the Test Events section, enter your store URL, and open the site.
- You should see both the Page View Event and the View Category Event listed.

Conclusion

By following this guide, you’ve successfully set up and tested the View Category Event using Shopify’s new Customer Event Section and Google Tag Manager. This method ensures you can track customer interactions efficiently, helping improve your store’s performance and marketing strategies.

For further information on how to track more events, check out this related post.

By optimizing the tracking setup for Shopify, you can better understand customer behavior, improve ad targeting, and ultimately boost conversions. Let me know if you found this guide helpful!