Trying to Add Facebook Pixel to Heroku HAML site - facebook

Question

I am trying to add a Facebook Pixel to our Heroku HAML site. Google analytics is working by having the Javascript in _google_analytics.html.haml then listed in the Home.html.haml file in the same layout folder referenced as below:
!!!
%html
%head
= javascript_include_tag "application", "data-turbolinks-track" => true
= csrf_meta_tags
= render 'layouts/bold_chat'
= render 'layouts/google_analytics'
= render 'layouts/fb_pixel'
Not sure what I am missing but the pixel is not loading when the site loads in the manner that Google Analytics is. Thank You, dev left the organization and I the Admin are picking up the pieces. Ouch! I am able to get the script to fire but the site will not load in heroku I receive a load error. HELP
This is the actual JavaScript
<!-- 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', '123123123123123');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=123123123123&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
Ok, so I attempted to convert this to a Coffee script based on another article. The code is
!((f, b, e, v, n, t, s) ->
if f.fbq
return
n =
f.fbq = ->
if n.callMethod then n.callMethod.apply(n, arguments) else
n.queue.push(arguments)
return
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
return
)(window, document, 'script',
'https://connect.facebook.net/en_US/fbevents.js')
fbq 'init', '252482198497323'
fbq 'track', 'PageView'
Now I receive an error when trying to deploy to Test
Running: rake assets:precompile
rake aborted!
NoMethodError: undefined method `+#' for ["fb_pixels"]:Array

Answer 1

Update, The issue was with the section loading the image..
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=123123123123&ev=PageView
&noscript=1"/>
</noscript>
Once I removed this code from the script and loaded it into the index page by itself the pixel worked.

Answer 2

The noscript tag is used when users have disabled scripts in their browser or if their browser doesn't support scripts. Ideally, you wouldn't have to remove this section of the code. Here's the haml code that should work.
:javascript
!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', '123123123123');
fbq('track', 'PageView');
%noscript
%img{:height => "1", :width => "1", :src => "https://www.facebook.com/tr?id=123123123123&ev=PageView&noscript=1"}