Facebook像素隐式页面访问统计

Question

Facebook像素隐式页面访问统计

13

我正在尝试将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像素与Angular集成？我看到了一些提到Angular和FBQ的示例，以及一个有点过时的Angular插件。但是它们似乎都没有提到这一点。

- Jovani

2个回答

1

如果您想使用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

希望能对你有所帮助。

- thegio

嘿thegio！感谢你的帮助。我对它们进行了一些研究，正准备尝试插件，但是我注意到像素代码的隐式行为。我会试试它们，谢谢。 - Jovani

正如我所料。我已经安装和配置好了，但是这并没有什么大的区别。我认为Angulartics很好用，但是Facebook像素插件可能已经过时了。它没有按照Angulartics文档所说的那样进行报告。Facebook像素代码仍然在每个页面上触发PageViews，并且它们仍然只被注册为来自根URL，而不是Angular路由。 - Jovani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lari · Accepted Answer

看起来 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 插件或在您的代码中手动调用 window.fbq('track', 'PageView');。

请注意，这是一种未记录的方法，不能保证将来能够正常工作！ 希望 Facebook 在未来提供一些记录的方法。感谢这位名为“Josh”的博主发布的博客文章。

更新于 2017 年 7 月。 Facebook 的博客已经解决了这个问题，所以我想它现在是官方支持的：使用 Facebook Pixel 标记单页应用程序。