如何将HTML页面的变量传入Google Tag Manager的自定义HTML标签中？

方法1：通过全局window对象传递 #

这种方法简单直接，适合快速实现：

• 首先在你的HTML页面中，在GTM初始化代码之前添加一段脚本，把要传递的值挂载到全局window对象上：

  <script>
    // 替换成你实际要传递的内容
    window.myCustomValue = '你的自定义内容';
  </script>
  

• 然后在GTM的自定义HTML标签里，直接引用这个全局变量：

  <script>
    const d = window.myCustomValue;
    console.log(d);
  </script>
  

• 注意：必须确保这段全局变量的代码在GTM的初始化<script>之前执行，否则GTM加载时变量还未定义，会返回undefined。

方法2：通过Data Layer传递（推荐） #

这种方法更符合GTM的最佳实践，不会污染全局命名空间，也方便后续扩展其他数据：

• 第一步，在HTML页面的GTM初始化代码之前，初始化并推送数据到Data Layer：

  <script>
    window.dataLayer = window.dataLayer || [];
    // 推送自定义变量，key可自行命名（比如myCustomVar）
    dataLayer.push({
      'myCustomVar': '你的自定义内容'
    });
  </script>
  

• 第二步，在GTM后台创建一个数据层变量：
  1. 进入GTM控制台，点击左侧「变量」→「用户定义的变量」→「新建」
  2. 选择「数据层变量」类型
  3. 在「数据层变量名称」中填写你刚才推送的key（比如myCustomVar）
  4. 给变量起一个易记的名称（比如「自定义页面变量」），保存即可
• 第三步，在你的自定义HTML标签里，用GTM变量语法引用它：

  <script>
    const d = {{自定义页面变量}}; // 替换为你创建的变量名称
    console.log(d);
  </script>
  

测试建议 #

设置完成后，记得使用GTM的「预览」模式进行测试，打开浏览器控制台查看变量是否正确输出，确保数据传递无误。

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