javascript - Google Analytics 页面内分析是如何工作的？

Google Analytics 具有一个“页面内分析”视图，可以直接在您自己的网站上显示点击率和其他信息。我想建立一个类似的系统来记录所有点击。

问题是我不太确定谷歌是如何实现他们的页面内分析视图的——他们似乎使用了一个或两个iframe，并且在其他页面上注入了他们自己的HTML和JavaScript。

要如何去做这样的事情——使用 iframes 是最好的方法吗？如果 domainX 试图操纵 domainY 的渲染，如何才能避免 JavaScript 的同源安全策略？

答案＃1

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

所以事情是这样运作的（就我所见）：

• 当您打开页面内分析时，首先会被带到 https://www.google.com/analytics/reporting/iyp_launch
• 此页面会重定向到您的网站，并在 URL 中添加一个 Google 会话（例如 http://example.com/#gaso=THESESSION）
• 追踪器现在会检查推荐来源是否为 iyp_launch 并且 gaso 是否已设置。如果是，它不仅会加载追踪器，还会注入请求更多数据和渲染覆盖层所需的 JS。这样，JS 就会在框架（或窗口）内执行，从而绕过同源策略。
• 由于谷歌分析已经跟踪了您的访问（即识别您为查看过前一页面的同一用户），从那时起，它可以在您的访问期间（即您关闭页面之前）将额外的 JavaScript 与跟踪器一起注入。这样，在您点击链接后，覆盖层可以再次呈现。

所以我想最终结论是这样的：如果网站所有者已经信任你，在他的网站上添加了你控制的脚本，那么像页面内分析这样的事情是可以做的（这是一个很好的例子，说明在做这种事情之前应该非常小心）。如果你没有那种访问权限，可能就无法绕过同源策略——至少，我想不到其他方法（除了可能通过你的服务器代理所有请求，但那会带来其他重大问题）。

答案＃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());
}

不过不知道是否可行。