/ Tutorials

Facebook Pixel Tracking Across Multiple Domains

A typical situation for a SaaS website is to have your public web on www.companyname.com and have your actual app on app.companyname.com.

This approach makes sense for many best practices on the web but does not work so well with Facebook Pixel tracking.

The iframe approach

A handy way and possibly the only way to get around the multiple domains or subdomains issue is to inject an iframe into the subdomain.

To track a signup event on app.companyname.com, you first need to create a new page containing the Facebook Pixel tracking code on www.companyname.com/facebook-pixel-signup.

The www.companyname.com/facebook-pixel-signup page will be very minimal as users never see this page.

<!DOCTYPE html>
<html>
  <head>
    <meta name="robots" content="noindex">
    
    <!-- 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', 'CompleteRegistration');
    </script>
    <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 -->
  </head>
  <body></body>
</html>

Note that we also added the robots meta tag to prevent search engines from indexing this page.

Next, add this line to your app.companyname.com/thanks-for-signing-up page.

<iframe src="https://www.companyname.com/facebook-pixel-signup" style="width:0;height:0;border:none;"></iframe>

That's it 🎊! Use this approach to track users across multiple domains for your website.

Troubleshooting

Content-Security-Policy

By default, your web server or balancer might not allow for iframes from other domains or subdomains. Fix that with the Content-Security-Policy response header.

Content-Security-Policy: frame-ancestors '*.companyname.com'
Send realtime data to your users
We take care of complex realtime infrastructure problems so you can focus on what you enjoy - building awesome apps
Build realtime features now