使用 Partytown 将 GTM 等脚本迁移至 Web Worker 后，主线程默认无法直接调用 gtag 或 dataLayer.push。为确保自定义事件正常上报，可在 astro.config.mjs 中通过 forward 显式转发 gtag 和 dataLayer.push，让这些函数在 Worker 中生效并保持事件追踪功能不受影响。
问题背景
许多网站会通过 Google Tag Manager (GTM) 注入 GA4、Clarity 等第三方监测脚本。然而，这些脚本在主线程运行时往往会显著拖慢页面性能，尤其在移动端，可能造成 LCP 延迟并降低 PageSpeed 分数。
Partytown 能将这些第三方脚本移至 Web Worker 中运行，从而有效释放主线程资源。性能虽有明显改善，但也带来一个常见问题：
- 主线程不再拥有
dataLayer或gtag，导致自定义事件无法正常发送。
因此，即便你手动调用：
gtag('event', 'login', { id: 'abc' });
window.dataLayer.push({ event: 'login', id: 'abc' });事件依旧不会上报，因为主线程中根本没有对应的函数和变量。
Partytown 简介
Partytown 是一个用于将资源密集型脚本迁移至 Web Worker 的库，常用于改善页面渲染性能。
在 Astro 项目中集成非常简单：
npm install @astrojs/partytown启用后，Astro 会自动将 Partytown 的运行代码注入 <head>。
你只需将第三方脚本标记为：
<script
type="text/partytown"
src="https://example.com/third-party.js"
></script>若你仅依赖 GA4 的默认事件（例如 page_view、session_start），做到这里即可——移动端 PageSpeed 通常能获得约 20 分的提升。
但若需要发送自定义事件，则必须解决主线程与 Worker 之间的通信问题。
如何启用自定义事件转发
要让主线程中的 dataLayer.push() 和 gtag() 调用继续生效，只需在 Astro 中启用事件转发。
修改 astro.config.mjs
import partytown from '@astrojs/partytown';
export default {
integrations: [
partytown({
config: {
forward: ['dataLayer.push', 'gtag'], // 显式声明需要转发的函数
},
}),
],
};配置原理
Partytown 的 forward 机制允许你指定主线程上的函数调用，并将它们转发至 Worker 中执行。比如：
gtag('event', 'login', { id: 'abc' });
window.dataLayer.push({ event: 'login' });Partytown 会拦截这些调用，并将其传递给 Worker 中运行的 GTM 脚本，从而让事件得以正常上报。