Google Analytics features an 'In-Page Analytics' view to show click-through rates and other information directly on your own website. I'm looking to build something similar that logs all clicks.
Google Analytics(分析)具有“页内分析”视图,可直接在您自己的网站上显示点击率和其他信息。我正在寻找类似的东西记录所有点击。
The problem is I'm not really sure how Google implement their In-Page Analytics views - they seem to use an iframe, or two, and have injected their own HTML and JavaScript onto other pages.
问题是我不确定Google如何实施他们的页内分析视图 - 他们似乎使用了一两个iframe,并将自己的HTML和JavaScript注入其他页面。
How would one go about doing such a thing - are iframes the best way to go? How would you avoid the same-origin security policies of Javascript if domainX is trying to manipulate the rendering of domainY?
怎么会去做这样的事情 - iframes是最好的方式吗?如果domainX试图操纵domainY的渲染,你会如何避免Javascript的同源安全策略?
2 个解决方案
#1
9
This is a very interesting question. You're right, the same origin policy forbids injecting JS. But Google Analytics has an advantage: it already is in your site (the tracker code).
这是一个非常有趣的问题。你是对的,同样的原始政策禁止注入JS。但谷歌分析有一个优势:它已经在你的网站(跟踪代码)。
So here is how it works (as far as I can see):
所以这是它的工作原理(据我所见):
- When you open in-page analytics, you are first taken to https://www.google.com/analytics/reporting/iyp_launch
- This page redirects to your site and adds a Google session to the url (like http://example.com/#gaso=THESESSION
- The tracker now checks if the referrer is iyp_launch and gaso is set. If yes, it does not only load the tracker, but also injects the JS needed for requesting further data and rendering the overlays. This way, the JS is executed inside the frame (or window) and bypasses the same-origin policy.
- Since Google Anaytics already tracks your visit (i.e. identifies you as the same user that viewed the previous page), it can from then on inject the additional JS along with the tracker until your visit is over (i.e. you close the page). This way, the overlays can be rendered again after you click a link.
当您打开页内分析时,首先会转到https://www.google.com/analytics/reporting/iyp_launch
此页面会重定向到您的网站,并在网址中添加Google会话(例如http://example.com/#gaso=THESESSION
跟踪器现在检查引用者是否是iyp_launch并且设置了gaso。如果是,它不仅会加载跟踪器,还会注入请求更多数据和渲染叠加层所需的JS。这样,JS在框架(或窗口)内执行,并绕过同源策略。
由于Google Anaytics已经跟踪了您的访问(即将您识别为查看上一页的用户),因此可以在此之后将其他JS与跟踪器一起注入,直到您的访问结束(即您关闭该页面)。这样,单击链接后可以再次呈现叠加层。
So I guess the bottom line is this: Things like in-page analytics can be done if the site's owner has already trusted you by adding a script you control to his website (this is a good example why one should be very careful before doing such a thing). If you don't have that kind of access to the site, it might be impossible to bypass the same-origin policy - at least, I can't think of another way to do it (except maybe proxying all the requests through your sever, but that leads to other major problems).
所以我想底线是这样的:如果网站的所有者已经通过向您的网站添加您控制的脚本来信任您,那么可以进行页内分析等事情(这是一个很好的例子,为什么在这样做之前应该非常小心一个东西)。如果您没有对该站点的访问权限,则可能无法绕过同源策略 - 至少,我无法想到另一种方法(除了可能通过您的服务器代理所有请求) ,但这导致其他主要问题)。
#2
-1
I think this can be done quite simply. You inject javascript that makes sure that whenever a user clicks a link it requests/posts to a special page in the iframe. Something like this (jquery):
我认为这可以很简单地完成。您注入了javascript,确保每当用户点击链接时,它会请求/发布到iframe中的特殊页面。像这样的东西(jquery):
$('a').live('click', function() {
$('#' + iframeid).attr('http://somedomain.com/my_magic_page.php?linkClicked=' + $(this).attr('id') + '&page=' + window.location.toString());
}
Don't know if it'll work though.
不知道它是否会起作用。
#1
9
This is a very interesting question. You're right, the same origin policy forbids injecting JS. But Google Analytics has an advantage: it already is in your site (the tracker code).
这是一个非常有趣的问题。你是对的,同样的原始政策禁止注入JS。但谷歌分析有一个优势:它已经在你的网站(跟踪代码)。
So here is how it works (as far as I can see):
所以这是它的工作原理(据我所见):
- When you open in-page analytics, you are first taken to https://www.google.com/analytics/reporting/iyp_launch
- This page redirects to your site and adds a Google session to the url (like http://example.com/#gaso=THESESSION
- The tracker now checks if the referrer is iyp_launch and gaso is set. If yes, it does not only load the tracker, but also injects the JS needed for requesting further data and rendering the overlays. This way, the JS is executed inside the frame (or window) and bypasses the same-origin policy.
- Since Google Anaytics already tracks your visit (i.e. identifies you as the same user that viewed the previous page), it can from then on inject the additional JS along with the tracker until your visit is over (i.e. you close the page). This way, the overlays can be rendered again after you click a link.
当您打开页内分析时,首先会转到https://www.google.com/analytics/reporting/iyp_launch
此页面会重定向到您的网站,并在网址中添加Google会话(例如http://example.com/#gaso=THESESSION
跟踪器现在检查引用者是否是iyp_launch并且设置了gaso。如果是,它不仅会加载跟踪器,还会注入请求更多数据和渲染叠加层所需的JS。这样,JS在框架(或窗口)内执行,并绕过同源策略。
由于Google Anaytics已经跟踪了您的访问(即将您识别为查看上一页的用户),因此可以在此之后将其他JS与跟踪器一起注入,直到您的访问结束(即您关闭该页面)。这样,单击链接后可以再次呈现叠加层。
So I guess the bottom line is this: Things like in-page analytics can be done if the site's owner has already trusted you by adding a script you control to his website (this is a good example why one should be very careful before doing such a thing). If you don't have that kind of access to the site, it might be impossible to bypass the same-origin policy - at least, I can't think of another way to do it (except maybe proxying all the requests through your sever, but that leads to other major problems).
所以我想底线是这样的:如果网站的所有者已经通过向您的网站添加您控制的脚本来信任您,那么可以进行页内分析等事情(这是一个很好的例子,为什么在这样做之前应该非常小心一个东西)。如果您没有对该站点的访问权限,则可能无法绕过同源策略 - 至少,我无法想到另一种方法(除了可能通过您的服务器代理所有请求) ,但这导致其他主要问题)。
#2
-1
I think this can be done quite simply. You inject javascript that makes sure that whenever a user clicks a link it requests/posts to a special page in the iframe. Something like this (jquery):
我认为这可以很简单地完成。您注入了javascript,确保每当用户点击链接时,它会请求/发布到iframe中的特殊页面。像这样的东西(jquery):
$('a').live('click', function() {
$('#' + iframeid).attr('http://somedomain.com/my_magic_page.php?linkClicked=' + $(this).attr('id') + '&page=' + window.location.toString());
}
Don't know if it'll work though.
不知道它是否会起作用。