You are here
Facebook Pixel
description
Let's start with the funny part... the Facebook Pixel is not a pixel but a javascript that allows you to retarget users based on their previous visits on your website as well as their behavior on your ecommerce website.
This santianoVendor GTM configuration automatically plugs with all modules and vendors from santiano and is using santianoEcommerce standards as his feeding method.
To setup the Facebook Pixel you just need to change your facebookAccountId
setup
Please refer to the container setup instructions
tagging plans
productDetail
productDetail
To record impressions of detail pages
<script>
// the santianoEcommerce in case of a productDetail
dataLayer.push({
'event': 'santianoEcommerce',
'eventCommand': 'productDetail',
// always defined
'currencyCode': 'EUR',
// what currency here ? https://en.wikipedia.org/wiki/ISO_4217
// here is the standard ProductList of each individual productObject:
'productList': [{
'productName': '[productName]', // string -The unique Name of that product
'productID': '[productID]', // string- The product unique ID
'productUnitPrice': '19.99', // floating - the price of that product
'productCategory1' : '[productCategory1]', // string -
'productCategory2' : '[productCategory2]', // string -
'productCategory3' : '[productCategory3]', // string -
'productCategory4' : '[productCategory4]', // string -
'productCategory5' : '[productCategory5]', // string -
'productBrand': '[productBrand]', // string - Brand of the product
'productVariant': '[productVariant]', // string -
},
{
// and so on if there are multiple products.
}]
});
</script>
close
cartProductAdded
cartProductAdded
When one or more products are added to cart
// the santianoEcommerce in case of a cartProductAdded
dataLayer.push({
'event': 'santianoEcommerce',
'eventCommand': 'cartProductAdded',
// always defined
'currencyCode': 'EUR',
// what currency here ? https://en.wikipedia.org/wiki/ISO_4217
// here is the standard ProductList of each individual productObject:
'productList': [{
'productName': '[productName]', // string -The unique Name of that product
'productID': '[productID]', // string- The product unique ID
'productUnitPrice': '19.99', // floating - the price of that product
'productCategory1' : '[productCategory1]', // string -
'productCategory2' : '[productCategory2]', // string -
'productCategory3' : '[productCategory3]', // string -
'productCategory4' : '[productCategory4]', // string -
'productCategory5' : '[productCategory5]', // string -
'productBrand': '[productBrand]', // string - Brand of the product
'productVariant': '[productVariant]', // string -
// added quantity
'productQuantity': 1 // The quantity of product
},
{
// and so on if there are multiple products.
}]
});
close
checkoutStep
checkoutStep
For every numbered and named step of your checkout funnel
// the santianoEcommerce in case of a checkoutStep
dataLayer.push({
'event': 'santianoEcommerce',
'eventCommand': 'checkoutStep',
'currencyCode': 'EUR',
// checkout steps specific variables
'checkoutStepNumber': 1, // Whole positive number, starts with 1
'checkoutStepName' : '[checkoutStepName]', // string
'checkoutStepOption': '[checkoutStepOption]', // string
// here is the standard ProductList of each individual productObject:
'productList': [{
'productName': '[productName]', // string -The unique Name of that product
'productID': '[productID]', // string- The product unique ID
'productUnitPrice': '19.99', // floating - the price of that product
'productCategory1' : '[productCategory1]', // string -
'productCategory2' : '[productCategory2]', // string -
'productCategory3' : '[productCategory3]', // string -
'productCategory4' : '[productCategory4]', // string -
'productCategory5' : '[productCategory5]', // string -
'productBrand': '[productBrand]', // string - Brand of the product
'productVariant': '[productVariant]', // string -
// how many products are in the cart at that moment ???
'productQuantity': 1 // The quantity of product
},
{
// and so on if there are multiple products.
}]
});
close
orderConfirmation
orderConfirmation
The favorite moment !!! The Full Receipt of the order with its orderVariables and the full content of the products purchased.
// the santianoEcommerce in case of a orderConfirmation
dataLayer.push({
'event': 'santianoEcommerce',
'eventCommand': 'orderConfirmation',
'currencyCode': 'EUR',
// orderConfirmation specific variables
'orderID': '1234569-ABCDEFG', // string - the ID of the Order
'orderRevenue' : '695.00', // floating number - The Revenue of the order
'orderTax' : '579.17', // floating number - Tax for that order
'orderShippingCost' : '15.00', // floating number - The Cost of shipping
'orderShopName' : '[orderShopName]', // string -
'orderCoupon' : '[orderCoupon]', // string - The Coupons used for that order
// here is the standard ProductList of each individual productObject:
'productList': [{
'productName': '[productName]', // string -The unique Name of that product
'productID': '[productID]', // string- The product unique ID
'productUnitPrice': '19.99', // floating - the price of that product
'productCategory1' : '[productCategory1]', // string -
'productCategory2' : '[productCategory2]', // string -
'productCategory3' : '[productCategory3]', // string -
'productCategory4' : '[productCategory4]', // string -
'productCategory5' : '[productCategory5]', // string -
'productBrand': '[productBrand]', // string - Brand of the product
'productVariant': '[productVariant]', // string -
// how many products are puchased ???
'productQuantity': 1 // The quantity of product
},
{
// and so on if there are multiple products.
}]
});
close
gtm tags
Facebook - Ecommerce Events
Facebook - Ecommerce Events
Tag Type : Custom HTML
This is the Ecommerce part of the Facebook Pixel which sends to facebook what product has been viewed with productDetail, added to cart, in checkout, or ordered.
<script>
// Assuming that the Top Part of the facebook tag is still fired with the PageView Tag :)
fbq('track', {{facebookEcommerceEvent}}, {
content_type: 'product',
value: {{facebookValue}},
currency: {{currencyCode}},
contents: {{facebookEcommerceProducts}}
});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={{facebookAccountId}}&ev={{facebookEcommerceEvent}}&noscript=1&cd[value]={{facebookValue}}&cd[currency]={{currencyCode}}"
/></noscript>
close
Facebook - Pageview Pixel
Facebook - Pageview Pixel
Tag Type : Custom HTML
This tag calls the So called the FB Pixel which is not actually a pixel but some javascript as you can see below. this tag should be included in all relevant pages you want to retarget with Facebook
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', {{facebookAccountId}});
fbq('track', "PageView", {
// any custom dataLayerVariable goes here
// Yes you can any vars you want here :)
});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={{facebookAccountId}}&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
close
gtm triggers
Event - santianoEcommerce - cartProductAdded
Event - santianoEcommerce - cartProductAdded
Trigger Type : Custom Event
When a product is added to cart
Event name equals santianoEcommerce
eventCommand equals cartProductAdded
Event - santianoEcommerce - checkoutStep
Event - santianoEcommerce - checkoutStep
Trigger Type : Custom Event
For every step checkout
Event name equals santianoEcommerce
Event - santianoEcommerce - orderConfirmation
Event - santianoEcommerce - orderConfirmation
Trigger Type : Custom Event
Thank you for your order
Event name equals santianoEcommerce
eventCommand equals orderConfirmation
Event - santianoEcommerce - productDetail
Event - santianoEcommerce - productDetail
Trigger Type : Custom Event
When a product page is seen
Event name equals santianoEcommerce
eventCommand equals productDetail
gtm variables
checkoutStepNumber
checkoutStepNumber
Variable Type : Data Layer Variable
Number of the cjeckout step, always starts with 1
Data Layer Variable Name : checkoutStepNumber
Data Layer Versison : Version 2
close
currencyCode
currencyCode
Variable Type : Data Layer Variable
Currency code... 'EUR' , 'USD' , ...
Data Layer Variable Name currencyCode
Data Layer Version : Version 2
close
eventCommand
eventCommand
Variable Type : Data Layer Variable
santiano.io comes with its specific eventCommand : its naming scheme facilitates management and maintenance of events tags and ecommerce tags.
Data Layer Variable Name : eventCommand
Data Layer Version : Version 2
close
facebookAccountId
facebookAccountId
Variable Type : Constant
Your Facebook Account ID is kinda required
Value : Replace with your Facebook account ID
close
facebookEcommerceEvent
facebookEcommerceEvent
Variable Type : Lookup Table
This is the event translation between santianoEcommerce eventCommand values and the expected Facebook Ecommerce Events
Input Variable : eventCommand
Input -> Output
'productDetail' -> 'ViewContent'
'cartProductAdded' -> 'AddToCart'
'checkoutStep' -> 'InitiateCheckout'
'orderConfirmation' -> 'Purchase'
close
facebookEcommerceProducts
facebookEcommerceProducts
Variable Type : Custom Javascript
Gets the productList object from santianoEcommerce and transforms it for Facebook Ecommerce events
function() {
// grabs the productList from the santiano.io Ecommerce Events and prepares it for Mark Z.
var eventCommand = {{eventCommand}};
var productList = {{productList}};
var productListLength = {{productListLength}};
var facebookEcommerceProducts = [];
var i;
if (eventCommand == 'productDetail' ||
eventCommand == 'cartProductAdded' ||
eventCommand == 'checkoutStep' ||
eventCommand == 'orderConfirmation') {
for ( i = 0; i < productListLength; i++ ) {
// 5 level category magic
var fbCategoryMagic = [];
if (productList[i].productCategory1 != undefined) {
fbCategoryMagic.push(productList[i].productCategory1);
}
if (productList[i].productCategory2 != undefined) {
fbCategoryMagic.push(productList[i].productCategory2);
}
if (productList[i].productCategory3 != undefined) {
fbCategoryMagic.push(productList[i].productCategory3);
}
if (productList[i].productCategory4 != undefined) {
fbCategoryMagic.push(productList[i].productCategory4);
}
if (productList[i].productCategory5 != undefined) {
fbCategoryMagic.push(productList[i].productCategory5);
}
// Common Facebook Product Object formating :)
var facebookIndividualProduct = {
'content_name': productList[i].productName,
'id': productList[i].productId,
'item_price': productList[i].productUnitPrice,
'content_category': fbCategoryMagic,
};
if ( eventCommand == 'cartProductAdded' ||
eventCommand == 'checkoutStep' ||
eventCommand == 'orderConfirmation') {
// Specific cases with these eventCommand that require a quantity
facebookIndividualProduct.quantity = productList[i].productQuantity;
}
// My facebook individual Product is ready, I push to the FB product List
facebookEcommerceProducts.push(facebookIndividualProduct);
} // End of For Loop
return facebookEcommerceProducts;
} else {
// No products should be sent to Facebook otherwise
return [];
} // end of If statement
} // end of function
close
orderRevenue
orderRevenue
Variable Type : Data Layer Variable
Revenue of that order
Data Layer Variable Name : orderRevenue
Data Layer Version Version : Version 2
close
productList
productList
Variable Type : Data Layer Variable
One of the most important variable of all santianoEcommerce. The productList is an array of productObjects used along all ecommerce events happening on an ecommerce platform.
Data Layer Variable Name : productList
Data Layer Version : Version 1 !!!!!! Yes version 1
close
productListLength
productListLength
Variable Type : Custom Javascript
Tells us how many distincts products are in the productList
// returns the number of distinct products in the productList Object
function() {
var productList = {{productList}};
if (productList === undefined) {
return 0;
} else if (productList === "") {
return 0;
} else if (productList === []) {
return 0;
} else {
return productList.length
}
}
close
Add comment