How to Add Facebook Conversion Pixel to Magento – Part 2

Hello Everyone,

In our previous post, we have discussed how to add Facebook pixel code on Magento without an extension. We showed how to add all base and standard events on head.phtml file of Magento. But if you want to track conversions accurately on Facebook, you should not place all base and standard events on head.phtml file! In this post, we are going to show, how you can add different Facebook Pixel Codes in different Magento files (head.phtml and success.phtml).

In we consider previous scenario, whenever a visitor clicks on the Facebook ads and lands on a page, all base and standard events are fired and hence we are not getting accurate data in our Facebook Ads Manager. We have checked it for last couple of days and here you can see conversion data (which is not accurate)!

In order to make this work, we have brainstormed about this and finally we have found out that we need to set different pixel codes on different pages. Means, in head.phtml file, we can just add the base code with 2 standard events called PageView and ViewContent

Normally head.phtml file can be found under:

www/app/design/frontend/(Your theme*)/default/template/page/html

Here is the code that is now placed in head.phtml file of our client’s Magento site. Remember, Facebook pixel code should be place before the </head> tag. Now many visitors who read this blog post asked me that they couldn’t find the </head> tag in head.phtml. Don’t worry, you don’t have to search for </head> tag! When you are adding a script in head.phtml, it should be placed before the end of </head> tag.

Now whenever a Facebook visitor clicks on ads on Facebook and lands on index or home page of our client’s site, two standard events will be fired : PageView and ViewContent

and if they purchase anything, they will be landed on success page which is actually success.phtml file.

Normally success.phtml file can be found under:

www/app/design/frontend/(Your theme*)/default/template/checkout

So, in order to track accurate conversions on Facebook, we need to add purchase/lead standard events in success.phtml file

Remember, Facebook pixel code should be place before the </head> tag. Now many visitors who read this blog post asked me that they couldn’t find the </head> tag in success.phtml. Don’t worry, you don’t have to search for </head> tag! When you are adding a script in success.phtml, it should be placed before the end of </head> tag.

You can add Facebook conversion pixel at the end of the </div> and do a test purchase.

<div class=”buttons-set”>
<button type=”button” class=”button” title=”<?php echo $this->__(‘Continue Shopping’) ?>” onclick=”window.location='<?php echo $this->getUrl() ?>'”><span><span><?php echo $this->__(‘Continue Shopping’) ?></span></span></button>
</div>

Facebook conversion code can be place here (at the end of </div>)

When you land on success.phtml page after the test purchase, immediately check the source code with right mouse click -> “view page source” to find out whether it’s been placed before the </head> tag. Normally adding script in head.phtml or success.phtml will be placed before the </head> tag.

Here is the code that is now placed in success.phtml file of our client’s Magento site.

Let me again demonstrate the full scenario here

When a visitor clicks on Facebook ads and lands on our client’s Magento site, two standard events will be fired : PageView and ViewContent

Now if they purchase anything, they will be landed on Success Page and three standard events will be fired: PageView, Purchase and Lead

If we customize column in Facebook ads manager, we can see how many leads our client got from the Facebook ad since yesterday (new code was implemented yesterday).

As you can see there is no lead/purchase yet which is good as it means there is no wrong conversion data.

We will wait for couple of days to get actual conversion data.

Now as you may already know, there are 9 standard events on Facebook. If you want to track different events then you need to use them accordingly. Suppose, you want to track people who add your products to the cart. In this scenario, you can edit cart.phtml and add “AddToCart” standard event within your Facebook pixel base code.

If you follow these steps, we believe you will have accurate lead/conversion data in your Facebook ads manager. As you can see there is no need to install an extension.

About Ekhlas Uddin Jewel

Ekhlas Uddin Jewel is Google Adwords certified individual & SEO, SEM, SMM specialist from Bangladesh. He is the founder of SEO-Service-Provider.Org. For large SEO/Adwords project(s), please feel free to contact him.

• 
• 
• 
• 
• 
•