Get in touch with our team

17.11.2018

3 min read

Retrofitting Facebook ViewContent events from enhanced ecommerce dataLayer objects

This article was updated on: 07.02.2022

As we work with an increasing number of ecommerce brands, and as our B2B clients are increasingly more open to Facebook advertising, we’re facing a growing number of challenges with achieving the tagging we require. For many popular content management systems, there are appropriate Facebook Pixel plugins or handy snippets for theme developers to include in your website’s source code. However, these add to the required server overhead, and double up on similar tracking you may already have in place for things like Google Analytics’ Enhanced Ecommerce reporting.

We’re huge fans of Enhanced Ecommerce and the additional advertising segments we can derive from it, so recommend implementing this where possible. If you already have Enhanced Ecommerce tagging installed through a Google Tag Manager dataLayer integration, then here’s a handy and quick way to get your Facebook ViewContent events set up and running in 5 minutes flat without even touching your existing website configuration!

1. Create your variables in Tag Manager

Head on over to your Tag Manager account and pick your desired workspace, select Variables from the left menu and scroll to User Variables. Create a new one.

The first variable should be called Ecommerce (variable names must match the names in {{handlebars}} in my example code below) and is of the type “Data Layer Variable”. The “Data Layer Variable Name” should be ecommerce (in lower case), all as below:

Next up, store your Facebook Pixel ID in a new variable called “Facebook Pixel ID”. Choose type “constant” and then just paste the value in. My demo below is truncated slightly:

You now have the two prerequisites up and running!

2. Set up the Facebook tag

Next, navigate to “Tags” in the left menu, and create a new HTML tag. Copy and paste the below in full, including the <script> tags into the HTML section and select a suitable trigger. For simplicity, I’ve written the snippet to work on “All Pages” but if you’re being super efficient, limit it to only pages which will trigger your existing ecommerce dataLayer content.

If you already have an “add to cart” trigger defined, then also attach it to your tag. This will also allow you to track add to cart events in Facebook via your existing enhanced ecommerce tagging.

Double check the variable names in the handlebars at the top of the code match the ones you’ve created in Tag Manager.

3. Test your configuration

Before your publish your Tag Manager changes, it’s worth testing this is working for you. For simplicity in testing, it’s worth installing the Facebook Pixel Helper plugin for Chrome. then, hit “Preview” in Tag Manager and head to a product page on your website.

You should see that a new “ViewContent” event is being fired in your Pixel Helper, and you can expand it out to see your page’s product contents. We’re currently tracking viewing product content, add to cart and purchase events. Facebook also allows for a number of custom vents which could be used to track checkout behaviour much like enhanced reporting in Google Analytics does — but that’s beyond the scope of this tutorial.

4. Publish!

That’s it! This is a really quick way to get up and running with Facebook custom purchase pixel events from an existing enhanced ecommerce setup.  If you would like assistance for your own website, let us know in the comments below, or if you would like to work with Impression on an Analytics project, get in touch!

Now, head over to Facebook and ensure you have a product catalog set up. If you don’t have a URL to hand, then just set Facebook to collect product information from the new events you’ve just set up. Feeds are no longer required, however as you’re borrowing events from your Google Analytics/ Tag Manager setup, it’s highly likely your existing Google Merchant Center feed will be an exact fit for this initial import.