Next.js环境下Microsoft Bing通用事件追踪实现方法咨询

DevOps 小满

2026-10-25

核心实现逻辑

Microsoft Universal Event Tracking（UET） 和你已经接触过的Google Tag Manager、Facebook Pixel属于同一类第三方客户端追踪工具，本身没有推出专属的Next.js封装SDK，因此官方示例库没有收录对应的实现。本质上只要按照Next.js加载第三方客户端脚本的通用逻辑部署即可，没有额外的特殊适配要求。

分路由模式实现方案

App Router（Next.js 13+ 版本默认采用）

全局基础追踪脚本挂载位置选根布局app/layout.tsx，使用Next.js内置的next/script组件加载，选择afterInteractive加载策略，避免脚本加载阻塞页面渲染。

示例代码：

// app/layout.tsx
import { Script } from 'next/script';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '站点标题',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        {children}
        {/* 脚本内容为UET后台生成的标准代码，仅需替换其中的UET标签ID */}
        <Script id="ms-uet-base" strategy="afterInteractive">
          {`
            (function(w,d,t,u,n,s,e){
              w['SwiftypeObject']=n;
              w[n]=w[n]||function(){(w[n].q=w[n].q||[]).push(arguments);};
              s=d.createElement(t);
              e=d.getElementsByTagName(t)[0];
              s.async=1;s.src=u;
              e.parentNode.insertBefore(s,e);
            })(window,document,'script','/your-uet-script-path','uetq');
            window.uetq = window.uetq || [];
            window.uetq.push({ 'eti': '$你的UET标签ID', 'ep': 1 });
          `}
        </Script>
      </body>
    </html>
  );
}

注：代码中的脚本路径、UET标签ID需要替换为你从UET配置后台直接复制的内容，不要自行修改官方提供的脚本逻辑结构。

自定义转化事件上报逻辑需要放在标记为'use client'的客户端组件中执行，直接调用全局的uetq队列即可完成事件上报，不需要额外封装工具函数。

示例上报逻辑：

'use client';

export default function CheckoutSuccess() {
  const trackOrderConversion = (orderAmount: number, orderId: string) => {
    window.uetq = window.uetq || [];
    window.uetq.push({
      ec: 'ecommerce',
      ea: 'purchase',
      el: orderId,
      ev: Math.round(orderAmount),
    });
  };

  // 页面交互触发的上报逻辑...
}

TypeScript 项目需要在全局声明文件中补充uetq的类型定义，避免TS编译报错，示例声明：

// 项目根目录 global.d.ts
interface Window {
  uetq: Array<Record<string, any>>;
}

Pages Router（Next.js 12及更早存量项目）

全局基础脚本挂载位置改为自定义全局应用文件pages/_app.tsx，脚本加载策略、代码逻辑和App Router完全通用，不需要调整。
自定义事件上报的调用方式和App Router无差异，所有上报逻辑同样需要在客户端环境执行。

常见落地避坑点

不要手动在<head>标签中插入原生<script>标签加载UET：Next.js的单页路由切换场景下，手动插入的脚本会出现重复加载、重复上报页面浏览数据的问题，用next/script组件可以自动处理这类逻辑冲突。
不要使用lazyOnload加载策略：UET基础脚本需要在页面可交互后尽快完成加载，延迟加载会导致页面浏览、转化类事件的上报出现延迟甚至丢失。
绝对不要在服务端渲染阶段调用uetq相关方法：uetq是浏览器端挂载的全局对象，服务端运行环境中不存在该对象，直接调用会触发运行时报错。
如果项目已经接入Google Tag Manager，不需要单独部署UET脚本：直接在GTM容器内配置UET标签的触发规则即可，和独立部署UET的上报效果完全一致。

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

Next.js环境下Microsoft Bing通用事件追踪实现方法咨询

App Router（Next.js 13+ 版本默认采用） #

Pages Router（Next.js 12及更早存量项目） #

App Router（Next.js 13+ 版本默认采用）

Pages Router（Next.js 12及更早存量项目）