0

I'm built single page application with AngularJS. I want to track pageView this web app with Facebook Pixel. But on analytics board, Facebook Pixel ignore the url part after '#'. In this image every URL display in http://localhost/.

image

Can I push custom pageView (remove #) to fix this?

hawkup
  • 537
  • 1
  • 9
  • 15

1 Answers1

3

For my case it works the following configuration:

  1. Add the fb pixel code with tracking ID in index.html

<!-- 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', '<<PIXEL ID>>'); // Insert your pixel ID here.
  </script>
  <noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=133095247279894&ev=PageView&noscript=1"
  /></noscript>
  <!-- DO NOT MODIFY -->
  <!-- End Facebook Pixel Code -->

  1. Inject $window on the state controller

    // Registration
angular.module('app.module')
    .controller('LeadsController', ['$scope', '$state', '$window']);

$window.fbq('track', 'InitiateCheckout');   //or Purchase/Leads/CompleteRegistration event

It works that way because basically fbq has is binded on window object. Hope this helps!

iQhry
  • 91
  • 8
  • What If I need to bind this pixel ID dynamically? as you can't bind value dynamically in index.html. Is there any another alternate? – Pardeep Jain Jul 14 '18 at 05:49
  • Anyone know how to do this in angular 4? – SKL Jul 14 '18 at 17:24
  • I don't think this really answers the question. You're firing an "InitiateCheckout" event, not a "PageView" event. I've been trying to do essentially the same thing as the original poster; that is, firing the fbq('track', 'PageView') event from within a React app on route changes (hash changes). I'm seeing that only the first "PageView" actually gets tracked. – tlfu Dec 21 '18 at 17:32