由於許多第三方的插件和小工具都會在iframe中，此時如果官方不能提供回調那我們就無法了解這一控件的點擊情況。我們經常會有這類需求，譬如微博、Google網盟廣告，這些東西到底在我的網頁上被點擊了多少次我們很想知道。再如左邊的網盟廣告和右邊的網盟廣告究竟哪個被點擊的次數更多，我們也想知道。一方面我們可以通過第三方給我們的數據了解，另一方面我們也希望能夠自己去跟踪。
本週HubSpot One要帶領大家挑戰這一難點，即iframe中的點擊。由於不同域的iframe父子頁面間傳遞消息十分困難，我們只好另闢蹊徑，利用鼠標點擊的坐標和iframe的位置區域進行比較的結果來判斷。方法如下。
第一步，載入jQuery
法國人Vincent Paré寫了個現成的插件，我們可以在下面鏈接獲得：
https://github.com/finalclap/iframeTracker-jquery/blob/master/jquery.iframetracker.js
我們拿來以後第一步就是將所有代碼都放入有iframe的網頁，記得要放入<script></script>之間。你可以使用Google Tag Manager來做。好處就是可以自定義需要放置的頁面。
第二步，載入回調函數
將下面代碼放入你需要跟踪的iframe的頁面：
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空白處，HubSpot One的logo就放在iframe裡。如果你能看的OK就說明代碼起作用了。