Tracking View Category Events in Facebook Pixel Using Google Tag Manager and Shopify

How you can effectively track "View Category" events in Facebook Pixel. This capability is crucial for understanding user engagement on category pages of your website and can be pivotal for creating targeted audiences or data-related events. We'll be utilizing Google Tag Manager and a Shopify store for this project.

Shahzada Ali Hassan

4 min read0 views

Watch on YouTube

Check your site's tracking

Enter your website to see how good its tracking is, and whether Meta is likely restricting it.

Run a free audit

In this comprehensive guide, we'll delve into how you can effectively track "View Category" events in Facebook Pixel. This capability is crucial for understanding user engagement on category pages of your website and can be pivotal for creating targeted audiences or data-related events. We'll be utilizing Google Tag Manager and a Shopify store for this project.

Prerequisites

Before diving into the tutorial, ensure you have the following:

  1. A Shopify store.
  2. A Google Tag Manager container.
  3. A Facebook Pixel set up in your Business Manager.

Section 1: Configuring Google Tag Manager on Your Shopify Store

  1. Accessing Container ID: In your Google Tag Manager account, locate the container ID at the top right corner.
  2. Copying Container Codes: There are two codes provided - one for the head section and another for the body. Both must be placed in your Shopify theme file to track user interaction across the website.
  3. Editing Shopify Theme File:
    • Click on "Online Store" in your Shopify dashboard.
    • Duplicate the theme file for backup.
    • Access the theme's code editor.
    • Paste the head tracking snippet just below the opening <head> tag.
    • Similarly, paste the body tracking snippet near the opening <body> tag.

Section 2: Configuring the Facebook Pixel Base Tag

  1. Navigating to Event Manager: Go to your Facebook Business Manager and access the Event Manager.
  2. Setting Up Pixel: If you haven't already, create a new pixel named 'Tracking Academy' or similar.
  3. Creating Variable in Google Tag Manager: In Google Tag Manager, create a constant variable for the Facebook Pixel ID for easy reference.
  4. Installing Template for Facebook Pixel: Search for and install a Facebook Pixel template from the Google Tag Manager template gallery, created by the Facebook archive team.
  5. Configuring Pixel Tag: Create a new tag in Google Tag Manager using the Facebook Pixel template and the previously created Pixel ID variable.

Section 3: Adding View Item List Scripts

This script begins by ensuring the dataLayer array is established. It then identifies if the webpage is a product page and, if so, implements the 'datalayer-collection' snippet.

liquid
1 2 <script> 3 window.dataLayer = window.dataLayer || []; 4 </script> 5 6 {%- if template == 'collection' -%} 7 {%- render 'datalayer-collection', collection: collection -%} 8 {%- endif -%} 9

Collection Page DataLayer Script

The primary function of this script is to enrich the dataLayer object with product-specific information when a collection page is accessed:

  1. It initially identifies the current product variant.
  2. An itemObject is created, encapsulating various details about the product.
  3. Upon the document's loading, this information is added to the dataLayer object.
  4. Save the file with name datalayer-collection.liquid
liquid
1<script> 2 console.log("datalayer-collection snippet is loaded") 3 dataLayer.push({ ecommerce: null }); 4 dataLayer.push({ 5 event: "custom_view_item_list", 6 ecommerce: { 7 item_list_name: {{ collection.title | json }}, 8 items: [{%- for product in collection.products -%} 9 { 10 item_id: {{ product.id | json }}, 11 id: {{ product.id | json }}, 12 item_name: {{ product.title | json }}, 13 currency: {{ shop.currency | json }}, 14 index: {{ forloop.index | json }}, 15 item_brand: {{ product.vendor | json }}, 16 item_category: {{ product.type | json }}, 17 item_list_name: {{ collection.title | json }}, 18 item_variant: {{ product.selected_or_first_available_variant.title | json }}, 19 price: {{ product.selected_or_first_available_variant.price | json }} / 100, 20 google_business_vertical: 'retail', 21 quantity: 1 22 }{%- unless forloop.last -%},{%- endunless -%} 23 {%- endfor -%}] 24 } 25 }); 26 </script>

Theme-Level DataLayer Script

This script executes the head-datalayer snippet. Typically found in the head section of your Shopify theme's setup, this snippet is key for integrating the head datalayer code. Incorporate this within the GTM Body Code.

liquid
1 2 {% render 'head-datalayer' %} 3

Steps for Implementing DataLayer Scripts in Shopify:

  1. Backup First: As a precaution, ensure you have a backup of your current theme.
  2. Theme File Access: Log into your Shopify Admin, navigate to Online Store > Themes, find your active theme, click "Actions," and select "Edit code".
  3. Head DataLayer Script Insertion: Find theme.liquid in the sidebar, and within the <head> tags, place the "Head DataLayer Script".
  4. Incorporating Product DataLayer Script: Opt to "Add a new snippet" (this varies with Shopify versions). Name this snippet datalayer-product.liquid and include the "Product DataLayer Script". Save your modifications.
  5. Theme DataLayer Script Placement: Decide the appropriate spot (usually within the <head> section in theme.liquid) to insert the "Theme DataLayer Script". Implement and save.
  6. Verification: Test the integration by visiting a product page on your Shopify store. Open the developer console in your browser to confirm that the custom_view_item event triggers and the dataLayer object accurately displays product information.

Section 4: Creating View Category Event in Google Tag Manager

  1. Setting Up Trigger: Create a new custom event trigger in Google Tag Manager using the name 'custom VI item list'.
  2. Creating Variables: Set up data layer variables in Google Tag Manager to extract values like currency, item list name, and items array.
  3. Mapping Event Parameters: Since Facebook Pixel uses different event parameter names, map Google Analytics' e-commerce event parameters to Facebook's using a variable template.
  4. Finalizing Tag Configuration: Create a new tag for the 'View Category' event, ensuring all necessary parameters are included.

Section 5: Testing and Publishing Changes

  1. Testing Setup: Use the Google Tag Manager preview mode and Facebook Pixel helper extension to ensure tags are firing correctly on your Shopify store.
  2. Publishing Changes: Once verified, publish the changes in Google Tag Manager with a descriptive version name.

Conclusion

By following these steps, you will have successfully set up tracking for 'View Category' events in Facebook Pixel using Google Tag Manager and Shopify. This setup allows for detailed insights into user interactions with your category pages, paving the way for more refined audience targeting and data-driven marketing strategies. Remember, it may take 1-3 hours for the event to become available in your Facebook Event Manager, after which you can start creating retargeting audiences or custom reports in your ad account.

All guides

Set up in about 5 minutes. Events in Events Manager within about 30.

~5 min setupwithin ~30 min
Setting up
  • 7-day free trialon every eligible domain, one per domain
  • $297/moper subdomain
  • We set up the first domain with youfounder included
  • 30-day money-back guaranteeand cancel any time in the trial
  • We keep working with youuntil it is fixed
Start 7-day trialGet a free consultation

Payment method required at checkout. One trial per domain. The 30 minutes start once tracking is installed and events fire; it is visibility in Events Manager, not same-day ROAS.