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

Question

我正在尝试设置一个send event源自iframe我的域并放置在其他域（不是我的）的域。我将分析代码放在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>

在分析代码（来自UA-XXXXXXXX-XXmy parentdomain.com）下面，我检查 iframe 是否不在my上parentdomain.com，然后将tracker属性设置为div id ads_close：

<script>
ref = document.referrer;
whitelist = ["parentdomain.com"];
match = false;

for( var i = whitelist.length - 1; i >= 0; i-- ) {

 if( ref.indexOf( whitelist[ i ] ) > -1 ) { match = true; }

}
// If is not the parent domain, then add the onClick atributte to the ID "ads_close"
if( ! match ) {

  refer = document.referrer;
  var str1 ="gtag(\'event\', \'External\', {\'event_category\': \'yes\',\'event_label\': ";
  var str2 = "'";  
  var str3 = refer;
  var str4 = "'";
  var str5 = "});";
  var tracker = str1.concat(str2) + str3 + str4 + str5;
ads_close.setAttribute("onClick", tracker);

 }
</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 的 div 时，我都无法在我的google 分析帐户adspop_close上看到该事件...parentdomain.com

问题：

我究竟做错了什么？

Answer 1

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

解决方案1

Google开发指南向我们展示了这种跨域交互的方法（向下滚动到 IFRAME 部分）。

要将交互链接到同一会话，您需要共享客户端 ID。不幸的是，iframe 通常会在 google 跟踪准备好客户端 ID 之前就使用页面的 HTML 进行初始化。所以我们不能只是在加载时传递它，而是需要等待一切然后使用 postMessage。

这是包含页面的代​​码示例：

<iframe id="destination-frame" src="https://destination.com"></iframe>

<script>
ga('create', 'UA-XXXXX-Y', 'auto');
ga(function(tracker) {
  // Gets the client ID of the default tracker.
  var clientId = tracker.get('clientId');

  // Gets a reference to the window object of the destionation iframe.
  var frameWindow = document.getElementById('destination-frame').contentWindow;

  // Sends the client ID to the window inside the destination frame.
  frameWindow.postMessage(clientId, 'https://destination.com');
});
</script>

这是 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

您可以反转 postMessage 通信的逻辑。您可以设置任何事件来触发 postMessage，将类别、操作和标签等信息传递到包含的页面，而不是在 iframe 中进行任何跟踪。在包含页面中，您可以为 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
  });
});

和包含页面：

<script>
  try {
    var postObject = JSON.stringify({
      event: 'iframeClickEvent', 
      category: 'someCategory',
      action: 'someAction',
      label: 'someLabel'
    });
    parent.postMessage(postObject, 'https://www.YOURWEBSITE.com');
  } catch(e) {
    window.console && window.console.log(e);
  }
</script>