This post demonstrates how to add all standard events on Magento. To find out final version please check: How to Add Facebook Conversion Pixel to Magento – Part 2
Magento is not like Woocommerce. There are many things you need to study on Magento! Of course, it’s also applicable for WordPress but in my personal opinion, WordPress is much more friendlier than Magento. Moreover, there are tons of helpful tutorials on almost every topic on WordPress. Unfortunately, there are hardly good tutorials on Magento and it’s extensions!
Well, I was trying to add Facebook’s new conversion pixel code for one of my client’s Magento site. As I never did that before, I was hoping to find one or two Magento extensions that might solve the issue. But as many of you know by now, Facebook introduced new Facebook conversion pixel code known as Facebook Pixel Code and it’s more advanced that the older one, most of the existing Magento extensions don’t support this new Facebook Pixel Code. As a result, I have to find another way to add this Facebook conversion pixel code on Magento site.
As I am not a coder or advanced user of Magento, first I tried to look at Youtube (in case there’s one or two helpful video tutorials) with this search: How to Add Facebook Conversion Pixel to Magento
I found many video tutorials but none of them are (new) user friendly! They are all built for coders or developers.
As I didn’t get much help from Youtube so I tried following searches on Google:
Facebook new conversion tracking placement in Magento
How to add Facebook new conversion pixel in Magento
Add Facebook conversion pixel to Magento
How to add Facebook pixel on Magento
How to add Facebook’s new pixel code in Mangeto
How to add Facebook pixel code on Magento
After checking couple of articles, I have found a clue where to add the code. At that time, I don’t need to install a Magento extension to place Facebook Pixel Code. I can just paste the code in a file called head.phtml and it will work like a charm!
For your information, I have a Magento demo site installed in locathost (my PC). I also have “Facebook Pixel Helper” installed in Chrome browser. Now I can test Facebook pixel code on localhost with Facebook pixel helper. If I see any success, I would ask my client to add the code in his site. Here is the pixel code for my client that I generated from Facebook ad campaign:
If you notice above code closely, you will see there are no standard events added in the code. If you don’t know what are standard events and how do you use them, please check this article: https://www.facebook.com/business/help/402791146561655
So I customize default Facebook Pixel Code and added all standard events. I don’t want to customize the code again for some events in the forthcoming days and hence I added all standard events. Now Facebook pixel code looks like following:
Okay great! Now I need to paste this code in head.phtml
head.phtml is the header file of Magento. Facebook Pixel Code will only work if you place them in the <head> section.
Here is the location of head.phtml :
*Your theme = Magento theme name. If you install Magento in your PC (localhost) then theme name should be “base”
After placing the code in head.phtml, it looks like following:
Here is the final part. After saving head.phtml file, I need to test the site with “Facebook Pixel Helper” addon. I check it and it seems everything is in green! I love green. Green means everything is cool!
As everything seems perfect, I mailed my client (cartridgeonline) the code and asked him to add the code in his site’s head.phtml file.
If you want to track Facebook conversion data accurately you need to check this post: http://www.seo-service-provider.org/blog/magento/add-facebook-conversion-pixel-magento-part-2/
To provide you better view, we have made following video tutorial on “How to Add Facebook Conversion Pixel to Magento”