UTM参数Cookie设置多脚本合并方法及可行性咨询

1. 合并脚本是否是合理方案？ #

合并是更推荐的做法，优势非常明显：

• 消除冗余代码：9个独立脚本每个都重复定义createCookie函数，完全没有必要，合并后只需要定义一次函数，减少页面无效代码体积
• 降低维护成本：后续如果要调整Cookie过期时长、根域名、路径规则等配置，只需要修改一次即可，不需要逐个调整9个脚本
• 执行效率更高：避免浏览器多次解析执行独立脚本，减少不必要的性能开销

你担心的参数不存在时生成值为undefined的Cookie问题，完全可以通过增加非空判断逻辑解决，不会出现无效Cookie。

2. 合并后的脚本实现 #

你可以直接使用以下代码替换原有9个独立脚本，直接部署到GTM的自定义HTML标签中即可：

<script>
function createCookie(name, value, days) {
    let expires = "";
    // 替换为你自己的网站根域名
    const baseDomain = '.website.com';
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + value + expires + "; domain=" + baseDomain + "; path=/";
}

// 配置你需要处理的参数和对应GTM变量的映射
const paramList = [
    { cookieName: 'utm_source', gtmVar: '{{url - utm source}}' },
    { cookieName: 'utm_medium', gtmVar: '{{url - utm medium}}' },
    { cookieName: 'utm_campaign', gtmVar: '{{url - utm campaign}}' },
    { cookieName: 'utm_content', gtmVar: '{{url - utm content}}' },
    { cookieName: 'utm_term', gtmVar: '{{url - utm term}}' },
    { cookieName: 'gclid', gtmVar: '{{url - gclid}}' },
    { cookieName: 'fbclid', gtmVar: '{{url - fbclid}}' },
    { cookieName: 'msclkid', gtmVar: '{{url - msclkid}}' }
];

// 循环处理每个参数，仅参数有有效值时才创建Cookie
paramList.forEach(item => {
    const paramValue = item.gtmVar;
    // 过滤undefined、null、空字符串的无效值
    if (paramValue && paramValue !== '') {
        createCookie(item.cookieName, paramValue, 1);
    }
});
</script>

注意事项 #

• 请先确认你已经在GTM后台提前创建好了所有对应URL参数的内置变量，变量名称和paramList里的gtmVar字段保持一致即可
• 如果需要调整Cookie的有效期，修改createCookie调用时的第三个参数（单位为天）即可
• 原有代码中的baseDomain未声明属于隐式全局变量，合并代码中已经修复了这个问题，避免污染全局作用域

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