TrackingAcademy.comContact

Shopify, Facebook Pixel & Google Tag Manager Setup for View Content! 🚀

by ShahzadaAliHassan - 13th November 2023

Facebook Pixel
Shopify
Google Tag Manger
View Item

Introduction

In this tutorial, we'll explore configuring the 'View Content' event for Facebook Pixel on a Shopify store using Google Tag Manager (GTM). This is particularly useful if you're not using Shopify's built-in Facebook and Instagram app.

Prerequisites

  1. Google Tag Manager Container
  2. Active Shopify Store
  3. Facebook Business Manager Account with a Facebook Pixel

Section 1: Configuring Google Tag Manager on Shopify

  1. Go to your GTM Container, click on the container ID or navigate to 'Admin' > 'Install Google Tag Manager' to get the code snippets.
  2. Copy the 'Head' snippet and paste it right under the <head> tag in the theme.liquid file on Shopify.
  3. Copy the 'Body' snippet and paste it just after the opening <body> tag in Shopify.
  4. Save changes and use GTM's preview mode to verify the setup.

Section 2: Setting Up Facebook Pixel Base Code

  1. In Facebook Business Manager, navigate to 'Event Manager' > 'Data Sources'.
  2. If you have a Pixel created, select it; otherwise, create a new one.
  3. Copy the Pixel's base code.
  4. In GTM, create a new tag with this base code as a 'Custom HTML' tag.
  5. Set the trigger for all pages and save.
  6. Alternatively, use Facebook's custom template in GTM for a simpler setup.

Section 3: Setting Up 'View Content' Event Scripts

This section details the setup and implementation of a data layer script on a Shopify website, crucial for tracking and analytics. It involves initializing and populating the dataLayer object to accurately capture key data.

Initialization of the DataLayer

Firstly, a script snippet is used to initialize the dataLayer array, assuming it's not already set up. This snippet also checks if the current page is a product page, indicated by the template type, and if so, triggers the 'datalayer-product' snippet.

Gathering Product Information

The 'datalayer-product' snippet plays a critical role in capturing product information. Its process involves:

  1. Identifying and recording the active product variant.
  2. Creating an itemObject containing detailed product information.
  3. Pushing this information to the dataLayer object when the document loads.

Theme DataLayer Code Integration

To incorporate the theme-specific data layer code, the 'head-datalayer' snippet must be rendered. This is typically found in the head section of the Shopify theme. It should be added to the GTM Body Code section.

Implementation Steps in Shopify:

  1. Backup Creation: Start by backing up your current theme.

  2. Theme File Access: Navigate to Online Store > Themes in your Shopify Admin, and choose "Edit code" from the "Actions" menu of your active theme.

  3. Head DataLayer Code Addition: Locate theme.liquid in the sidebar, and embed the "Head DataLayer Code" snippet within the <head> section.

  4. Product DataLayer Code Insertion: Form a new snippet (name it datalayer-product.liquid if required), and include the "Product DataLayer Code" snippet. Save the changes.

  5. Theme DataLayer Code Placement: Identify the appropriate spot within the <head> section in theme.liquid for the "Theme DataLayer Code" snippet and insert it. Save the modifications.

  6. Verification: To test, visit a product page on your Shopify site, open the browser's developer console, and confirm that the custom_view_item event fires and the dataLayer correctly reflects the product details.

By following these steps, you ensure your Shopify site effectively gathers and leverages data for tracking and analytics.

Section 4: Creating Tags for 'View Content' Event in GTM

  1. Create a new trigger in GTM for the custom 'View Item' event.
  2. Set up necessary variables for enhanced e-commerce tracking in GTM.
  3. Create a custom HTML tag or use the Facebook Pixel template tag in GTM.
  4. Ensure the tag fires the 'View Content' event with the correct parameters.
  5. Verify the setup through GTM's preview mode and Facebook Pixel's helper.

Section 5: Testing and Publishing

  1. Publish your GTM changes with a descriptive version name.
  2. Test the integration using Facebook Pixel's debug view.
  3. Ensure the 'View Content' event is firing correctly with all required parameters.

Conclusion

By following these steps, you can successfully configure the 'View Content' event for Facebook Pixel on your Shopify store using Google Tag Manager. This setup is crucial for accurate tracking and data collection for your marketing efforts.