You can add Facebook Tracking Pixels to your responsive site to track events. Create your Facebook Tracking Pixel code in the Facebook Pixel tab.
Add Facebook Tracking Pixel
Script Section
<!-- 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', 'XXXXXXXXXXXXXXX');fbq('track', 'PageView'); </script>
NoScript Section
<noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&ev=PageView&noscript=1"/> </noscript> <!-- End Facebook Pixel Code -->
- To access the Body end HTML section, in the left panel, click Settings, and then click Head HTML.
- Paste the <script> part of the code provided by Facebook into the Body end HTML section, and then click Save. The code should look similar to the one below.
Note
All of the above code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Facebook Pixel Code.
- Paste the <noscript> part of the code provided by Facebook into the Body end HTML section as well, and then click Save.
Considerations for Facebook Tracking Pixels
- Similar to Google Tag Manager, Facebook recommends to place the noscript code in the beginning of the body section. This is a workaround they suggests to get around limitations of old web browsers which do not load header code.
- Website Builder has completed extensive testing and the body-end.html section of developer mode works for adding the noscript code.
- For more information about Facebook Pixel Implementation, see this guide.
Warning
Consent management apps are not able to prevent code from running prior to consent when the code is placed in the header HTML. This is because Website Builder optimizes the structure and order of how content loads, based on performance best practices on the site. We place scripts and CMP banners lower on the page, in order to improve the performance of primary content. Because of this, it is recommended to place code in the body-end when using a consent management app.