Facebook Pixel implicite PageView

Question

J'essaye d'ajouter le suivi de Facebook Pixel à mon application angulaire.

Dans un premier temps, j'ai simplement ajouté le code de pixel de base Facebook dans l'un de mes fichiers html de base comme ceci:

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

Je trouve que dès que j'init mon pixel fbq('init', '1234567890');, un PageView l'événement est envoyé implicitement. Bien que je puisse voir que ce soit quelque peu utile pour l'application standard moyenne, c'est un comportement indésirable quand il s'agit de frameworks comme Angular, dont les structures d'URL ne sont pas bien gérées par fbq. Par exemple. www.hi.com/#/hello est enregistré en tant que www.hi.com.

Quelqu'un a-t-il rencontré ce problème ou trouvé un meilleur moyen d'intégrer le pixel Facebook avec Angular? J'ai vu quelques exemples autour de cette mention Angular et FBQ, avec un plugin angulaire quelque peu obsolète. Aucun d'entre eux ne semble le mentionner.

Answer 1

Il semble que le pixel Facebook écoute la méthode pushState() de l'API de l'historique du navigateur et suit automatiquement les événements PageView.

Vous pouvez le désactiver en définissant le paramètre disablePushState sur true dans l'objet fbq.

Ainsi, le code ressemblerait à ceci:

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

Après cela, vous pouvez utiliser le Angulartics Facebook Pixel plugin ou appelez window.fbq('track', 'PageView'); manuellement dans votre code.

Veuillez noter qu'il s'agit d'une méthode non documentée et qu'il n'est pas garanti de fonctionner dans le futur! Espérons que Facebook fournira un moyen documenté de le faire à l'avenir. Crédits vont à cette blog post from "Josh".

Mise à jour juillet 2017. Cela a été abordé dans le blog de Facebook, donc je suppose qu'il est officiellement pris en charge: Tagging Single Page Applications with the Facebook Pixel.

Answer 2

si vous souhaitez suivre à l'aide de pixels FB Je vous propose la composante AngularJS:

angulatrics facebook pixel

Le suivi des pages est effectuée automatiquement par angulatrics de sorte que vous n'avez pas se soucier à ce sujet.

npm install angulartics-facebook-pixel 

Ensuite, ajoutez angulartics.facebook.pixel comme une dépendance pour votre application:

require('angulartics') 

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

voir aussi: https://github.com/angulartics/angulartics

J'espère que ça aide.