Facebook Pixel implicita PageView

Question

Sto tentando di aggiungere il monitoraggio dei pixel di Facebook alla mia app Angular.

Come primo passo, ho semplicemente aggiunto il Facebook codice pixel di base in uno dei miei file HTML di base come così:

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

trovo che non appena ho init mia pixel fbq('init', '1234567890');, una visualizzazione di pagina l'evento viene inviato implicitamente.

Mentre posso vedere questo è un po 'utile per l'app standard media, è un comportamento indesiderato quando si tratta di framework come Angular, le cui strutture di URL non sono gestite bene da fbq. Per esempio. www.hi.com/#/hello è stato registrato come solo www.hi.com.

Qualcuno si è imbattuto in questo problema o ha trovato un modo migliore di integrare Pixel di Facebook con Angular? Ho visto alcuni esempi in giro che menzionano Angular e FBQ, insieme a un plugin Angolare un po 'obsoleto. Nessuno di loro sembra menzionarlo.

Answer 1

Sembra che il pixel di Facebook ascolti il ​​metodo pushState() dell'API dello storico del browser e traccia automaticamente gli eventi PageView.

È possibile disattivare questo parametro impostando il parametro disablePushState su true nell'oggetto fbq.

Quindi il codice sarebbe simile a questa:

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

Dopo di che è possibile utilizzare il Angulartics Facebook Pixel plugin o chiamare il window.fbq('track', 'PageView'); manualmente nel codice.

Si prega di notare che questo è un metodo non documentato e non garantito per funzionare in futuro! Eventualmente Facebook fornirà un modo documentato per farlo in futuro. I crediti vanno a questo blog post from "Josh".

Aggiornamento luglio 2017. Questo è stato indirizzato nel blog di Facebook, quindi suppongo che sia ufficialmente supportato: Tagging Single Page Applications with the Facebook Pixel.

Answer 2

se si desidera tenere traccia utilizzando pixel FB io vi proponiamo il componente angularjs:

angulatrics facebook pixel

La pagina di monitoraggio viene eseguita automaticamente dal angulatrics quindi non c'è bisogno di preoccuparsi di esso.

npm install angulartics-facebook-pixel 

Quindi aggiungere angulartics.facebook.pixel come una dipendenza per la vostra applicazione:

require('angulartics') 

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

vedi anche: https://github.com/angulartics/angulartics

spero che aiuta.