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

Question

我正在尝试从源 self 的域并放置在其他域(不是我的域)的 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>

在分析代码(使用来 self 的 parentdomain.com 的 UA-XXXXXXXX-XX)下面，我检查 iframe 是否 我的 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 为 adspop_close 的 div 时，我都无法在我的 parentdomain.com Google Analytics 帐户上看到该事件...

问题:

我做错了什么？

Answer 1

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

解决方案1

Google Development Guide向我们展示了这种跨域交互的方法(向下滚动到 IFRAME 部分)。

要将交互链接到同一 session ，您需要共享客户端 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:

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

和包含页面:

window.addEventListener('message', function(message) {
  try{
    var data = JSON.parse(message.data);
    var dataLayer = window.dataLayer || (window.dataLayer = []);
    if (data.event === 'iframeClickEvent') {
      dataLayer.push({ 'event': 'someEvent', .... });
    }
  } catch(e){}
});