跨域iframe向父级页面GTM传递自定义JS变量的实现咨询

1. 修改iframe侧发送代码 #

把你动态生成的字符串字段加到发送的对象中即可，同时注意修正原有代码中postMessage目标地址的多余空格（目标地址需填写父页面的实际域名，不是iframe自身域名）：

// 假设你动态生成的字符串存在变量yourDynamicStr中，替换为你实际获取的自定义JS变量
const yourDynamicStr = "你要传递的动态字符串值";
try {
    const postObject = JSON.stringify({
        event: 'iframeSave',
        customTrackStr: yourDynamicStr // 新增自定义字段存储要传递的变量
    });
    // 第二个参数为父页面的源地址，替换为你父页的实际访问地址
    parent.postMessage(postObject, 'https://www.your-parent-site.com/');
} catch (e) {
    window.console && window.console.log(e);
}

2. 父页监听代码无需调整 #

你现有父页的监听逻辑已经会把postMessage传递的所有数据存入dataLayer的postMessageData字段中，变量传递到父页后，会自动跟着iframeSave事件推送到数据层，结构如下：

// dataLayer推送后的数据结构示例
{
  event: 'iframeSave',
  postMessageData: {
    event: 'iframeSave',
    customTrackStr: "你从iframe传过来的动态字符串"
  }
}

3. GA 标签配置调用 #

你可以直接在GA配置后台（或GTM中）新建数据层变量，读取postMessageData.customTrackStr的值，在iframeSave自定义事件触发时，将该变量作为事件的自定义参数/自定义维度使用即可。

注意事项 #

• 生产环境不要使用*作为postMessage的目标源，必须写死父页面的实际域名，避免数据泄露风险
• 传递的字符串如果包含特殊字符，JSON.stringify会自动处理，不需要额外转义

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