Facebook Pixel 隐式 PageView

Question

我正在尝试将 Facebook 像素跟踪添加到我的 Angular 应用程序中。

作为第一步，我只是将基本 Facebook 像素代码添加到我的一个基本 html 文件中，如下所示：

!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');，就会隐式发送 PageView 事件。

虽然我可以看到这对于普通的标准应用程序有些用处，但在处理像 Angular 这样的框架时，这是一种不受欢迎的行为，其 URL 结构不能被 fbq 很好地处理。例如。 www.hi.com/#/hello 正在注册为 www.hi.com。

有没有人遇到过这个问题，或者找到了将 Facebook Pixel 与 Angular 集成的更好方法？我看过一些提到 Angular 和 FBQ 的例子，以及一个有点过时的 Angular 插件。他们似乎都没有提到这一点。

Answer 1

看起来 Facebook 像素侦听浏览器历史 API 的 pushState() 方法并自动跟踪 PageView 事件。

您可以通过在fbq 对象中将disablePushState 参数设置为true 来禁用此功能。

所以代码看起来像这样：

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

之后，您可以在代码中手动使用Angulartics Facebook Pixel plugin 或调用window.fbq('track', 'PageView');。

请注意，这是一种未记录的方法，并且不保证将来可以使用！希望 Facebook 将来会提供一些记录的方法来执行此操作。致谢blog post from "Josh"。

2017 年 7 月更新。这已在 Facebook 的博客中解决，所以我猜它已得到官方支持：Tagging Single Page Applications with the Facebook Pixel。

Answer 2

如果您想使用 FB 像素进行跟踪，我建议您使用 angularjs 组件：

angulatrics facebook pixel

页面跟踪由 angulatrics 自动执行，因此您不必关心它。

npm install angulartics-facebook-pixel

然后添加 angulartics.facebook.pixel 作为应用的依赖项：

require('angulartics')

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

另见：https://github.com/angulartics/angulartics

希望对你有帮助。