In Part 1 of this series, we covered the basics of implementing tracking pixel for a Magento store. In this section of our multi part guide to implementing the Facebook tracking pixel, we will cover how to track the add to cart action. This will require a basic understanding of javascript, and potentially, observers and events in Magento. Your Magento theme may handle the add to cart action in one of two common ways: either via an AJAX request or requiring the user load the view cart page. If your Magento site does require the user to load the view cart page, I would strongly suggest creating your own Magento module so that you can separate your code from your theme’s code. However, creating your own custom Magento module will not be discussed in this guide.
In Part 1 we discussed customizing the javascript snippets depending on how your catalog information is being submitted to Facebook, as well as how your products are configured within Magento (simple vs configurable products). The code snippets below will cover implementation for a catalog and store that is composed of simple products only.
AJAX Add to Cart
If your Magento theme handles the add to cart action with AJAX requests, where the user remains on the product page, then a javascript snippet will need to be added to the product page. This will be easiest to implement by altering the product view template. The snippet would need to look similar to the code below.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20if%20(typeof%20jQuery%20!%3D%3D%20'undefined')%20%7B%0A%20%20%20jQuery('addToCartSelector').click(function%20()%20%7B%0A%20%20%20%20%20fbq('track'%2C%20'AddToCart'%2C%20%7B%0A%20%20%20%20%20%20%20content_ids%3A%20'%3C%3Fphp%20echo%20%24_product-%3EgetId()%3B%20%3F%3E'%2C%0A%20%20%20%20%20%20%20content_type%3A%20'product'%2C%0A%20%20%20%20%20%20%20value%3A%20%3C%3Fphp%20echo%20%24_product-%3EgetPrice()%3B%20%3F%3E%2C%0A%20%20%20%20%20%20%20currency%3A%20'%3C%3Fphp%20echo%20Mage%3A%3Aapp()-%3EgetStore()-%3EgetCurrentCurrencyCode()%3B%20%3F%3E'%0A%20%20%20%20%20%7D)%3B%0A%20%20%20%7D)%3B%0A%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
The snippet above assumes that the Facebook tracking pixel library has been initialized (“fbq”) and that there is a HTML element on the page that will be clicked to add a product to cart. In order for the click event to be associated with the HTML element the jQuery select “addToCartSelector” will need to be customized to your site or theme. A common select for many themes is “div.add-to-cart > .btn-cart”. When the add to cart button is clicked and this javascript is loaded, the Facebook tracking pixel library will push the product’s ID and price.
View Cart Redirect
Instead, if your Magento theme requires the user to load the view cart page after adding a product to cart, then you will have to implement an observer to temporarily store the product in a session variable as well as add a javascript snippet to the view cart page. After a product has successfully been added to a user’s cart Magento will dispatch the “checkout_cart_add_product_complete” event. This is the event that the observer will have to be associated with in order to capture which product was added, which will require you to add to or add an events section your theme’s appropriate “config.xml” file as well as add an observer class or a method to an existing observer.
Adding the event to the “config.xml” file will look similar to the XML below.
<frontend>
<events>
<checkout_cart_add_product_complete>
<observers>
<yourPackage_yourTheme_yourObserverMethod>
<class>yourPackage_yourTheme/observer</class>
<method>yourObserverMethod</method>
</yourPackage_yourTheme_yourObserverMethod>
</observers>
</checkout_cart_add_product_complete>
</events>
</frontend>
Within an observer or new observer class, which would be typically be found or created at a path like “app/code/local/<your package>/<your theme>/Model/Observer.php”, you would then add a method that temporarily stores the product that was added to cart in a Magento session variable. Below is an example of a such a method.
public function yourObserverMethod()
{
$product = Mage::getModel('catalog/product')->load(Mage::app()->getRequest()->getParam('product', 0));
$varienObject = new Varien_Object(array(
'id' => $product->getId(),
'sku' => $product->getSku(),
'price' => $product->getPrice(),
));
Mage::getModel('core/session')->setProductToShoppingCart($varienObject);
return $this;
}
Finally, on the view cart page you will need to add a section of code that will access the session variable and complete the javascript tracking snippet wit the appropriate information. Below is an example of this code using the session variable “ProductToShoppingCart” which was set in the snippet above.
<?php $product = Mage::getModel('core/session')->getProductToShoppingCart();
?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20fbq('track'%2C%20'AddToCart'%2C%20%7B%0A%20%20%20content_ids%3A%20'%3C%3Fphp%20echo%20%24product-%3EgetId()%3B%20%3F%3E'%2C%0A%20%20%20content_type%3A%20'product'%2C%0A%20%20%20value%3A%20%3C%3Fphp%20echo%20%24product-%3EgetPrice()%3B%20%3F%3E%2C%0A%20%20%20currency%3A%20'%3C%3Fphp%20echo%20Mage%3A%3Aapp()-%3EgetStore()-%3EgetCurrentCurrencyCode()%3B%20%3F%3E'%0A%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
In the next section of this guide, we will discuss tracking the ‘Purchase’ event.
The post How to Implement Facebook Tracking Pixel in Magento – Part 2: AddToCart appeared first on Vertical Rail.