Facebook Custom Audience pixel on SinglePageApplication SPA

Question

I have a SinglePageApplication built with AngularJs. I want too add Facebook Custom Audience tracking pixel globally and update it manually every time user changes page (url). <

Answer 1

Here's what I'm doing that seems to be working so far:

In my index.html file I removed the PageView function and commented out the pixel itself, as shown below.

               
-->

Then, I configure my app as follows...

.config(['$stateProvider', '$urlRouterProvider', '$windowProvider', function($stateProvider, $urlRouterProvider, $windowProvider) {
var $window = $windowProvider.$get();

Now, for each state change, I use the onEnter and onExit to fire off the "events" I want to capture:

.state('foo.bar', {
        url:'/bar',
        templateUrl: 'template.html',
        controller: 'templateCtrl',
        onEnter: function(){
            $window.fbq('track', "Page1Enter");
        },
        onExit: function(){
            $window.fbq('track', "Page1Exit");
        }
    })

I'm guessing that, if I wanted to, I could simply move any fbq('track', "PageView"); code into a controller. For my use case, though, tracking from state changes works perfectly for monitoring flow from within my app.

Hope this helps someone else.