How to add new facebook tracking pixel to magento site?

Question

I wanted a facebook dynamic ads for my online store. I have searched on google but many answers i got was that i should install the facebook pixel plugin for chrome to know if the facebook pixel has installed and paste the code in success.phtml which i have done but still when i check the chrome plugin it says no facebook pixel is installed for this website. here is the facebook code

Facebook Pixel Code
<!-- 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 -->
Standard Events
Add standard events to your code to track specific types of actions on your website. Copy the code for the type of event you want to measure, and paste it below the pixel code on the relevant page within a <script> tag. Keep in mind standard event codes are case-sensitive. Learn more about conversion tracking.

// ViewContent
// Track key page views (ex: product page, landing page or article)
fbq('track', 'ViewContent');


// Search
// Track searches on your website (ex. product searches)
fbq('track', 'Search');


// AddToCart
// Track when items are added to a shopping cart (ex. click/landing page on Add to Cart button)
fbq('track', 'AddToCart');


// AddToWishlist
// Track when items are added to a wishlist (ex. click/landing page on Add to Wishlist button)
fbq('track', 'AddToWishlist');


// InitiateCheckout
// Track when people enter the checkout flow (ex. click/landing page on checkout button)
fbq('track', 'InitiateCheckout');


// AddPaymentInfo
// Track when payment information is added in the checkout flow (ex. click/landing page on billing info)
fbq('track', 'AddPaymentInfo');


// Purchase
// Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});


// Lead
// Track when a user expresses interest in your offering (ex. form submission, sign up for trial, landing on pricing page)
fbq('track', 'Lead');


// CompleteRegistration
// Track when a registration form is completed (ex. complete subscription, sign up for a service)
fbq('track', 'CompleteRegistration');

Answer 1

You can add it in back-end:

Configuration -> Design -> HTMLHead -> Miscellaneous Scripts. 

This way you can track the default data facebook provide: view pages, demographics, etc.

However I've not set up any Standard events and dont know how it should be done.

Answer 2

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.

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

Answer 3

Please check free magento extension with advanced pixel settings. https://www.pearlbells.co.uk/facebook-pixel-magento-extension/