Javascript 将gtag事件从跨域发送到父域

我正在尝试从源自我的域并放置在其他域（不是我的域）的

iframe

设置

send事件。我将分析代码放在
iframe
上

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-XX',{ 'anonymize_ip': true });
</script>

上面的代码在
parentdomain.com
上以这种方式呈现，如果不是：

<div class="adspop_close" id="adspop_close" onclick="gtag('event', 'Externos', {'event_category': 'yes','event_label': 'https://www.theotherdomain.com/post/'});"></div>



问题：

每次我点击ID为
adspop\u close的div时，我都无法在我的
parentdomain.com
谷歌分析账户上看到事件

问题：

“我做错了什么？”
如果您尝试跟踪来自iframe本身的数据，它将显示为在另一个会话中的另一个域上发生交互，我认为这是您试图避免的。如果您希望跟踪iframe中的交互，并将其作为父容器的一部分，那么最好的方法是使用将事件传递给父容器，在父容器中可以自然处理事件。出于安全原因，包含页面没有对iframe的脚本访问权限，但是iframe可以通过postMessage向包含页面发送通信

解决方案1
向我们展示了这种跨域交互的方法（向下滚动到IFRAME部分）

要将交互链接到同一会话中，您需要共享客户端id。不幸的是，iFrame通常在google tracking准备好客户端ID之前很久就用页面的HTML初始化了。因此，我们不能只在加载时传递它，而是需要等待一切，然后使用postMessage

下面是包含页面代码的示例：


ga（“创建”、“UA-XXXXX-Y”、“自动”）；
ga（功能（跟踪器）{
//获取默认跟踪器的客户端ID。
var clientId=tracker.get（'clientId'）；
//获取对目标化iframe的窗口对象的引用。
var frameWindow=document.getElementById（'destination-frame'）.contentWindow；
//将客户端ID发送到目标帧内的窗口。
frameWindow.postMessage（clientId，'https://destination.com');
});

以下是iframe中的侦听器：

window.addEventListener('message', function(event) {
  // Ignores messages from untrusted domains.
  if (event.origin != 'https://destination.com') return;

  ga('create', 'UA-XXXXX-Y', 'auto', {
    clientId: event.data
  });
});

该页面还有一些额外的逻辑来处理客户端id从未通过postMessage传递的情况。如果您还需要传递“UA”字符串，并等待在iframe中完全初始化gtag，那么这也是可行的。收到所需数据后，初始化gtag并跟踪。您不需要重写任何DOM

解决方案2
您可以相反地反转消息后通信的逻辑。您不必在iframe中进行任何跟踪，而是可以设置任何事件来触发postMessage，将类别、操作和标签等信息传递到包含页面。在包含页面中，您将为postMessage添加一个侦听器，并通过触发gtag事件来处理它

例如，从iframe：

window.addEventListener('message', function(event) {
  // Ignores messages from untrusted domains.
  if (event.origin != 'https://destination.com') return;

  ga('create', 'UA-XXXXX-Y', 'auto', {
    clientId: event.data
  });
});


试一试{
var postObject=JSON.stringify({
事件：“iframeClickEvent”，
类别：“someCategory”，
动作：“someAction”，
标签：“someLabel”
});
parent.postMessage（postObject，'https://www.YOURWEBSITE.com');
}捕获（e）{
window.console&&window.console.log（e）；
}

和包含页面：

window.addEventListener（'message'，函数（message）{
试一试{
var data=JSON.parse（message.data）；
var dataLayer=window.dataLayer | |（window.dataLayer=[]）；
如果（data.event==='iframeClickEvent'）{
push（{'event'：'someEvent'，..}）；
}
}捕获（e）{}
});
您的问题不清楚。哪个域显示弹出窗口？即使在iframe中，您计划如何测量另一个网站上的事件？iframe未放置在my
parentdomain.com
上。iframe位于
otherdomain.com
上。我打算如何测量它？答案是通过实现上面所述的代码，除非我做错了什么……您是否检查了请求是否正确发送？@Twistingnether，如何？它与此实现不兼容，这让我抓狂……浏览器应该发送这样的请求吗？。。。