Facebook Pixel隐含的PageView

Question

我正在尝试将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正在注册为公正www.hi.com.

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

Answer 1

看起来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标记单页应用程序.