This article covers how to add tracking pixels to various parts of your Magento store. If you’re running a successful online business, you’ll undoubtedly need to integrate with third parties at some point – most of which require you install their tracking pixel in various parts of your Magento store.
If you’re looking for our free Facebook Tracking Pixel extension for Magento, click here.
Setup tracking pixel templates in your theme
When installing tracking pixels, you may be tempted to hack some existing Magento theme files. This isn’t necessarily a bad solution, but I prefer to create a template file specifically for tracking pixels. This makes it easier to find them later.
To start you’ll want to edit the below file:
app/design/frontend/{your_package}/{your_theme}/layout/local.xml
If this file doesn’t exist, simply create a blank xml file with the name local.xml in the layout folder.
Then add the below code:
<layout version="0.1.0">
<default>
<reference name="after_body_start">
<block type="core/template" name="page.after_body_start.tracking_pixels"
as="tracking_pixels" template="page/html/after_body_start/tracking_pixels.phtml"/>
</reference>
<reference name="before_body_end">
<block type="core/template" name="page.before_body_end.tracking_pixels"
as="tracking_pixels" template="page/html/before_body_end/tracking_pixels.phtml"/>
</reference>
</default>
<checkout_onepage_success>
<reference name="checkout.success">
<block type="core/template" name="checkout.success.tracking_pixels"
as="checkout_tracking_pixels" template="checkout/success/tracking_pixels.phtml" />
</reference>
</checkout_onepage_success>
</layout>
You can see we’ve added 3 new template files:
- page.after_body_start.tracking_pixels – just as you’re guessing, this file will automatically insert content after the starting <body> tag on the page.
- page.before_body_end.tracking_pixels – the inverse of #1, this installs tracking pixels immediately prior to the closing <body> tag.
- checkout.success.tracking_pixels – this file will show tracking pixels on the checkout success page (you need to do a little more to show this pixel [detailed below])
So, #1 & #2 are used to track visits to your sites pages while #3 is used for tracking conversions / purchases. Whether you install a pixel in #1 or #2 is up to you – most pixels will come with installation instructions detailing which to use.
After Body Start & Before Body End Pixels
There’s not much to these pixels, you can simply create a .phtml file in the given locations and begin adding your own code. The way Magento works, any files added to the after_body_start or before_body_end references are automatically included in your page html
Add files in:
app/design/frontend/{your_package}/{your_theme}/template/page/html/after_body_start/tracking_pixels.phtml
app/design/frontend/{your_package}/{your_theme}/template/page/html/before_body_end/tracking_pixels.phtml
Adding Conversion Tracking Pixels
Add the files
This one is a little more complicated. First we need to add our file to the below location:
app/design/frontend/{your_package}/{your_theme}/template/checkout/success/tracking_pixels.phtml
We then need to edit
app/design/frontend/{your_package}/{your_theme}/template/checkout/success.phtml
and add the below code to the bottom of the file:
<?php echo $this->getChildHtml('checkout_tracking_pixels'); ?>This includes our new file (checkout/success/tracking_pixels.phtml) in the output of the success page. This line is very important, without it, all your below changes will have no effect!
Include conversion parameters
Usually with checkout pixels, we need to include some data. Common information is:
- Grand Total
- Discount Amount
- Shipping Amount
- Currency
- Customer Email
- Order Number
- Items
We’ll use some snippets from the Google Trusted Stores conversion pixel to show how to print each of these:
<?php /** * @author Alan Barber <[email protected]> * Tracking pixels to be displayed on success page */ //Get the last order ID $order_id = Mage::getSingleton('checkout/session')->getLastOrderId(); /** @var Mage_Sales_Model_Order $order */ //Get the last order $order = Mage::getModel('sales/order')->load($order_id); //Get the order number or 'increment id' $order_number = $order->getIncrementId(); //Get the grand total $grand_total = round($order->getGrandTotal(), 2); //Get the currency code$currency_code = Mage::app()->getStore()->getCurrentCurrencyCode(); //Get the discount $discount_amount = round($order->getDiscountAmount(),2); if (!$discount_amount) { $discount_amount = 0.00; } //Get the shipping amount$shipping_amount = round($order->getShippingAmount(),2); //Get the customer email $email = $order->getCustomerEmail(); ?> <!-- Begin google tracking pixel --> <div id="gts-order" style="display:none;" translate="no"> <!-- start order and merchant information --> <span id="gts-o-id"><?php echo $order_number ?></span> <span id="gts-o-domain">www.cadence-labs.com></span> <span id="gts-o-email"><?php echo $email ?></span> <span id="gts-o-country"><?php echo $order->getBillingAddress()->getCountryId() ?></span> <span id="gts-o-currency"><?php echo $currency_code ?></span> <span id="gts-o-total"><?php echo $grand_total ?></span> <span id="gts-o-discounts"><?php echo $discount_amount ?></span> <span id="gts-o-shipping-total"><?php echo $shipping_amount ?></span> <!-- end order and merchant information --> <!-- start repeated item specific information --> <!-- item example: this area repeated for each item in the order --> <?php /** @var Mage_Sales_Model_Order_Item $item */ ?> <?php foreach($order->getAllVisibleItems() as $item): ?> <?php /** @var Mage_Catalog_Model_Product $product */ $product = $item->getProduct();?> <span class="gts-item"> <span class="gts-i-name"><?php echo $product->getName() ?></span> <span class="gts-i-price"><?php echo round($item->getPrice(),2) ?></span> <span class="gts-i-quantity"><?php echo round($item->getQtyOrdered()) ?></span> <span class="gts-i-prodsearch-id"><?php echo $product->getSku() ?></span> </span> <?php endforeach; ?> <!-- end item 1 example --> </div>
Ok! There’s a lot going on there; let’s break it down:
Load the main order info
The first few lines do the following:
- Get the last order ID from the session (the last order the customer placed, which is the order we want to track)
- Load all the order data based on this ID
- Get a variety of values from the order, and get the currency code from the current store.
Output the pixel
The next lines begin the actual pixel (the switch from php -> html marks outputting conversion code). You can see we simply print out values from the order
Output the item data
The final lines iterate over the order’s items and print out each item’s individual data. A few notes:
- $order->getAllVisibleItems() – This is the function you want to get all items. This excludes “hidden” items which may be on the order (for example, sub items on a grouped product, or simple items from a configurable product)
- $item->getProduct() – This returns an instance of the product the customer just purchased. You can use this to get all sorts of info, from Product Name, to Product SKU, etc.
- $item->getQtyOrdered() – This returns the quantity of the product the customer ordered
- $item->getPrice() – This is the actual item price the customer checked out with (may differ from the product price if promotions or discounts were applied).
Conclusion
Adding tracking pixels to Magento can be tricky! Hopefully this template gives you a starting point. I also recommend enabling the Check/Money order payment method in System -> Configuration -> Payment Methods so that you can test checkout without using your credit card!
Need help adding tracking pixels to Magento?
We’ve had a lot of experience customizing Magento here at Cadence Labs. If you need help, head over to the Cadence Labs contact page, or email us at [email protected]
My directory structure is different from your example. Magento has a pretty confusing directory structure, so since I use the ultimo theme, I would think that I should have:
app/design/frontend/ultimo/default/page/html/after_body_start/tracking_pixels.phtml
However all “page” I can find is at:
app/design/frontend/ultimo/default/template/page/html to add tracking_pixels.phtml into.
Is this the correct place and why does mine differ from yours? Is this something that changed from old to newer version of magento?
You will need to create page/html/after_body_start – this isn’t a normal directory for Magento, rather a convention I use when appending to before_body_end or after_body_start.
Magento’s theme uses a fallback hierarchy, so I would imagine ultimo/default is different from base/default (it only overrides what it needs to change). For more info see: http://stackoverflow.com/questions/22213665/magento-theme-hierarchy
Hi there. Was it just me or these 2 paths are the same.
app/design/frontend/{your_package}/{your_theme}/template/page/html/after_body_start/tracking_pixels.phtml
app/design/frontend/{your_package}/{your_theme}/template/page/html/after_body_start/tracking_pixels.phtml
Thanks for pointing this out! It has been corrected to:
app/design/frontend/{your_package}/{your_theme}/template/page/html/after_body_start/tracking_pixels.phtml
app/design/frontend/{your_package}/{your_theme}/template/page/html/before_body_end/tracking_pixels.phtml
this post is really helpful. Now my problem is that it gets all items even if I’m already using getAllVisibleItems only in my checkout success page and cart page. It gets two items, one with the price and the other one with 0.00 price.
Nvm, it was resolved. It’s just my cache. Because I’m using getAllitems, then I recently changed it to getAllVisibleItems. Haha! Thanks for this old post. 🙂
is there an issue to get Id/sku for configurable products ?