With this multi part guide, we will cover the basics of implementing the Facebook tracking pixel for a Magento store. Our end goal is to track user interactions with a site to power dynamic re-marketing ads. Note: In several areas of the guide, I make the assumption that you are familiar with concepts like javascript, php and how the basic components of Magento work. The code snippets that are include are intended to be copied and altered to fit your specific needs. For most stores, the ‘ViewContent’, ‘AddToCart’, and ‘Purchase’ events should be sufficient to capture an audience and their viewing preferences. In this first part, I will cover placing the Facebook bootstrap script and the ‘ViewContent’ event for a product page.
Before any event tracking, the Facebook library must be loaded on the page. It is best practice to load the init script in the head of every page, which can be accomplished in a few different ways. The simplest way is to copy the init script to “System” > “Configuration” > “Design” > “Miscellaneous Scripts”. You could also alter your theme’s “head.phtml” file, which is often located in a path like “app/design/frontend/<your package>/<your theme>/template/page/html/head.phtml”. The script should be provided from Facebook and after placing look like the following.
<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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', 'Your Pixel ID');
fbq('track', "PageView");
</script>
The ‘ViewContent’ tracking event for a product page will differ depending on how you are submitting your catalog to Facebook and if your products are primarily configurable or simple. In general, the event is configured like the following.
<script>
fbq('track', 'ViewContent', {
content_ids: 'product ID' or [list of product IDs],
content_type: 'product' or 'product_group',
value: dollar value of product,
currency: 'your stores currency'
});
</script>
Placing your script on the product page will require you to alter your themes product template or add a custom block. If your store uses simple products, the tracking event can be updated with the following.
<script>
fbq('track', 'ViewContent', {
content_ids: '<?php echo $_product->getId(); ?>',
content_type: 'product',
value: <?php echo $_product->getPrice(); ?>,
currency: '<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>'
});
</script>
If your Facebook catalog is being submitted with SKUs and not product IDs, then the you will have to replace “getId()” with “getSku()”.
For Magento stores with configurable or grouped products, the ‘ViewContent’ event will have to provide the ID or SKU of the parent product or a list of simple products. This will vary with how you need to match the information submitted to the Facebook catalog. If your are supplying catalog information with groupings where the configurable or group product’s ID or SKU is the “item_group_id” (which is common for Google Merchant feeds), then the ‘content_type’ should be changed to ‘product_group’. However, if you need to supply the list of simple product IDs or SKUs you will have to add a little more code to customize the event. The snippet below collects the product IDs of simple products under a configurable or grouped products then submits a list of IDs with ‘content_ids’.
<?php
$contentIds = array();
$simpleProducts = $product->getTypeInstance()->getUsedProducts(null, $product);
foreach ($simpleProducts as $simpleProduct)
{
$contentIds[] = $simpleProduct->getId();
}
?>
<script>
fbq('track', 'ViewContent', {
content_ids: [<?php echo "'" . implode("','", $contentIds) . "'" ?>],
content_type: 'product',
value: <?php echo $_product->getPrice(); ?>,
currency: '<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>'
});
</script>
In the next section of this guide we will cover the ‘AddToCart’ event with tracking for both AJAX actions and page load actions.
The post How to Implement Facebook Tracking Pixel in Magento – Part 1: ViewContent appeared first on Vertical Rail.