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&amp;cd[value]={{facebookValue}}&amp;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

close
Event - santianoEcommerce - checkoutStep

Event - santianoEcommerce - checkoutStep
Trigger Type : Custom Event
For every step checkout
Event name equals santianoEcommerce

close
Event - santianoEcommerce - orderConfirmation

Event - santianoEcommerce - orderConfirmation
Trigger Type : Custom Event
Thank you for your order
Event name equals santianoEcommerce eventCommand equals orderConfirmation

close
Event - santianoEcommerce - productDetail

Event - santianoEcommerce - productDetail
Trigger Type : Custom Event
When a product page is seen
Event name equals santianoEcommerce eventCommand equals productDetail

close

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

Download

container dependencies