Facebook Pixel with GA4 Ecommerce GTM Template

We all know the pain of setting up an Ecommerce oriented Google Tag Manager container. While this can be a lot of fun and a frustrating task at the same time, I often find myself falling into the well-known trap of “if something can be programmed manually in 2 hours, spend 6 hours to automate it instead”. This led me to develop Simo Ahava’s well known Facebook Pixel template into one that follows 2022’s standards by updating it to be compatible with Google Analytics 4 Ecommerce events. The original documentation of the template can be found here, but just in case that article goes down, I copied its contents here. Please note that I have modified the part about Enchanced Ecommerce to fit my GA4 compatible version of the template. Since Simo have not updated this template since 2020 and also archived the GitHub repository, I took the liberty of copying it so that I can make it available to the public again. You can find my template here.

Description

This template implements the Facebook Pixel on the website. You can use it to load the SDK, initiate the pixel(s), and to send custom and standard events to Facebook with any custom properties and user attributes you wish. The template should be equipped to handle all the functionality of the pixel. Please let me know in the comments if there are features that you think are missing!

Instructions

Here are the features of the pixel, together with some detail on how they work.

In general, when the tag fires, it goes through all the Pixel IDs added to the tag. For each one, it first checks if the pixel has been initialized for the ID. If it hasn’t, it proceeds to initialize it (along with any parameters that can be set with the initialization call). Then, the tag proceeds to do whatever you’ve configured it to do. It will send an event with any properties you have configured, and you can also use the tag to disable things like automatic history event tracking.

NOTE! The pixel DOES NOT automatically send the PageView tracking hit similar to how the Facebook Pixel snippet does. You will need to create a PageView tag to send the page view to Facebook.

Facebook Pixel ID(s)

The first field requires you to add your Facebook Pixel ID. You can add more than one ID by separating each with a comma, e.g. 123456789,234567890.

If you add more than one ID, then the tag will initialize (if necessary) and send the hit to all the pixel IDs listed in the field.

Google Analytics 4 Ecommerce dataLayer integration

If you check this button, then the tag will look in dataLayer for the most recent event. If this event is either view_item, add_to_cart, begin_checkout, add_payment_info, or purchase the tag will automatically derive the following information from the ecommerce object to be sent with the tag.

If the dataLayer does not have an event with these names, or if the ecommerce object doesn’t have a products array, the tag will end with a failure.

Event Name is mapped like this:

  • A view_item event sets event name as ViewContent.
  • An add_to_cart event sets event name as AddToCart.
  • A begin_checkout event sets event name as InitiateCheckout.
  • An add_payment_infoevent sets event name as AddPaymentInfo.
  • A purchase event sets event name as Purchase.

Object Properties are mapped like this:

  • A contents parameter is created from the items array, and it is populated with the item_id and quantity of each product in the latter.
  • content_type is set to product.
  • currency is derived from currency, or set to USD by default.
  • num_items is used in InitiateCheckout and Purchase and is aggregated from the total quantity of all products in the items array.
  • value is calculated by multiplying the price and quantity of each product in the items array, and summing everything up.

NOTE! You can use the Object Properties settings (see below) to override these individual properties, if you are unhappy with how some parts of the automatic integration work.

Here’s an example of how a GA4 Ecommerce object gets mapped into Facebook object properties:

event: "purchase",

 ecommerce: {

  transaction_id: "T_12345",

  affiliation: "Google Merchandise Store",

  value: 25.42,

  tax: 4.90,

  shipping: 5.99,

  currency: "USD",

  coupon: "SUMMER_SALE",

  items: [

   {

    item_id: "SKU_12345",

    item_name: "Stan and Friends Tee",

    affiliation: "Google Merchandise Store",

    coupon: "SUMMER_FUN",

    discount: 2.22, index: 0,

    item_brand: "Google",

    item_category: "Apparel",

    item_category2: "Adult",

    item_category3: "Shirts",

    item_category4: "Crew",

    item_category5: "Short sleeve",

    item_list_id: "related_products",

    item_list_name: "Related Products",

    item_variant: "green",

    location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",

    price: 9.99,

    quantity: 1 },

   {

    item_id: "SKU_12346",

    item_name: "Google Grey Women's Tee",

    affiliation: "Google Merchandise Store",

    coupon: "SUMMER_FUN",

    discount: 3.33,

    index: 1,

    item_brand: "Google",

    item_category: "Apparel",

    item_category2: "Adult",

    item_category3: "Shirts",

    item_category4: "Crew",

    item_category5: "Short sleeve",

    item_list_id: "related_products",

    item_list_name: "Related Products",

    item_variant: "gray",

    location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",

    price: 20.99,

    promotion_id: "P_12345",

    promotion_name: "Summer Sale",

    quantity: 2 }]

// BECOMES

{

 content_type: 'product',

 currency: 'USD',

 num_items: 2,

 contents: [{"id":"SKU_12345","quantity":1},{"id":"SKU_12346","quantity":2}], value: 28.35}

}

Event Name

If you haven’t selected the GA4 Ecommerce integration, you can choose an event name from the list of standard events. You can also specify a custom event name, or you can use a Google Tag Manager variable to provide the event name dynamically.

If this field gets the value false (most commonly through a Google Tag Manager variable), the pixel will download the SDK, but it will not initialize nor send any hits to Facebook.

Enable Advanced Matching

If you check this box, then a new group called Customer Information Data Parameters appears.

Data Processing Options

You can add supported data processing options to this field. They are evaluated on a tag-by-tag basis, and are set for all pixel IDs of any given tag.

Customer Information Data Parameters

You can use this to set pre-defined parameters for Facebook’s Advanced Matching feature.

Object Properties

You have three options for adding object properties to the hit.

If you checked the GA4 Ecommerce integration, as mentioned before, some properties will be automatically populated.

You can also load a properties object using a Google Tag Manager variable that returns an object with key-value pairs that will then be added to the hit.

Finally, you can add properties manually using the table in the tag. Each row represents one property.

You can add pre-defined properties and custom properties. Read this for more information.

NOTE! If you define properties using multiple sources (e.g. Enhanced Ecommerce integration AND variable AND the table), then conflicts are resolved in the order of table > variable > GA4 Ecommerce. In other words, if you set content_type in the table, it will override content_type set in a variable or the GA4 Ecommerce integration.

More Settings

You can check the Disable Automatic Configuration to prevent the pixel from automatically listening to clicks or collecting page metadata.

You can check the Disable History Event Tracking to prevent the pixel from automatically tracking pushState and replaceState history events.

You can add an Event ID to deduplicate hits sent from the website and via server-side tracking.

David Bethlen 2022