Facebook Pixel隐式PageView [英] Facebook Pixel implicit PageView

问题描述

我正在尝试添加Facebook Pixel跟踪到我的Angular应用程序。

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

 ！function（f，b，e，v，n，t，s）{if （f.fbq）返回; N = f.fbq =函数（）{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）}（窗口，
文档，'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插件。他们似乎都没有提到这一点。

解决方案

看起来像Facebook的像素侦听 pushState（ ）浏览器历史记录API的方法，并自动跟踪PageView事件。

您可以通过设置 disablePushState 参数到 true 在 fbq 对象中。

所以代码如下所示：

 ！function（f，b ，E，v，N，T，S）{如果（f.fbq）返回; N = f.fbq =函数（）{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）}（窗口，
文档，'script'，'https： /connect.facebook.net/en_US/fbevents.js'）; 
 
 fbq（'init'，'1234567890'）; 
 fbq.disablePushState = true; 
  

之后，您可以使用或调用 window.fbq（'track'，'PageView'）;

请注意，这是一个无证的方法，不能保证在将来工作！希望Facebook会提供一些有文件化的方式来做到这一点。信用转到这个Josh的博文>。

更新July 2017。这已经在Facebook的博客中解决了，所以我猜是正式支持：使用Facebook像素标记单页应用程序。

I'm attempting to add Facebook Pixel tracking to my Angular app.

As a first step, I've simply added the base Facebook pixel code into one of my base html files as so:

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

I find that as soon as I init my pixel fbq('init', '1234567890');, a PageView event is being sent implicitly.

While I can see this being somewhat useful for the average standard app, it's an unwanted behaviour when dealing with frameworks like Angular, whose URL structures aren't handled well by fbq. Eg. www.hi.com/#/hello is being registered as just www.hi.com.

Has anyone come across this problem, or found a better way to integrate the Facebook Pixel with Angular? I've seen a few examples around that mention Angular and FBQ, along with a somewhat outdated Angular plugin. None of them seem to mention this.

解决方案

It looks like the Facebook pixel listens to the pushState() method of the browser history API and tracks the PageView events automatically.

You can disable this by setting disablePushState parameter to true in the fbq object.

So the code would look like this:

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

After that you can use the Angulartics Facebook Pixel plugin or call window.fbq('track', 'PageView'); manually in your code.

Please note that this is an undocumented method and not guaranteed to work in the future! Hopefully Facebook will provide some documented way to do this in the future. Credits go to this blog post from "Josh".

Update July 2017. This has been addressed in Facebook's blog, so I guess it's officially supported: Tagging Single Page Applications with the Facebook Pixel.

这篇关于Facebook Pixel隐式PageView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！