How to add the Facebook pixel to a Meteor app

1

Hi everyone!

I’m trying to add the Facebook Pixel (for tracking) to my meteor app, but I’m not sure how to go about it. Facebook tells me to add this particular code snippet in the <head> section of my site:

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

Any ideas on what is the best way to do this? I’m assuming I have to separate the script and noscript parts and place them in different parts of my application, but I’m not sure at all as to where.

Any help will be much appreciated!

2

If you are using blaze, you can just put a section in any html page and include this snippet. Meteor combines all sections when it compiles using blaze and those get added to the head section that meteor generates and all get sent on initial load.

3

Yeah just put this anywhere in your body tag! I feel like the img won’t work in the head…

1 Like
4

Thanks, guys. I was under the impression that the <script> tag didn’t work in Meteor.

Also, I’m using the Iron Router. Will this approach still work?

Thanks!

5

Yeah it should all work fine!

6

There is a small issue with a script tag not working in a template in IE8 (because IE8 sucks as far as that goes). If you need to support IE8, put the script portion at least in the head.

8

Is there any good facebook pixel app to implement in Meteor.

9

Have you tried this https://www.npmjs.com/package/react-facebook-pixel