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

Question

（我仍在改进这个问题，请随时为我更好地表达我的问题。我已经完成了自己的答案，这应该有助于更好地构建这个问题）

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

如何将其分解为可以更明确地编码而无需缩小且无需延迟脚本加载的逻辑部分？如何直接包含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。所以请不要回复“你不想要这个，因为我不想要这个”之类的话。

Answer 1

截至 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) 将此脚本加载放在 head 部分中的以下内容之前

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

2) 将此脚本代码的变量块放在[1]之后的header中

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

（测试成功）