GTM中使用XMLHttpRequest.responseText作为变量返回undefined如何解决

核心原因 #

你遇到的问题本质是GTM自定义变量默认同步求值，而XMLHttpRequest是异步执行的，请求还未返回结果时，变量已经完成计算，因此拿到undefined。

正确实现方案 #

步骤1：修改代码把异步结果存入GTM数据层 #

不要尝试直接把异步请求的返回值赋值给GTM变量，而是借助GTM自带的Data Layer做中转，同时触发自定义事件标记请求完成：

function httpGetAsync (url, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET", url, true);
  // 新增错误处理，避免请求失败无反馈
  xmlHttp.onerror = function() {
    callback(null, '接口请求异常');
  }
  xmlHttp.onreadystatechange = function() {
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
      callback(xmlHttp.responseText);
    }
  }
  xmlHttp.send();
}

httpGetAsync("https://www.example.pl/example-uid-cookie", function(response, error) {
  if (error) {
    console.error(error);
    return;
  }
  // 初始化数据层，把返回结果和完成事件推送到数据层
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'uid_cookie_fetched', // 自定义事件名，后续用作触发条件
    uid_cookie_value: response // 存储接口返回结果
  });
});

步骤2：配置GTM相关资源 #

• 新建自定义HTML标签，将上述代码粘贴进去，触发条件设置为「页面浏览」/「DOM已准备就绪」，保证请求尽早发起
• 新建数据层变量，变量名称填写uid_cookie_value，后续即可通过该变量获取接口返回的内容
• 所有需要用到uid_cookie_value的标签，触发条件统一修改为自定义事件uid_cookie_fetched，确保标签执行时请求已经完成，不会拿到空值

其他异常排查 #

如果按照上述配置还是拿不到值，按以下顺序排查：

• 检查跨域配置：如果接口域名和当前站点域名不一致，需要接口配置Access-Control-Allow-Origin响应头允许当前站点访问，否则浏览器会拦截请求，无法拿到返回值
• 检查接口本身状态：可以在onreadystatechange回调中增加日志打印xmlHttp.readyState和xmlHttp.status，如果返回状态码为404/403/500等异常值，说明接口地址错误或需要鉴权参数
• 如果接口返回的是JSON格式数据，拿到responseText后需要用JSON.parse(response)转成JS对象再使用，避免格式不匹配问题

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