This is the fifth tutorial in the low-code development series. Follow-along to learn how to create a Facebook or Meta Pixel and then add it to your codebase. This Pixel helps you assess the success of your Facebook ad campaigns by tracking key events that happen on your marketplace, like a listing being created or order being placed

Please visit previous tutorials to learn how to set up your development environment and how to deploy the Sharetribe Web Template to the web.

Chapters

Configure Facebook Pixel (00:46)
Add the Pixel to your codebase (01:14)

Resources used in this video

There are two code snippets used in the video. You can copy them from below:

Code snippet one: Tracking code script

Remember to replace REPLACE_THIS_VALUE with your Facebook Pixel ID:

 analyticsLibraries.push(
   <script key='fb'>
     {`
   !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', 'REPLACE_THIS_VALUE');
   fbq('track', 'PageView');
`}
</script>
 )
 analyticsLibraries.push(
   <noscript key='fb-img'>{`<img height="1" width="1" style="display:none"
   src="https://www.facebook.com/tr?id=REPLACE_THIS_VALUE&ev=PageView&noscript=1"
   />`}</noscript>
 )

Code snippet two: Safelist Facebook in the content security policy

 const { imgSrc = [self] } = defaultDirectives;
 const imgSrcOverride = imgSrc.concat('www.facebook.com');

 const { scriptSrc = [self] } = defaultDirectives;
 const scriptSrcOverride = scriptSrc.concat('connect.facebook.net', 'www.facebook.com');

 const { frameSrc = [self ] } = defaultDirectives;
 const frameSrcOverride = frameSrc.concat('connect.facebook.net', 'www.facebook.com');

 const { connectSrc = [self] } = defaultDirectives;
 const connectSrcOverride = connectSrc.concat('www.facebook.com');

 const customDirectives = {
   // Example: Add custom directive override
   imgSrc: imgSrcOverride,
   scriptSrc: scriptSrcOverride,
   frameSrc: frameSrcOverride,
   connectSrc: connectSrcOverride
 };

Additional developer documentation

More information on analytics and integrations can be found in Sharetribe's Developer Documentation site. We recommend:

Conclusion

This is the final video guide in the low-code developer series. If you would like to go further into making changes using custom code, then we recommend starting and following the three-part developer tutorial on the Developer Documentation site.

Would there be any other low-code topics you would like covered in future videos? Let us know using the chat below.