如何通过GTM将Cookie值预填充到Odoo17的表单字段中？

问题背景 #

• GTM已成功从URL提取GCLID并保存为第一方Cookie adclickid，Cookie值可正常查看
• Odoo 17中已创建数据库字段x_adclickid，需要在联系人表单加载时填充该Cookie值
• 目前使用的GTM脚本无法正常工作，但直接在Chrome控制台运行该脚本却能成功填充字段

原GTM脚本 #

window.addEventListener('load', function() {
  var adclickid = document.cookie.split('; ').find(row => row.startsWith('adclickid='));
  if (adclickid) {
    var field = document.querySelector('input[name="x_adclickid"]');
    if (field) field.value = adclickid.split('=')[1];
  }
});

控制台测试情况 #

1. 执行获取Cookie的代码能得到正确值（示例：adclickid=123456789）
2. 页面加载完成后表单字段值依然为空
3. 直接在控制台运行上述脚本，字段可成功填充

问题原因 #

Odoo 17的表单字段是动态加载的，原脚本绑定的load事件触发时，目标字段还未被渲染到DOM中，导致脚本找不到字段无法填充。

纯GTM解决方案 #

使用MutationObserver监听DOM变化，直到目标字段出现后再执行填充操作，无需修改Odoo代码或调整GTM注入方式。

修改后的GTM脚本 #

// 初始化DOM变化监听器
const observer = new MutationObserver((mutations) => {
  // 尝试定位目标输入字段
  const targetField = document.querySelector('input[name="x_adclickid"]');
  
  if (targetField) {
    // 提取Cookie中的adclickid值
    const adclickidCookie = document.cookie.split('; ').find(row => row.startsWith('adclickid='));
    if (adclickidCookie) {
      const adclickidValue = adclickidCookie.split('=')[1];
      targetField.value = adclickidValue;
    }
    // 找到字段后立即停止监听，避免资源浪费
    observer.disconnect();
  }
});

// 配置监听范围：监听body下所有子元素的添加/移除变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

方案说明 #

MutationObserver会持续监听页面DOM的动态变化，一旦目标字段input[name="x_adclickid"]被渲染到页面中，就会立即提取Cookie值并填充到字段里，完成后自动停止监听，既保证了准确性又不会造成性能损耗。

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