Google Analytics（分析）页内分析如何工作？

Question

Google Analytics 具有“页面内分析”视图，可直接在您自己的网站上显示点击率和其他信息。我正在寻找构建类似的东西来记录所有点击。

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

如何去做这样的事情 - iframe 是最好的方式吗？如果 domainX 试图操纵 domainY 的渲染，你将如何避免 Javascript 的同源安全策略？

Answer 1

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

这就是它的工作原理（据我所知）：

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

所以我想底线是这样的：如果网站所有者已经通过向他的网站添加由您控制的脚本来信任您，则可以完成页面内分析之类的事情（这是一个很好的例子，为什么人们应该非常小心在做这样的事情之前）。如果您没有对该站点的那种访问权限，则可能无法绕过同源策略-至少，我想不出另一种方法（除非通过您的服务器代理所有请求，但这会导致其他主要问题）。

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

不知道能不能用。