Astro.js项目中Partytown集成异常：GTM/GA代理失效求助

在Vercel部署的Astro.js项目中集成Partytown，用于代理Google Analytics（GA）和Google Tag Manager（GTM）请求，但集成未正常工作——Google Tag Assistant显示“0 tags found”。去掉script标签的type="text/partytown"属性后集成可正常工作，说明问题出在Partytown的配置环节。

已执行步骤 #

• 遵循Astro.js官方Partytown集成指南
• 因CORS错误，按照Partytown官方指南实现代理配置
• 在astro.config.js中配置Partytown，通过resolveUrl代理GA和GTM请求

相关代码片段 #

GoogleAnalytics.astro #

<script
  type="text/partytown"
  src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>

<script type="text/partytown">
window.dataLayer = window.dataLayer || []

function gtag() {
  dataLayer.push(arguments)
}

gtag('js', new Date())
gtag('config', 'G-ID', {
  page_path: window.location.pathname
})
</script>

astro.config.js #

import { defineConfig } from 'astro/config'
import partytown from '@astrojs/partytown'

// Other configurations...

export default defineConfig({
  output: 'server',
  integrations: [
    // ... Other integrations ...
    partytown({
      config: {
        forward: ['dataLayer.push'],
        resolveUrl: (url) => {
          const siteUrl = 'https://site-url/proxytown'

          if (url.hostname === 'www.googletagmanager.com') {
            const proxyUrl = new URL(`${siteUrl}/gtm`)
            const gtmId = new URL(url).searchParams.get('id')
            if (gtmId) {
              proxyUrl.searchParams.append('id', gtmId)
            }
            return proxyUrl
          } else if (url.hostname === 'www.google-analytics.com') {
            const proxyUrl = new URL(`${siteUrl}/ga`)
            return proxyUrl
          }

          return url
        }
      }
    }),
  ],
  // Other configurations...
})

vercel.json #

{
  "rewrites": [
    {
      "source": "/proxytown/gtm",
      "destination": "https://www.googletagmanager.com/gtag/js"
    },
    {
      "source": "/proxytown/ga",
      "destination": "https://www.google-analytics.com/analytics.js"
    }
  ]
}

排查与解决方案 #

1. 修正Vercel代理路径匹配规则 #

当前resolveUrl生成的GTM代理路径包含?id=G-ID查询参数，但vercel.json的source未匹配该参数，导致代理请求失败。修改vercel.json的rewrite规则：

{
  "rewrites": [
    {
      "source": "/proxytown/gtm?id=:id",
      "destination": "https://www.googletagmanager.com/gtag/js?id=:id"
    },
    {
      "source": "/proxytown/ga",
      "destination": "https://www.google-analytics.com/analytics.js"
    }
  ]
}

2. 补充Partytown的Forward配置 #

除了dataLayer.push，需要同步gtag函数到Partytown的web worker，否则主线程调用gtag无法被worker正确处理：

partytown({
  config: {
    forward: ['dataLayer.push', 'gtag'], // 新增'gtag'
    // ... 其他配置
  }
})

3. 验证代理请求状态 #

在浏览器开发者工具的Network标签中，检查/proxytown/gtm和/proxytown/ga的请求状态：

• 若返回404：确认vercel.json在项目根目录，且Vercel部署已应用该配置（可重新触发部署）
• 若返回CORS错误：检查Vercel的rewrite规则是否正确转发请求头

4. 调整脚本加载时机 #

尝试等待Partytown初始化完成后再加载GTM脚本，避免加载时机冲突：

<script>
document.addEventListener('partytown:ready', () => {
  // 注入GTM脚本
  const gtmScript = document.createElement('script');
  gtmScript.type = 'text/partytown';
  gtmScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-ID';
  document.head.appendChild(gtmScript);

  // 注入gtag初始化代码
  const initScript = document.createElement('script');
  initScript.type = 'text/partytown';
  initScript.textContent = `
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-ID', {page_path: window.location.pathname});
  `;
  document.head.appendChild(initScript);
});
</script>

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