如何将网站URL查询参数键值对推送到Google Tag Manager Data Layer并在GTM中查看

你现有代码的核心问题是动态对象键未用方括号包裹，导致实际生成的键名是字符串params.key，而非URL参数中key对应的值。同时建议推送时携带自定义事件，方便GTM识别参数推送完成的时机，修正后代码如下：

$(document).ready(function (){
    const urlSearchParams = new URLSearchParams(window.location.search);
    const params = Object.fromEntries(urlSearchParams.entries());

    console.log(params)
    // 新增参数存在性判断，避免推送空值
    if(params.key && params.value) {
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({
            // 动态键需用方括号包裹，才能取变量对应的值作为键名
            [params.key]: params.value,
            // 自定义事件，用于触发GTM后续规则
            'event': 'query_params_pushed'
        })
    }
})

如果你需要把所有URL查询参数统一存储到dataLayer的单个对象下，可改为以下写法：

dataLayer.push({
    'all_query_params': params,
    'event': 'query_params_pushed'
})

本地验证推送结果 #

页面加载完成后，打开浏览器控制台输入dataLayer回车，即可查看所有已推送的dataLayer数据，确认你需要的键值对是否已成功写入。

GTM变量配置 #

• 进入GTM后台，左侧菜单选择「变量」，点击用户定义变量区域的「新建」按钮
• 变量类型选择「数据层变量」
• 数据层变量名填写你推送的键名：如果是单独推送的键值对，直接填对应的键即可；如果是存在all_query_params对象下的参数，填写all_query_params.你的参数名
• 保存变量即可

GTM预览验证 #

• 点击GTM后台右上角的「预览」按钮，输入带查询参数的网站地址进入预览模式
• 左侧事件列表找到你推送的自定义事件query_params_pushed，点击后切换到「变量」标签，即可看到你创建的变量已自动读取到对应的值
• 后续可创建触发条件为「事件等于query_params_pushed」的触发器，关联你需要触发的统计标签，即可将参数传递到对应的统计平台

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