如何使用GTM在共用同一容器的域名间传递dataLayer变量？

方法一：通过URL参数传递 #

• 源域名操作：创建自定义HTML标签，监听跳转至目标域名的链接，将dataLayer变量拼接到URL参数中

  document.addEventListener('click', function(e) {
    const targetLink = e.target.closest('a');
    if (targetLink && targetLink.hostname === '目标域名.com') {
      // 从dataLayer中获取需要传递的变量，这里以user_id为例
      const targetVar = window.dataLayer.find(item => item.user_id)?.user_id;
      if (targetVar) {
        const url = new URL(targetLink.href);
        url.searchParams.set('gtm_transfer_var', targetVar);
        targetLink.href = url.toString();
      }
    }
  });
  

  触发条件设为「所有页面」或特定页面的点击事件。

• 目标域名操作：

  1. 创建URL变量，提取参数gtm_transfer_var的值；
  2. 创建自定义HTML标签（触发条件设为「页面加载完成」），将提取到的参数推入dataLayer：

     const receivedVar = {{URL - gtm_transfer_var}};
     if (receivedVar) {
       window.dataLayer.push({
         'event': 'cross_domain_var_received',
         'user_id': receivedVar
       });
     }
     

方法二：利用跨域Cookie（适用于同主域名下的子域名，如a.example.com和b.example.com） #

• 源域名操作：创建自定义HTML标签，将dataLayer变量写入跨域Cookie

  const targetVar = window.dataLayer.find(item => item.user_id)?.user_id;
  if (targetVar) {
    // 设置domain为主域名，确保子域名可访问
    document.cookie = `gtm_transfer_var=${targetVar}; domain=.example.com; path=/; secure; SameSite=None`;
  }
  

  触发条件设为「所有页面」或变量出现的特定事件。

• 目标域名操作：

  1. 创建第一方Cookie变量，提取gtm_transfer_var的值；
  2. 创建自定义HTML标签，将Cookie值推入dataLayer：

     const receivedVar = {{Cookie - gtm_transfer_var}};
     if (receivedVar) {
       window.dataLayer.push({
         'event': 'cross_domain_var_received',
         'user_id': receivedVar
       });
     }
     

方法三：使用postMessage跨域通信（适用于不同主域名场景） #

• 源域名操作：跳转前通过postMessage发送变量（需确保目标页面已加载）

  const targetWindow = window.open('https://目标域名.com');
  const targetVar = window.dataLayer.find(item => item.user_id)?.user_id;
  if (targetWindow && targetVar) {
    // 延迟发送确保目标页面已初始化
    setTimeout(() => {
      targetWindow.postMessage({
        type: 'GTM_DATA_TRANSFER',
        payload: {user_id: targetVar}
      }, 'https://目标域名.com');
    }, 1000);
  }
  

• 目标域名操作：创建自定义HTML标签（触发条件设为「页面加载完成」），监听消息并推入dataLayer

  window.addEventListener('message', function(e) {
    // 验证来源域名，避免恶意消息
    if (e.origin === 'https://源域名.com' && e.data.type === 'GTM_DATA_TRANSFER') {
      window.dataLayer.push({
        'event': 'cross_domain_var_received',
        ...e.data.payload
      });
    }
  });
  

注意事项 #

• 所有方法需确保两个域名均加载同一GTM容器；
• URL参数传递不要包含敏感信息，会暴露在地址栏和日志中；
• Cookie传递需符合浏览器隐私规则（设置Secure和SameSite=None属性，仅在HTTPS环境下生效）；
• postMessage需严格验证消息来源域名，防止安全风险。

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