GTM自定义JavaScript（CJS）变量取值不更新问题及替代方案咨询

问题1：Custom JavaScript变量无法更新表单标题的诱因与解决方法 #

诱因 #

• 原生document.querySelector方法永远返回DOM树中第一个匹配选择器的元素，多数场景下旧弹窗关闭后仅被设置为隐藏（未从DOM中移除），因此后续调用该方法时始终返回第一个弹窗的标题元素，取值固定为旧值。
• 若触发器配置的触发时机为「元素首次可见」，也会导致后续新弹窗出现时变量未重新计算。

解决方法 #

1. 首先在GTM内置变量配置中，勾选启用Visible Element变量，该变量会返回当前触发元素可见性规则的DOM元素。
2. 替换原有Custom JavaScript变量的代码为如下内容：

function() {
  // 优先从当前触发可见规则的表单容器下查找标题
  var currentForm = {{Visible Element}};
  if (currentForm) {
    var titleNode = currentForm.querySelector('div._form-title');
    if (titleNode) return titleNode.innerText.trim();
  }
  // 兜底逻辑：遍历所有标题元素，返回第一个可见的标题
  var allTitleNodes = document.querySelectorAll('div._form-title');
  for (var i = 0; i < allTitleNodes.length; i++) {
    // offsetParent为null代表元素处于隐藏状态
    if (allTitleNodes[i].offsetParent !== null) {
      return allTitleNodes[i].innerText.trim();
    }
  }
  return '';
}

3. 检查元素可见性触发器配置：触发时机选择「每次元素可见」，CSS选择器匹配所有弹窗表单的外层容器，而非仅匹配标题元素。

问题2：截取Click Text变量前25个字符的实现方法 #

创建一个新的Custom JavaScript变量，写入如下代码即可：

function() {
  var rawText = {{Click Text}} || '';
  // 若需要超出25字符后追加省略号，可替换为下方注释内的代码
  // return rawText.length > 25 ? rawText.slice(0,25).trim() + '...' : rawText.trim();
  return rawText.slice(0, 25).trim();
}

内容的提问来源于stack exchange，提问作者Sophie Nicole Casey