通过Google Tag Manager配置Pinterest标签在Next.js站点不生效如何解决

• 无代码（GTM）方案未触发的常见原因：
  • 未正确配置Pinterest标签的触发规则，需确认触发条件覆盖了所有需要埋点的页面/事件
  • 站点内容安全策略（CSP）未放行https://s.pinimg.com域名，导致Pinterest脚本加载被拦截
  • 浏览器广告拦截插件屏蔽了Pinterest域名的请求，可关闭插件后重试
• 现有手动实现代码的问题：
  • _document.js 仅在服务端渲染阶段执行，直接插入内联脚本可能出现window对象未就绪导致pintrk初始化失败的问题
  • 若未替换代码中<PINT_CODE>为实际的Pinterest标签ID、<user_email_address>为用户邮箱的SHA256哈希值，会导致标签加载失效
  • 脚本加载时机未做控制，可能出现pintrk方法还未初始化就调用的报错

Pages Router 实现（Next.js 12及更早版本/兼容版） #

1. 根目录下找到pages/_app.js文件，引入next官方的Script组件管理第三方脚本

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        id="pinterest-tag"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
          !function(e){if(!window.pintrk){window.pintrk = function () {
            window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
              n=window.pintrk;n.queue=[],n.version="3.0";var
              t=document.createElement("script");t.async=!0,t.src=e;var
              r=document.getElementsByTagName("script")[0];
              r.parentNode.insertBefore(t,r)}}("https://s.pinimg.com/ct/core.js");
          pintrk('load', '替换为你的Pinterest标签ID', {em: '替换为用户邮箱SHA256哈希值，无该信息可删除该参数'});
          pintrk('page');
          `
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

2. 自定义事件跟踪（可选）
   新建lib/pintrk.js工具文件，避免直接调用全局方法出现报错：

export const trackPinterestEvent = (eventName, params = {}) => {
  if (typeof window !== 'undefined' && window.pintrk) {
    window.pintrk('track', eventName, params)
  }
}

在需要触发事件的组件中调用即可，例如下单事件：

import { trackPinterestEvent } from '@/lib/pintrk'

// 下单成功后调用
trackPinterestEvent('purchase', {
  value: 199.9,
  currency: 'CNY',
  order_id: 'xxx123'
})

App Router 实现（Next.js 13+） #

直接在根布局文件app/layout.js中插入Script组件即可，用法和Pages Router一致：

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Script
          id="pinterest-tag"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
            !function(e){if(!window.pintrk){window.pintrk = function () {
              window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
                n=window.pintrk;n.queue=[],n.version="3.0";var
                t=document.createElement("script");t.async=!0,t.src=e;var
                r=document.getElementsByTagName("script")[0];
                r.parentNode.insertBefore(t,r)}}("https://s.pinimg.com/ct/core.js");
            pintrk('load', '替换为你的Pinterest标签ID');
            pintrk('page');
            `
          }}
        />
        {children}
      </body>
    </html>
  )
}

• 安装Pinterest Tag Helper浏览器插件，访问站点后插件会自动识别已加载的标签和触发的事件
• 打开浏览器控制台网络面板，筛选pinterest域名的请求，存在ct开头的请求且状态码为200即说明标签正常触发

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