Scaledrone Blog
Feb 11th, 2018

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 since any user never sees it.

<!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'
Scaledrone is a realtime messaging service and platform.
Send live updates, create chatrooms and collaborative tools.
Try Scaledrone for free