GTM中dataLayer推送的user_id在后台显示undefined问题排查

我从GTM中获取{{user-profile-name}}变量，将其加密后推送到dataLayer，以便后续在GA中使用。代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
<script>
function generateHash(str) {
    var domain = window.location.hostname;
    var hashedString = CryptoJS.MD5(str+domain).toString();
    return hashedString;
}    
var userEmail = {{user-profile-name}};
if (userEmail) {
    var hashedEmail = generateHash(userEmail);
    dataLayer.push({'user_id': hashedEmail});
}
</script>

相关截图：

最终生成的变量仅在“Message”区域显示，其他区域均为undefined，请问哪里操作有误？

错误排查及解决办法 #

1. 变量引用的语法问题 #

如果{{user-profile-name}}是字符串类型的变量，直接写var userEmail = {{user-profile-name}}会导致语法错误——比如变量值是test@xxx.com，代码会变成var userEmail = test@xxx.com，这不符合JS字符串定义规则，直接中断后续逻辑。
解决：给变量加引号，改成：

var userEmail = "{{user-profile-name}}";

2. 代码触发时机不对 #

如果{{user-profile-name}}是页面异步生成的（比如后端渲染、接口返回后赋值），你的代码可能在变量还没拿到值的时候就执行了，导致userEmail为空，dataLayer.push根本没触发。
解决：在GTM里把这段代码的触发条件改成DOM Ready，或者创建一个自定义事件，等{{user-profile-name}}变量有值时再触发代码执行。

3. dataLayer变量读取时机滞后 #

你在其他区域读取user_id时，可能早于dataLayer.push的执行时间，自然拿到undefined。
解决：在GA的标签配置里，把触发条件改成「当dataLayer中出现user_id时触发」，或者依赖你这段代码执行的后续标签，都设置为在这段代码触发之后运行。

4. CryptoJS库加载延迟 #

如果页面加载时CryptoJS还没加载完成，就执行加密函数，会抛出CryptoJS is not defined的错误，直接中断代码，导致dataLayer.push不执行。
解决：要么把CryptoJS的MD5核心代码内嵌到脚本里（避免外部依赖加载延迟），要么把加密逻辑放在库加载完成的回调中执行。

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