Leverage Enhanced Ecommerce Data Layer for Marketing Pixels

This post contains scripts that you can use as Custom JS Variables in Google Tag Manager. These scripts all target the quite specific (yet common) use case where a site already running Google Analytics Enhanced Ecommerce now needs to run additional marketing or analytics tags.

Background
Prerequisite: Create a Data Layer Variable for the Products Array
Script 1: Total Quantity
Script 2: Total Price
Script 3: Subset of Product Attributes
Script 4: Comma-Separated List of SKUs
Script 5: Array of SKUs
Final Step: Add Custom JS Variables into a Custom HTML Tag

API CONNECTOR ADD-ON FOR GOOGLE SHEETS

Check out my new API Connector Add-on to import data from thousands of platforms (e.g. Shopify, Harvest, Mailchimp, ActiveCampaign, VWO, YouTube, etc.) directly into Google Sheets.

BACKGROUND

Most marketing and analytics tools come with their own tracking pixel (aka script or tag). These pixels usually look something like this, where you are expected to fill in dynamic values for ‘total_quantity’, ‘total_price’, and ‘products’:

If you are using Enhanced Ecommerce for Google Analytics on your site, most likely your developers have already created a data layer for Google Tag Manager (GTM) that contains all the raw information you need to populate the above tag. This is a standard Enhanced Ecommerce data layer that would be active on a ‘transaction complete’ page:

It contains information about transaction IDs, revenue, product quantities, prices, and so on, which, unsurprisingly, is the same information required by many marketing and analytics tags. This post will provide instructions and scripts to leverage and reconfigure a GTM Enhanced Ecommerce data layer to satisfy some commonly requested patterns.

PREREQUISITE: CREATE A DATA LAYER VARIABLE FOR THE PRODUCTS ARRAY

Before we move forward, create a data layer variable pointing to the entire products array. We’ll reference this value in the scripts below.

To do this, in GTM navigate to Variables > New > Data Layer Variable, and set Data Layer Variable Name to ecommerce.purchase.products.
ee-datalayer-other-pixels-img1

You can name it whatever you like, but for this example we’ll name this variable DL – ecommerce.purchase.products. (It will be easier to follow along if you use the same names.)

SCRIPT 1: TOTAL QUANTITY

This script will return the sum of all quantities in the products array. We’ll name it ‘JS – Total Quantity’.

SCRIPT 2: TOTAL PRICE

The following script will return the sum of all prices in the products array. We’ll name it ‘JS – Total Price’.

SCRIPT 3: SUBSET OF PRODUCT ATTRIBUTES

This script will let you extract certain product attributes from the Enhanced Ecommerce data layer. Let’s call it ‘JS – Product Attributes’.

The above script will produce a new array of products, containing just the name, quantity, and price attributes, like this: [{ name: “snack1”, quantity: “1”, price: “200”}, { name: “snack2”, quantity: “1”, price: “100”}]

Variation 1: If you need different attributes, you’d need to modify the above script slightly. For example, if you needed to include the product category, you’d add ‘category: product.category’ after ‘price: product.price’.

Variation 2: If your tag requires that you rename the attribute to something else, you’d again modify the script. For example, if they need to receive the price in a key named ‘value’ instead of ‘price’, you’d change ‘price: product.price’ to ‘value: product.price’.

SCRIPT 4: COMMA-SEPARATED LIST OF SKUS

This custom JS variable will produce a comma-separated list of purchased SKUs (e.g. “50460492,50949783,51386761”).

SCRIPT 5: ARRAY OF SKUS

This custom JS variable is almost the same as the above, but will return the list of SKUs as an array (e.g. [“50460492”, “50949783”, “51386761”]) instead of a string. Some pixels require this format, e.g. the Facebook Dynamic Ads pixels.

ADD CUSTOM JS VARIABLES INTO A CUSTOM HTML TAG

Once you’ve created custom JS variables containing the values you need, in the correct format, substitute them into a new custom HTML tag. For example, returning to the example tag requirements at the top, you’d create a tag like this:

Set this tag to fire on the transaction page, and it will send the correct, dynamically populated tag to your marketing vendor.

Comments:2

  1. Hi Ana! Thanks a lot for this great article, I have been looking for those JS utilities lately and again found the answer at your blog;) Regarding the external pixels are now covered, but how about enhancing the eCommerce data layer to send extra parameters to GA (for dynamic remarketing) ? Is it always a modification of the code needed (so it populates as well: (for retail (for instance)) ecomm_prodid, ecomm_pagetype, ecomm_totalvalue to data layer directly? Or you could think of a JS that would convert the enhanced ecommerce data from the standard implementation into the format that would match custom dimensions in GA. Just like Patrick Strickler did for Client, Session, Hit IDs in one of his articles. Please check the article attached. Not sure if this a good idea, just struggling with it this days…

    1. Hey Anton, thanks for the comment! For dynamic remarketing you can use the data layer values that are already there: ‘id’ and ‘revenue’ for ‘ecomm_prodid’ and ‘ecomm_totalvalue’. You’d extract those values into GTM with custom JS variables and/or DL variables and attach them to your dynamic remarketing tag. Page type isn’t part of the default EE data layer, though, so you’d need to push that in separately, like this:
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
      'event' : 'pageview',
      'pageType' : 'checkout'
      });

      If you wanted you could bundle in ‘pageType’ as part of your EE data layer push, but I usually see it pushed separately.
      I’m not totally sure what you mean by ‘JS that would convert the enhanced ecommerce data from the standard implementation into the format that would match custom dimensions in GA’, can you please clarify what you’re looking for?

Leave a Reply

Your email address will not be published.