For now, the Facebook Pixel GTM Template doesn’t support GA4 Ecommerce as input. In this blog post you find 2 scripts that makes it possible to use GA4 Ecommerce as input to the Facebook GTM Template.
- Supports only GA4 Ecommerce
- Supports both GA4 Ecommerce and GA Enhanced Ecommerce
Hopefully the Facebook Template will soon support GA4 Ecommerce as input, and make this blog post redundant.
Google Tag Manager Setup
First, create a Data Layer Variable:
- Data Layer Variable Name: ecommerce
- Data Layer Version: Version 1
This Variable will be used as input in the Custom Javascript Variable.
1. GA4 Ecommerce only
If you have a pure GA4 Ecommerce implementation, this script will convert GA4 Ecommerce to Facebook Ecommerce based on GA4 Ecommerce Events.
Add this script to a Custom Javascript Varible.
In addition, you need to activate the following Variable:
- Event
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
function() { try { var ecom = {{ecom - ecommerce - DLV}}; // Ecommerce Data Layer Version 1 var event = {{Event}}; if(ecom['items'] && ['purchase','add_payment_info','begin_checkout','add_to_cart','view_item','add_to_wishlist'].indexOf(event) > -1) { var items = ecom['items']; var value = ecom.value ? ecom.value : items.reduce(function(memo, item){return memo + parseFloat(item.price*(item.quantity||1))}, 0); var currency = ecom.currency ? ecom.currency : 'USD'; var contents = items.map(function(item) { return { id: item.item_id, quantity: item.quantity||1 }; }); var ecomObjectProps = { content_type: 'product', contents: contents, value: value, currency: currency }; // num_items if (['view_cart','begin_checkout','purchase'].indexOf(event) > -1) { ecomObjectProps.num_items = items.reduce(function(memo, item){return memo+parseInt(item.quantity)}, 0)||1; }; // EXTRA - Track Item Name & Category for add_to_cart & view_item if (['add_to_cart','view_item'].indexOf(event) > -1) { ecomObjectProps.content_name = items.map(function(item){return item.item_name}).join(); ecomObjectProps.content_category = items.map(function(item){return item.item_category}).join(); }; // EXTRA - END } } catch (err) {} return ecomObjectProps; } |
2. GA4 Ecommerce and GA Enhanced Ecommerce
This script supports both GA4 Ecommerce and GA Enhanced Ecommerce. This is handy if your site has both GA4 Ecommerce and Enhanced Ecommerce implemented, or you want a smooth transition from Enhanced Ecommerce to GA4 Ecommerce.
Add this script to a Custom Javascript Varible.
In addition, you need to activate the following Variable:
- Event
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
function() { try { var ecom = {{ecom - ecommerce - DLV}}; // Ecommerce Data Layer Version 1 var event = {{Event}}; if(ecom) { var action; if (ecom.detail) {action = 'detail';} else if (ecom.add) {action = 'add';} else if (ecom.checkout) {action = 'checkout';} else if (ecom.purchase) {action = 'purchase';} var items = action ? ecom[action]['products'] : ecom['items']; if(items && (action || ['purchase','add_payment_info','begin_checkout','add_to_cart','view_cart','view_item','add_to_wishlist'].indexOf(event) > -1)) { var value = ecom.value ? ecom.value : items.reduce(function(memo, item){return memo + parseFloat(item.price*(item.quantity||1))}, 0); var currency = ecom.currency ? ecom.currency : ecom.currencyCode; var contents = items.map(function(item) { return { id: item.item_id||item.id, quantity: item.quantity||1 }; }); var ecomObjectProps = { content_type: 'product', contents: contents, value: value, currency: currency }; // num_items if (['view_cart','begin_checkout','purchase'].indexOf(event) > -1 || ['checkout','purchase'].indexOf(action) > -1) { ecomObjectProps.num_items = items.reduce(function(memo, item){return memo+parseInt(item.quantity)}, 0)||1; }; // EXTRA - Track Item Name & Category for add_to_cart & view_item if (['add_to_cart','view_item'].indexOf(event) > -1 || ['detail','add'].indexOf(action) > -1) { ecomObjectProps.content_name = items.map(function(item){return item.item_name||item.name}).join(); ecomObjectProps.content_category = items.map(function(item){return item.item_category||item.category.split('/')[0]}).join(); }; // EXTRA - END } } } catch (err) {} return ecomObjectProps; } |
Facebook GTM Template Setup
In the Object Properties setting, add the Custom Javascript Variable as input to the Load Properties From Variable (1).
As Event Name you can either use Standard or Custom (2). In this setup Custom is used as input, and here I have mapped implemented GTM Events with Facebook Ecommerce Events using a Lookup Table. How you choose to to this, I leave that to you.
When it comes to Triggers for this Tag, I have GTM Events implemented both for GA4 Ecommerce and Enhanced Ecommerce, and use those Events as Triggers.
Some of the code is inspired by the Facebook Template.
That’s it.
Be the first to comment on "How to use GA4 Ecommerce as Input to the Facebook GTM Template"