Facebook conversion tracking pixel across sub-domains?

Meredith Brandt picture Meredith Brandt · Mar 21, 2016 · Viewed 8.1k times · Source

I'll be upfront about the complete lack of coding experience I have, so any and all help is appreciated. My Facebook pixel was tracking traffic without any problems for my client's site...up until he moved the registration page to a sub-domain. The tracking then immediately cut off.

This wouldn't usually be a problem b/c we can rely on Google Analytics for conversion data, but in this case, it matters since our campaigns were optimized around the conversion data acquired in Facebook.

According to the FB rep I talked to earlier, our sub-domain is recognized as a completely different site and therefore, can't be tracked.

I don't buy this...I can't be the first person to come across such a simple problem. Any FB developers out there with a workaround?

Answer

Will Steward picture Will Steward · Sep 7, 2016

I know it's been a few months since you asked the question, but I thought I'd update (found this myself via a Google Search).

Something you could look at doing is putting the Facebook Tracking pixel on the main domain, then including it in an iframe on the registration page. You can then use the iframe URL for the "conversion URL" on the Facebook end:

Here's a JSFiddle with some sample code you can use: https://jsfiddle.net/dxz68suw/

HTML:

<div id="fb-pixel-outer">
  <iframe src="http://mainsubdomain.yoursite.com/track-conversion.html" id="fb-pixel-inner">    
  </iframe>
</div>

<!-- track-conversion.html should be a basic HTML page containing your Facebook Pixel code -->

CSS:

/** Outer container, this prevents scrollbars from appearing due to iframe positioned outside of viewport **/
#fb-pixel-outer {
  overflow: hidden; 
  position: absolute; 
  top: 0px; 
  left: 0px;
}

/** this styling ensures that the iframe is miles outside of the viewport, and loaded by browser **/
#fb-pixel-inner {
  position: absolute;
  left: -9999px;
  top: -9999px;
  overflow: hidden;
  display: block;
  width: 1px; 
  height: 1px;
}

It's a bit hacky, and not ideal, but should work.