Geek asks and answers

How to use jQuery function to track Google Analytics in iFrame

I have an iframe (same domain) and you want to track the use of buttons inside the iframe from the parent page.

The reason I don't want to embed tracking directly in the iframe is because I share the iFrame on different pages and want to be able to track its unique use by parent page tracking events in jQuery.

HTML example inside iFrame:

   <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 inside the parent page:

$(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]);
  });
});

This does not work. If I look at the source of the parent page, there is only an iFrame link, none of the HTML - so I assume that the parent page does not see any of the iFrames div classes to attach the click event?

jQuery... , - !

1:

script :

$(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 class= "iframe".

iframe - .

+2
2

, - stackoverflow ( : deantoni) Google, , .

:

  • iFrame .
  • .
  • Google Analytics .

HTML- iFrame:

<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']);
    }
+4

, iFrame / , jQuery Method contents(), DOM iFrame - .

:

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

.contents()

0

More articles:


All Articles