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.
- Copy 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:
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 suggest to get around limitations of old web browsers which do not load header code.
- Guesty Websites 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.