Facebook像素的显式和直接代码是什么

时间:2019-06-24 07:01:57

标签: javascript html facebook facebook-pixel

(我仍在改进此问题,可以随时为我更好地表达我的问题。我已经完成了自己的答案,这应该有助于更好地阐明这个问题)

显式-在这种情况下表示“直接”。脸谱网提供的一个被缩小了,并且包括一个延迟脚本标签注入器。

这如何分解为逻辑部分,这些逻辑部分可以在不进行最小化和不延迟脚本加载的情况下进行更明确的编码?我如何才能直接包含https://connect.facebook.net/en_US/fbevents.js的脚本标签?

当前规定的区块:

<!-- Facebook Pixel Code -->
<script>
  !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', 'your-pixel-id-goes-here');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

为什么最好使用explicit版本:

  • 效率-这可能意味着很多事情
  • 详细和清晰
  • 教育-了解这类脚本的工作方式以及您自己的工作方式
  • 集成-您可能会有类似SquareSpace的东西,您可以在其中接受像素ID作为“ Facebook”集成的参数

我计划自己为How to inject javascript in existing HTML response with node.js and cloudflare workers使用一个有效的答案。因此,请勿回答“您不想要这个,因为我不想要这个”之类的东西。

1 个答案:

答案 0 :(得分:0)

截至2019年6月24日,并根据当前规定的区块:

<!-- Facebook Pixel Code -->
<script>
  !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', 'your-pixel-id-goes-here');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

有4个不同的部分:

  1. 窗口变量和双重安装冲突。默认代码似乎是异步加载脚本的,并设置了fbq函数以使命令排队直到加载脚本为止。
  2. 包含从属脚本标记
  3. 使用fbq命令初始化和跟踪页面浏览
  4. 如果不支持javascript,则加载图像

假设您完全控制了网页的内容,并且知道不会重复尝试加载facebook像素-可以使用以下更明确的方式进行部署:

1)将脚本加载的内容放在开头部分的以下内容之前

<script async src="https://connect.facebook.net/en_US/fbevents.js"></script>

2)将此脚本代码的可变块放在[1]之后的标头中

<script>
  !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=[];}(window, document,'script'); //Same as usual but with the script injection part removed.

  fbq('init', 'your-pixel-id-goes-here');
  fbq('track', 'PageView');
</script>

3)将此noscript部分放在正文的末尾

<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>

(成功测试)