Facebook Pixel implicit PageView

Question

I'm attempting to add Facebook Pixel tracking to my Angular app.

As a first step, I've simply added the base Facebook pixel code into one of my base html files as so:

!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');

I find that as soon as I init my pixel fbq('init', '1234567890');, a PageView event is being sent implicitly.

While I can see this being somewhat useful for the average standard app, it's an unwanted behaviour when dealing with frameworks like Angular, whose URL structures aren't handled well by fbq. Eg. www.hi.com/#/hello is being registered as just www.hi.com.

Has anyone come across this problem, or found a better way to integrate the Facebook Pixel with Angular? I've seen a few examples around that mention Angular and FBQ, along with a somewhat outdated Angular plugin. None of them seem to mention this.

Answer 1

if you want to track using FB pixel I suggest you the angularjs component:

angulatrics facebook pixel

The page tracking is automatically performed by angulatrics so you don't have to care about it.

npm install angulartics-facebook-pixel

Then add angulartics.facebook.pixel as a dependency for your app:

require('angulartics')

angular.module('myApp', [
  'angulartics', 
  require('angulartics-facebook-pixel')
]);

see also: https://github.com/angulartics/angulartics

I hope it helps.

Answer 2

It looks like the Facebook pixel listens to the pushState() method of the browser history API and tracks the PageView events automatically.

You can disable this by setting disablePushState parameter to true in the fbq object.

So the code would look like this:

!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', '1234567890');
fbq.disablePushState = true;

After that you can use the Angulartics Facebook Pixel plugin or call window.fbq('track', 'PageView'); manually in your code.

Please note that this is an undocumented method and not guaranteed to work in the future! Hopefully Facebook will provide some documented way to do this in the future. Credits go to this blog post from "Josh".

Update July 2017. This has been addressed in Facebook's blog, so I guess it's officially supported: Tagging Single Page Applications with the Facebook Pixel.