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 这样的框架时，这是一种不需要的行为，fbq 无法很好地处理 URL 结构。例如。 www.hi.com/#/hello 正被注册为 www.hi.com。

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

Answer 1

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

angulatrics facebook pixel

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

npm install angulartics-facebook-pixel

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

require('angulartics')

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

另请参阅：https://github.com/angulartics/angulartics

希望对您有所帮助。

Answer 2

看起来 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。

Facebook Pixel 隐式 PageView

Facebook Pixel implicit PageView

facebook-pixel