13

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.

erkanyildiz
  • 13,044
  • 6
  • 50
  • 73
Jovani
  • 133
  • 1
  • 7

2 Answers2

18

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.

lari
  • 752
  • 4
  • 19
  • `fbq.disablePushState = true;` is also mentioned in the Developers Docs here: https://developers.facebook.com/docs/marketing-api/audiences-api/pixel/ It's also the solution for my Rails/Turbolinks webapp which behaves like SPA. Otherwise a PageView event is tracked implicitly on click and another one after the page finally loaded by Turbolinks. – Mike Lieser Nov 11 '20 at 10:55
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.

thegio
  • 1,233
  • 7
  • 27
  • Hey thegio! Thanks for your help. I did some research into them and was about to try the plugin when I noticed the implicit behaviour of the pixel code. I'll give them a shot, thank you. – Jovani Apr 12 '16 at 14:44
  • As I suspected. I've got it all installed and configured, but it makes little difference. I think Angulartics works well, but the Facebook Pixel plugin is possibly outdated. It doesn't report the way the Angulartics docs say it should. The Facebook Pixel code is still firing PageViews on every page, and they're still just registering as coming from the root URL, instead of the Angular route. – Jovani Apr 12 '16 at 15:49