Published on

Track Facebook Pixel ViewContent Events with a Theme-Independent DataLayer on Shopify!

Introduction

In this article, we will explore how to set up Facebook Pixel conversion tracking for ViewContent events on your Shopify store using a theme-independent data layer and Google Tag Manager (GTM). This step-by-step guide will help you efficiently track e-commerce events such as View Item, Add to Cart, Begin Checkout, and Purchase.

Step 1: Set Up Your Facebook Pixel

To begin, ensure that you have connected your Facebook Pixel to your Shopify store. Navigate to the Facebook Events Manager at business.facebook.com. If you haven’t created a data source yet, do so now. Locate your Pixel ID by going to the settings, finding the Pixel ID or Data Set ID, and copying it.

Create a Constant Variable for Pixel ID in GTM

  1. Go to Google Tag Manager.
  2. Click on the Variables section and create a new variable.
  3. Choose "Constant" as the variable type and paste the Pixel ID you just copied.
  4. Name this variable "Facebook Pixel ID" and save it.

Create the Page View Event Tag

Now we will set up a Page View event, which should be fired on every page of your website:

  1. Go to the Tags section and create a new tag.
  2. Select "Tag Configuration" and choose the "Facebook Pixel" template.
  3. Use the previously created constant variable for the Pixel ID.
  4. Set the event name to "PageView" and trigger it for all pages.
  5. Name this tag "FB PageView" and save it.

Step 2: Create Variables for ViewItem Event

Moving on, we will set up the ViewContent event (also referred to as View Item) by creating the necessary variables.

  1. Open a product page on your Shopify store.
  2. Right-click and select "Inspect" to open the browser's DevTools.
  3. Go to the "Console" and expand the Data Layer to view the required parameters.

In this case, you'll need variables for:

  • Content Type
  • Content Name
  • Content ID
  • Value
  • Currency

Creating Variables in GTM

For each parameter, create a new variable of type "Data Layer Variable" and set them accordingly:

  1. Content Type: Static value (e.g., "product" or "product group").
  2. Content Name: Set to the data layer variable [Facebook].content_name.
  3. Content ID: Set to the data layer variable [Facebook].content_id.
  4. Value: Set to the data layer variable [Facebook].value.
  5. Currency: Set to the data layer variable [Facebook].currency.

Save each variable with appropriate names like "DLV Content Name", "DLV Content ID", etc.

Step 3: Create the ViewContent Event Tag

With all the variables defined, you can now proceed to create the ViewContent event tag.

  1. Go to the Tags section and create a new tag.
  2. Select "Tag Configuration" and choose the "Facebook Pixel" template.
  3. Use the constant variable for Pixel ID.
  4. For the event name, select "ViewContent" and add the properties using the variables you've created.
  5. Add the relevant parameters as properties (e.g., content type, content name).
  6. Set up the trigger for this tag to fire on the ViewItem event.

Give the tag a name, such as "FB ViewItem", and save it.

Testing the Setup

Before submitting your changes, take advantage of the GTM preview mode to test your setup. Make sure the Facebook Pixel Helper extension is activated in your browser to verify if your events are firing correctly.

  1. Open a product page again and check the pixel helper for events.
  2. Expand the ViewContent event to see all parameters sent to Facebook.
  3. Go back to the Events Manager to confirm that the events are showing up in the Test Events section.

If everything looks good, you’re ready to submit and publish your changes in GTM.

Conclusion

You have successfully set up Facebook Pixel web conversion tracking for ViewContent events using a theme-independent data layer on your Shopify store. In future articles, we will cover how to set up additional events such as Add to Cart, Begin Checkout, and Purchase.

Keyword

  • Facebook Pixel
  • ViewContent event
  • Shopify
  • Theme-independent data layer
  • Google Tag Manager
  • Conversion tracking
  • Event parameters

FAQ

Q: What is a Facebook Pixel?
A: A Facebook Pixel is a piece of code that helps track user behavior on your website and optimize marketing campaigns.

Q: What is a theme-independent data layer?
A: A theme-independent data layer is a structured format that stores data about website interactions, independent of the website's theme or platform.

Q: Why do I need to create constant variables in GTM?
A: Creating constant variables in GTM allows for easier management of values like Pixel IDs, especially when multiple tags are involved.

Q: How can I verify if my events are firing correctly?
A: You can use the Facebook Pixel Helper extension in your browser to check if events are firing correctly and view event parameters.

Q: What types of events can I track with Facebook Pixel?
A: You can track various events such as PageView, ViewContent, Add to Cart, Begin Checkout, and Purchase using Facebook Pixel.

Read More