Unable to get Facebook Pixel JS to work in Layouts JS Editor

This thread is resolved. Here is a description of the problem and solution.

Problem: I want to insert the following code in Layouts JS to include a Facebook Pixel tracker:

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

Solution: You can't add HTML to the Layouts JS panel, and the snippet provided uses HTML to provide a fallback for non-JavaScript users. If you disregard non-JavaScript users, you can add only the JavaScript portion of this code to Layouts JS:

!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', '1643227992405344');
  fbq('track', 'PageView');

To use the HTML fallback, you must enqueue this script some other way. Some themes provide places where you can insert custom code like this from wp-admin. Some do not, and you must enqueue the code manually instead. See below.

Relevant Documentation: http://www.wpbeginner.com/wp-tutorials/how-to-install-facebook-remarketingretargeting-pixel-in-wordpress/

This support ticket is created 6 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will start replying to tickets in about 1.29 hours from now. Thank you for your understanding.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Backend editing, Layouts plugin

This topic contains 2 replies, has 2 voices.

Last updated by jonB-5 6 years, 10 months ago.

Assisted by: Christian Cox.

Author

Posts

January 13, 2018 at 5:34 pm #606001

jonB-5

I am trying to implement the Facebook Pixel code on my site however I cannot get it to work.

I am placing the code below into the Layouts JS Editor

<!-- 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',
  '<em><u>hidden link</u></em>');
  fbq('init', '1643227992405344');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="<em><u>hidden link</u></em>"
/></noscript>
<!-- End Facebook Pixel Code -->

I have also tried removing the script tags but this did not work either.

Please could you advise?

January 14, 2018 at 7:05 pm #606097

Christian Cox

There's not a good way to include this type of 3rd-party script in the Layouts JS panel, because this snippet uses HTML to supply a non-JavaScript fallback. The Layouts JS panel only accepts JavaScript, so HTML is invalid here. If you don't care about non-JavaScript users, then you can remove everything except the main script from Layouts JS and it will work. Include only this part:

!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',
  '<em><u>hidden link</u></em>');
  fbq('init', '1643227992405344');
  fbq('track', 'PageView');

If non-JavaScript user tracking is important, you must add the full HTML code another way. There are several ways to add this code, depending on your site theme. Some themes provide places where you can insert custom code like this from wp-admin. Some do not, and you must enqueue the code manually instead. Here's an article that discusses one approach using another 3rd-party plugin to insert the code:
hidden link

January 20, 2018 at 3:49 pm #608240

jonB-5

Great, thanks for the explanation, I've got it working without non-JS users for now