如何在Django模板中通过Partytown集成GTM

1. 基础代码修改 #

给你现有的常规GTM代码的<script>标签加上type="text/partytown"属性，这是让Partytown接管脚本执行的核心标识。

适配后的完整代码示例：

<!-- Partytown兼容的GTM代码 -->
<script type="text/partytown">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

将GTM-XXXXXXX替换为你的实际容器ID即可。

2. Django场景下的Partytown配置 #

在加载Partytown脚本之前，添加转发配置，确保dataLayer的事件能正常传递到Partytown的worker线程：

<script>
partytown = {
    forward: ['dataLayer.push']
};
</script>
<script src="{% static 'js/partytown/partytown.js' %}"></script>

注意要把Partytown脚本放在<head>最顶部，优先于GTM代码加载；同时确认Django的静态文件配置正确，partytown.js的路径能正常访问。

3. 验证排查步骤 #

• 打开浏览器开发者工具，切换到Application标签，查看Service Workers下Partytown的worker是否正常注册
• 进入Partytown的worker控制台，检查是否有GTM加载的相关日志，确认无报错
• 如果GTM容器内的标签依赖主线程的全局API，需要把对应的API添加到partytown.forward数组中，比如依赖window.ga就添加'window.ga'

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