Add Facebook's Custom Audience Pixel Code into Magento

by user28587   Last Updated February 01, 2018 11:09 AM

I need to add a Custom Audience Pixel Code for Facebook into my Magento site. The instructions say to paste this inbetween the tags, which is simple with basic websites but a lot more complex with Magento.

Any idea where to add this?



Answers 3


I would make a module - let's say Yourcompany_FbCode

app/code/local/Yourcompany/FbCode/etc/config.xml :

<?xml version="1.0"?>
<config>
    <modules>
        <Yourcompany_FbCode>
            <version>0.1.0</version>
        </Yourcompany_FbCode>
    </modules>
    <global>
        <helpers>
            <yourcompany_fbcode>
                <class>Yourcompany_FbCode_Helper</class>
            </yourcompany_fbcode>
        </helpers>
    </global>
    <frontend>
        <layout>
            <updates>
                <yourcompany_fbcode>
                    <file>yourcompany_fbcode.xml</file>
                </yourcompany_fbcode>
            </updates>
        </layout>
    </frontend>
</config>

app/design/frontend/base/default/layout/yourcompany_fbcode.xml :

<layout version="1.0.0">
    <default>
        <reference name="before_body_end">
            <block type="core/template" name="fbpixel.block" after="-" template="yourcompany/fbcode/fbpixel.phtml">
                <action method="setCacheLifetime"><s>0</s></action>
            </block>
        </reference>
    </default>
</layout>

app/design/frontend/base/default/template/yourcompany/fbcode/fbpixel.phtml :

(Your fb pixel code goes in here - this is the example code from fb)

<!-- Custom Audience Pixel Code -->
<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');
    // Insert Your Custom Audience Pixel ID below.
    fbq('init', '<FB_PIXEL_ID>');
    fbq('track', 'PageView');
</script>
<!-- Insert Your Custom Audience Pixel ID below. -->
<noscript><img height="1" width="1" style="display:none"
               src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1"
        /></noscript>
<!-- End Custom Audience Pixel Code -->

app/etc/modules/Yourcompany_FbCode.xml :

<?xml version="1.0"?>
<config>
    <modules>
        <Yourcompany_FbCode>
            <active>true</active>
            <codePool>local</codePool>
        </Yourcompany_FbCode>
    </modules>
</config>

app/code/local/Yourcompany/FbCode/Helper/Data.php :

<?php

class Yourcompany_FbCode_Helper_Data extends Mage_Core_Helper_Abstract {


}

And that's it - your pixel will be inserted into every page on the site, at the bottom to help with loading speed.

AreDubya
AreDubya
July 28, 2015 22:56 PM

It depends upon what do you want to achieve, there are several ways you can do it in Magento. Either you can create a custom module or copy paste the given pixel tracking code in head.phtml or footer.phtml. Both these methods will install your custom audience pixel tracking on your Magento site.

If you chose latter, just make sure you add this in your custom theme instead of base theme because base theme will be overwritten with your next Magento upgrade.

But bear in mind that custom facebook audience pixel tracking does come with standard and custom events which is far more work than adding pixel tracking code in head or footer section of your Magento site. For more information regarding these events use the following link

https://developers.facebook.com/docs/ads-for-websites/tag-api

And if you are interested in implementing all the events, the below module can help you achieve this on your Magento store -:

http://www.scommerce-mage.co.uk/magento-facebook-conversion-audience-tracking.html

Hope it helps

Cheers S

stevensagaar
stevensagaar
September 01, 2015 21:57 PM

I added the same code code to "Miscellaneous Scripts" in the admin panel system->Configuration->Design->HTML Head. I add this as an answer if some one can see this and explain is it a good practice.

Mujahidh
Mujahidh
March 10, 2016 09:04 AM

Related Questions


importing and exporting tracking

Updated January 25, 2018 06:09 AM

M2 Tracking progress via API

Updated December 03, 2017 08:09 AM



How to implement Custom Order Option in magento

Updated August 06, 2015 14:04 PM