如何使用jQuery点击功能在iFrame中跟踪Google Analytics [英] How to use jQuery click function to track Google Analytics in an iFrame

问题描述

我有一个iframe（相同的域），并希望能够从父页面跟踪iframe中的按钮用法。

不想将跟踪直接嵌入到iframe中，因为我在不同的页面上共享了iFrame，并希望能够通过jQuery中父母页面跟踪事件来跟踪它的独特用法。

 < a class =btn1href =1.html>按钮1< / a> 
< a class =btn2href =2.html>按钮2< / a> 
< a class =btn3href =3.html>按钮3< / a> 
< a class =btn4href =4.html>按钮4< / a> 
  

jQuery内部父页面：

<$ p $ （函数（））{
_gaq.push（['_ trackEvent'，，$（$ .btn1'））。 '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 class =iframe。

当我从父页面点击iframe中的按钮时，不会触发任何提醒。 任何人都会在这个线程中发现并寻找类似的答案 - 在其他stackoverflow帖子（以及一些更正的代码：deantoni）和一些冗长的Google线程的帮助下，这是我找到的解决方案。 / p>

假设为：

• iFrame可编辑。
$

• 
  
• 您在父框架中拥有Google Analytics（分析）跟踪代码，并提供事件跟踪支持。

ul>



使用的iFrame HTML：



 < a class =button1 href =1.html>按钮1< / a> 
  

使用的iFrame jQuery：

<$ p $ （）函数（）函数（）函数（）函数（）。$ b $（'。button1'）。click（function（）{
window.parent.triggerButton1（）;
}）;
}）;


使用的父框架jQuery：

<$ p $ {code> window.triggerButton1 = function（）{
_gaq.push（['_ trackEvent'，'iframe page'，'iframe buttons'，'button 1']）;
}





I have an iframe (same domain), and want to be able to track the button usages inside the iframe from the parent page.

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.

Sample HTML inside the 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 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 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?

I'm very new to jQuery... so apologies if I'm missing some gapingly obvious error!

EDIT 1:

I've now tried amending the script on the parent page to:

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

and assigned the iframe the class="iframe".

When I click on the button inside the iframe from the parent page - no alert is triggered.

解决方案

For anyone that stumbles across this thread and is looking for a similar answer - with the help of other stackoverflow posts (and some corrected code from: deantoni) and some long-winded Google threads, this was the solution that I came to that works.

The assumptions are:

• The iFrame is editable.
• Is under the same domain.
• You have the Google Analytics tracking code in the parent frame, with event tracking support.

The iFrame HTML used:

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

The iFrame jQuery used:

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

The Parent Frame jQuery used:

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

这篇关于如何使用jQuery点击功能在iFrame中跟踪Google Analytics的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！