1

Trying to add the new Facebook pixel to Magento 1.9.1.1. So it can appear on all pages.

I have added the following to app/design/frontend/rwd/CustomTheme/layout/local.xml between

<?xml version="1.0"?>
  <layout version="0.1.0">
    <default>
      <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/facebook.js</name></action>
      </reference>
    </default>
  </layout>

also tried

<reference name="head">
  <action method="addJs"><script>js/facebook.js</script></action>
</reference>

and have added the following NEW Facebook pixel to js/facebook.js

<!-- Facebook 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');

fbq('init', '1111111');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1111111&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

It fails to load the Facebook pixel in my source code? What have done wrong?

How do you add any script to the head area otherwise?

3 Answers 3

1

I would look at using google tag manager to handle this so when the script changes or you want to add more scripts to the site its all done in the one place.

If you still want to add the script yourself you should not use a js file and create a block instead:

<?xml version="1.0"?>
  <layout version="0.1.0">
    <default>
      <reference name="content">
        <block type="core/template" name="facebook.pixel" as="facebook.pixel" template="page/facebook-pixel.phtml" />
      </reference>
    </default>
  </layout>

and then in skin/frontend/{package}/{theme}/js/facebook.js add your js code.

6
  • Unfortunately I am not familiar with google tag manager. But I did try <action method="addItem"><type>skin_js</type><name>skin/frontend/rwd/CustomTemplate/js/facebook.js</name></action> and <action method="addItem"><type>skin_js</type><name>js/facebook.js</name></action> but it still does not load facebook.js. Would it be problematic to place FB pixel in the app/design/frontend/rwd/CustomTemplate/template/page/html/head.phtml? Dec 9, 2015 at 4:08
  • 1
    Actually just realised the facebook pixel shouldn't be included in a js file as it does some other things, I've just updated my answer on how to add it to a template file
    – rob3000
    Dec 9, 2015 at 4:33
  • I will give that a try. But, what is wrong by placing FB pixel in app/design/frontend/rwd/CustomTemplate/template/page/html/head.phtml? Dec 9, 2015 at 5:05
  • 1
    makes it easier to manage, imagine if you have like 10 different scripts for tracking conversion etc the head.phtml can become very clustered.
    – rob3000
    Dec 9, 2015 at 7:01
  • It makes sense. So I copied the Facebook Pixel Code to facebook-pixel.phtml and placed it under app/design/frontend/rwd/CustomTemplate/template/page/'. Also copied the facebook.js` to skin/frontend/rwd/CustomTemplate/js/. Also added <reference name="head"><block type="core/template" name="facebook.pixel" as="facebook.pixel" template="page/facebook-pixel.phtml" /></reference> to local.xml in <default> area. it still does not show up! Dec 9, 2015 at 14:08
1

Check out: https://github.com/erfanimani/EI_FacebookScripts

It uses a block/template with the script tag and injects it into the head. You can't use addJs because there's variables that need to be injected into the script (using PHP).

1

To make new FB pixel tracking work you need to touch on the different sections of your website -:

Here are the steps to implement the tracking correctly

Step 1

The following piece of code will go in the head section of your theme

<!-- Facebook 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','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '1150333754569860');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1150333754569860&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

You can implement the above using default layout handle with reference head because this needs to be rendered in the head section of your website for all pages.

Step 2

The following piece of code will go in the search and advanced search section of your theme

fbq('track', 'Search');

You can implement the above using catalogsearch_result_index layout handle with reference content.

Step 3

The following piece of code will go in the product detail section of your theme

fbq('track', 'ViewContent');

You can implement the above using catalog_product_view layout handle with reference content.

Step 4

The following piece of code will go in the cart section of your theme

fbq('track', 'AddToCart');

This can be done as part of your event or observer using checkout_cart_product_add_after event

Step 5

The following piece of code will go in the wishlist section of your theme

fbq('track', 'AddToWishlist');

This can be done as part of your event or observer using wishlist_product_add_after event

Step 6

The following piece of code will go in the wishlist section of your theme

fbq('track', 'CompleteRegistration');

This can be done as part of your event or observer using customer_register_success event

Step 7

The following piece of code will go in the checkout section of your theme

fbq('track', 'InitiateCheckout');

You can implement the above using onepagecheckout_index_index layout handle with reference content.

Step 8

The following piece of code will go in the order confirmation section of your theme

fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});

You can implement the above using checkout_onepage_success layout handle with reference content.

Step 9

The following piece of code will go in the checkout review section of your theme

fbq('track', 'AddPaymentInfo');

This can be done as part of your event or observer using sales_quote_payment_import_data_before event layout handle with reference checkout.onepage.review.info.items.before

If you are a magento developer then the above information should be enough for you to implement new FB pixel tracking. If not then the following is the recommended

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

3
  • You really did a great job here, can you add payment info to your answer as well?
    – Nickool
    Mar 12, 2018 at 17:49
  • I added Step9 to your answer for your review.
    – Nickool
    Mar 12, 2018 at 18:44
  • I already gave you :)
    – Nickool
    Mar 13, 2018 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.