谷歌分析中的网页内分析是如何工作的？

Question

Google Analytics具有“In-Page Analytics”视图，可在您自己的网站上直接显示点击率和其他信息。我想建立类似的东西来记录所有点击。

问题是我不太确定Google如何实现他们的In-Page Analytics视图-它们似乎使用一个或两个iframe，并在其他页面上注入了自己的HTML和JavaScript。

如何做到这一点- iframe是最好的选择吗？如果domainX试图操作domainY的渲染，如何避免JavaScript的同源安全策略？

- CJD

---

如果你要做类似的事情，请使用自定义事件进行跟踪。我之前发布了更多信息：https://dev59.com/DFTTa4cB1Zd3GeqPu7jL#5132409 - Phil C

这个问题的答案是：“通常情况下，它不会。” - Yahel

我已经在许多网站上尝试过，它可以正常工作... - CJD

Answer 1

这是一个非常有趣的问题。你说得对，同源策略禁止注入JS。但是Google Analytics有一个优势：它已经在你的网站上了（跟踪代码）。

因此，这就是它的工作原理（据我所见）：

• 当您打开页面内分析时，首先会进入https://www.google.com/analytics/reporting/iyp_launch
• 此页面将重定向到您的网站，并将Google会话添加到URL中（例如http://example.com/#gaso=THESESSION）
• 现在跟踪器会检查引荐者是否为iyp_launch并且gaso已设置。如果是，则不仅加载跟踪器，还注入了请求更多数据和呈现覆盖层所需的JS。这样，JS就在框架（或窗口）内执行，绕过了同源策略。
• 由于Google Analytics已经跟踪了您的访问（即将您识别为查看上一页的同一用户），因此它可以随着跟踪器一起注入额外的JS，直到您的访问结束（即关闭页面）。这样，覆盖层可以在您单击链接后再次呈现。

我想说的是：如果网站所有者已经信任您并添加了您控制的脚本，则可以执行诸如页面分析之类的操作（这是在执行此类操作之前应非常小心的一个很好的例子）。如果您没有访问该网站的权限，则可能无法绕过同源策略 - 至少我想不到其他方法来做到这一点（除非通过您的服务器代理所有请求，但这会导致其他重大问题）。

- Timo

Answer 2

我认为这可以很简单地完成。您可以注入JavaScript，以确保每当用户点击链接时，它会请求/发布到iframe中的特殊页面。类似于这样（jQuery）：

$('a').live('click', function() {
    $('#' + iframeid).attr('http://somedomain.com/my_magic_page.php?linkClicked=' + $(this).attr('id') + '&page=' + window.location.toString());
}

不知道它是否能够工作。

- Alxandr

---

我不认为这会起作用。jQuery的attr函数需要一个或两个参数。如果您使用一个参数调用，则需要是要设置的属性映射，或者要获取的属性名称。也许我错了，但是这个例子似乎不正确！ - BCsongor