NextJS中如何确保OneTrust同意脚本优先于Facebook Pixel加载

加载顺序错乱的核心原因是Facebook Pixel官方默认代码的插入逻辑：

• 代码中s = b.getElementsByTagName(e)[0]会直接抓取DOM内第一个<script>标签
• 后续执行s.parentNode.insertBefore(t,s)时，会把FB核心脚本强行插入到这个首个script标签之前，和你把FB初始化代码放在页面什么位置没有关系，它会自动爬到DOM最顶部的script前面，自然就会抢在OneTrust之前加载。
• 你当前把OneTrust放在<NextHead>、FB Pixel放在body末尾的写法，刚好给了FB脚本向上插队的空间。

方案1（最推荐，合规+彻底解决加载顺序） #

按照Cookie合规要求，本就应该等用户完成OneTrust同意授权之后再加载Facebook Pixel，从根源上避免优先级冲突，同时符合GDPR等数据法规要求：

1. 改写FB Pixel初始化逻辑，删掉默认的顶部插入逻辑，把FB加载封装成可延迟调用的方法，绑定到OneTrust的同意回调里触发。修改后的FB Pixel组件代码如下：

const DocumentFacebookPixel = () => {
  const initFbPixel = () => {
    if (window.fbq) return;
    !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;
    // 改写插入逻辑：直接追加到body末尾，不会向上插队
    s = b.body;
    s.appendChild(t)}(window,document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');

    fbq('init', '111222333');
    fbq('track', 'PageView');
    fbq('init', '1234');
    fbq('track', 'PageView');
  }

  return (
    <script
      key="track-fb-pixel"
      dangerouslySetInnerHTML={{
        __html: `
          // OneTrust加载完成后会自动执行OptanonWrapper回调
          function OptanonWrapper() {
            // C0004是OneTrust默认的广告Cookie分类ID，可根据后台配置替换
            const isAdConsentGranted = OneTrust.GetConsentValueForCategory('C0004') === '1' || OneTrust.IsAlertBoxClosed();
            if (isAdConsentGranted) {
              (${initFbPixel.toString()})();
            }

            // 监听用户后续更新同意偏好的事件
            window.addEventListener('OneTrustGroupsUpdated', function(e) {
              if (e.detail.includes('C0004') && !window.fbq) {
                (${initFbPixel.toString()})();
              }
            })
          }
        `
      }}
    />
  )
}

export default DocumentFacebookPixel;

2. 调整自定义Document里的组件位置，把两个脚本都放到<NextHead>内，保证OneTrust处于最顶部优先加载：

class Document extends NextDocument {
  render() {
    return (
      <Html>
        <NextHead>
         {/* OneTrust放在Head最顶部，永远第一个初始化 */}
         <DocumentOneTrust />
         {/* FB逻辑放在OneTrust之后，不存在被插队的空间 */}
         <DocumentFacebookPixel />
        </NextHead>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

3. 简化OneTrust组件，删掉之前空的OptanonWrapper声明避免函数覆盖，同时加属性保证OneTrust优先解析：

const DocumentOneTrust = () => {
  return (
    <script
      src="https://url.com"
      type="text/javascript"
      charSet="UTF-8"
      data-domain-script="id-123-4"
      data-document-write="true"
    />
  );
};

export default DocumentOneTrust;

方案2（不需要等用户同意，单纯保证加载顺序） #

如果不需要做同意后加载，仅要保证OneTrust比FB Pixel先加载，只需要改两处：

1. 替换FB Pixel代码里的默认插入逻辑，不要让它找第一个script标签插入，直接把脚本追加到body末尾：

// 注释掉原插入代码
// s = b.getElementsByTagName(e)[0];
// s.parentNode.insertBefore(t,s)
// 替换为直接追加到body
document.body.appendChild(t);

2. 给OneTrust的script标签去掉异步加载属性，保证它在后续所有脚本之前解析完成。

部署后打开浏览器开发者工具：

1. Network面板按加载顺序筛选JS请求，第一个加载的JS资源应该是OneTrust域名下的脚本
2. 若采用方案1，只有OneTrust加载完成、用户同意广告Cookie授权后，才会出现Facebook的fbevents.js请求
3. Elements面板中查看DOM结构，OneTrust的script标签应该是<head>内第一个script标签，不会被FB脚本插到前面。

内容的提问来源于stack exchange，提问作者mackeemackee