13

我正在尝试将 Facebook Pixel 跟踪添加到我的 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正在注册为 just www.hi.com。

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

4

2 回答 2

14

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

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

所以代码看起来像这样：

!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 标记单页应用程序。

于 2016-07-01T11:20:19.017 回答
1

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

角度学 facebook 像素

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

npm install angulartics-facebook-pixel

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

require('angulartics')

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

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

我希望它有所帮助。

于 2016-04-11T21:59:05.463 回答