title: How to use jQuery click function to track Google Analytics in an iFrame
body: <p>I have an iframe (same domain), and want to be able to track the button usages inside the iframe from the parent page.</p>
  
  <p>The reason I don't want to embed the tracking directly into the iframe is that I share the iFrame across different pages and want to be able to track it's unique usage by the parents page tracking events in jQuery.</p>
  
  <p>Sample HTML inside the iFrame:</p>
  
  <pre><code>   &lt;a class="btn1" href="1.html"&gt;button 1&lt;/a&gt;
     &lt;a class="btn2" href="2.html"&gt;button 2&lt;/a&gt;
     &lt;a class="btn3" href="3.html"&gt;button 3&lt;/a&gt;
     &lt;a class="btn4" href="4.html"&gt;button 4&lt;/a&gt;
  </code></pre>
  
  <p>jQuery inside parent page :</p>
  
  <pre><code>$(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]);
    });
  });
  </code></pre>
  
  <p>This isn't working though. If I view the parent page source, there's only the iFrame reference, none of the HTML - so I'm assuming that the parent page doesn't see any of the iFrames div classes to attached the click event? </p>
  
  <p>I'm very new to jQuery... so apologies if I'm missing some gapingly obvious error!</p>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>I've now tried amending the script on the parent page to:</p>
  
  <pre><code>$(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!");
    });
  });
  </code></pre>
  
  <p>and assigned the iframe the class="iframe".</p>
  
  <p>When I click on the button inside the iframe from the parent page - no alert is triggered.</p>