Google Tagmanager Javascript 变量返回“未定义”，而 console.log 有数据

Question

我在 GTM 中有一个变量，它监听特定的表单选项更改并返回（或应该返回）包含所有选定选项的字符串。

我从 console.log 中在控制台中看到正确的数据，但在 GTM 预览模式下变量值是“未定义”。我不明白为什么变量是“未定义”的，因为我声明了一个空字符串，所以至少它应该始终返回一个空字符串值而不是未定义。

function(){
  var stringFacetValues = '';
  var arrayFacetValues = [];
  var els = document.querySelectorAll('form[class="wizard-facets"] select[class^="form-select"]');
  
  Array.prototype.forEach.call(els, function(el) {
    el.addEventListener("change", function() {
      var checkboxes = document.querySelectorAll('option:checked');
      
      for (var i = 0; i < checkboxes.length; i++) {
        arrayFacetValues.push(checkboxes[i].innerHTML);
      }
      stringFacetValues = arrayFacetValues.toString();
      console.log(stringFacetValues);
      return stringFacetValues;
    });
  });
}

Answer 1

99% 的情况下要么是时序问题，要么是 CSP 问题。

时机：确保它确实有东西可以在您触发它时准确返回。

CSP：确保允许不安全评估。 GTM 可以在没有 unsafe-eval 的情况下工作，但所有 CJS 变量将始终返回 undefined。

实际上，您可以绕过 unsafe-eval，并且仍然能够在 GTM 中执行自定义 JS，但是通过 GTM 的模板，它们并不像 CJS 那样简单。也总有一个选项可以通过 CHTML 标签来实现这一点，但这些将利用不安全内联。他们会污染 DOM。