GTM中JavaScript变量返回undefined，console.log却有数据的问题

问题根源 #

你的变量函数本身没有返回值——代码里的return stringFacetValues是写在change事件的回调函数内部的，这个return只对回调函数生效，不会让外层的GTM变量函数返回任何内容，所以GTM执行变量时得到的就是undefined。

另外，这种在变量函数里添加事件监听的逻辑不符合GTM的工作机制：GTM变量是在标签触发时才会执行一次函数获取值，不是持续监听页面事件，所以监听change事件的代码在这里完全起不到作用，反而会导致变量函数无返回值。

修正后的代码 #

直接在变量函数里计算当前页面中所有选中的选项内容，不需要事件监听：

function(){
  var arrayFacetValues = [];
  // 精准定位目标表单下选中的选项
  var selectedOptions = document.querySelectorAll('form.wizard-facets select[class^="form-select"] option:checked');
  
  selectedOptions.forEach(function(opt) {
    arrayFacetValues.push(opt.innerHTML);
  });
  
  var stringFacetValues = arrayFacetValues.toString();
  console.log(stringFacetValues);
  return stringFacetValues;
}

补充说明 #

1. 之前控制台能看到正确输出，是因为select触发change事件时，回调里的代码执行并打印了值，但此时GTM的变量函数早就执行完毕并返回了undefined，两者的执行时机完全独立。
2. 如果需要在选项变化时触发相关标签，要单独创建自定义触发器：选择DOM事件类型为change，设置触发条件为目标元素匹配你指定的select，这样选项变化时标签会触发，此时调用上述变量就能拿到最新的选中值。

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