傻瓜教程:如何用GA跟踪iframe中的点击

跟踪在iframe中的点击

跟踪在iframe中的点击

由于许多第三方的插件和小工具都会在iframe中,此时如果官方不能提供回调那我们就无法了解这一控件的点击情况。我们经常会有这类需求,譬如微博、百度网盟广告,这些东西到底在我的网页上被点击了多少次我们很想知道。再如左边的网盟广告和右边的网盟广告究竟哪个被点击的次数更多,我们也想知道。一方面我们可以通过第三方给我们的数据了解,另一方面我们也希望能够自己去跟踪。

本周极诣要带领大家挑战这一难点,即iframe中的点击。由于不同域的iframe父子页面间传递消息十分困难,我们只好另辟蹊径,利用鼠标点击的坐标和iframe的位置区域进行比较的结果来判断。方法如下。

第一步,载入jQuery

法国人Vincent Paré写了个现成的插件,我们可以在下面链接获得:

https://github.com/finalclap/iframeTracker-jquery/blob/master/jquery.iframetracker.js

我们拿来以后第一步就是将所有代码都放入有iframe的网页,记得要放入<script></script>之间。你可以使用Google Tag Manager来做。好处就是可以自定义需要放置的页面。

第二步,载入回调函数

将下面代码放入你需要跟踪的iframe的页面:

<script>
jQuery(document).ready(function($){
$(‘.iframe_wrap‘).iframeTracker({
blurCallback: function(){
// Google Analytics事件跟踪代码
}
});
});
</script>

注释处你可以添加GA的事件跟踪代码或者如果你使用GTM推入一个event给datalayer。

值得注意的地方是.iframe_wrap这里,你需要把包裹在iframe外的标签元素放入,可以不是直接包裹。这样jQuery就知道是哪一个iframe了。举个例子,假设iframe外的标签是<div class=”fruit apple”></div>,name这里就用.fruit.apple。

Demo

就这么简单。下面我来放一个Demo。你可以点击这篇文章的左上角的logo的MAXKET空白处,极诣的logo就放在iframe里。如果你能看的OK就说明代码起作用了。