iFrameでGoogle Analyticsを追跡するためにjQueryのクリック機能を使用する方法

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を新しくしています...謝罪しています。

EDIT 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内のボタンをクリックすると、警告は表示されません。

Answer 1

についての詳細を見つけることができます - 他のstackoverflowの助けを借りて、投稿（とdeantoniの修正コード）と長文のGoogleスレッドがありましたが、これは私がその作業に出た解決策でした。

仮定は以下のとおりです。

• のiFrameが編集可能です。
• 同じドメイン内にあります。
• イベントトラッキングがサポートされている、親フレームにGoogleアナリティクストラッキングコードがあります。

の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