如何使用jQuery點擊功能跟蹤iFrame中的Google Analytics（分析）

Question

我有一個iframe（相同的域），並希望能夠從父頁面跟蹤iframe中的按鈕使用情況。

我不想將跟蹤直接嵌入到iframe中的原因是我在不同的頁面上共享iFrame，並希望能夠跟蹤jQuery中父母頁面跟蹤事件的唯一用法。在iFrame中

樣本HTML：

<a class="btn1" href="1.html">button 1</a> 
    <a class="btn2" href="2.html">button 2</a> 
    <a class="btn3" href="3.html">button 3</a> 
    <a class="btn4" href="4.html">button 4</a> 

jQuery的父頁面內：

$(document).ready(function() { 
    $('.btn1').click(function() { 
    _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 1]); 
    }); 
    $('.btn2').click(function() { 
    _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 2]); 
    }); 
    $('.btn3').click(function() { 
    _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 3]); 
    }); 
    $('.btn4').click(function() { 
    _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 4]); 
    }); 
}); 

這不，雖然工作。如果我查看父頁面源，那麼只有iFrame引用，沒有HTML - 所以我假設父頁面沒有看到任何要附加點擊事件的iFrames div類？

我對jQuery很新...很抱歉，如果我錯過了一些明顯的錯誤！

編輯1：

現在我已經試過父頁面上修改腳本：

$(document).ready(function() { 
    $('.iframe').contents().find('.btn1').click(function() { 
    alert("Button 1 Pressed!"); 
    }); 
    $('.iframe').contents().find('.btn2').click(function() { 
    alert("Button 2 Pressed!"); 
    }); 
    $('.iframe').contents().find('.btn3').click(function() { 
    alert("Button 3 Pressed!"); 
    }); 
    $('.iframe').contents().find('.btn4').click(function() { 
    alert("Button 4 Pressed!"); 
    }); 
}); 

和分配的iframe類= 「iframe中」。

當我點擊從父頁面的iframe中的按鈕 - 沒有警報被觸發。

Answer 1

對於任何跨越此線絆倒，並正在尋找一個類似的答案 - 與其他計算器的幫助帖子（以及來自deantoni的一些更正的代碼）和一些冗長的Google線程，這是我找到的解決方案。

的假設是：

• iframe的編輯。
• 屬於同一個域。
• 您擁有父框架中的Google Analytics（分析）跟蹤代碼，並提供事件跟蹤支持。

的iFrame的HTML使用：

<a class="button1" href="1.html">button 1</a> 

的iFrame的jQuery的使用：使用

$(document).ready(function() { 
    $('.button1').click(function() { 
    window.parent.triggerButton1(); 
    }); 
}); 

父框架jQuery的：

window.triggerButton1 = function(){ 
     _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', 'button 1']); 
    } 

Answer 2

如果您使用的iFrame具有相同的域/協議和端口，那麼您可以使用jQuery方法contents()，此方法可以訪問iFrame的DOM，然後您可以對其執行任何操作。

一個例子是：

$("#iFrame").contents().find(".btn1").click(function() { 
    _gaq.push(['_trackEvent', 'iframe page', 'iframe buttons', button 3]); 
} 

你可以找到更多關於.contents()方法here