Google Analytics & iFrame

Question

Hi Guys,

So I have a simple page and when a user clicks on a link an iframe opens. I am trying to use the

http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55527

pageTracker._trackPageview('/outgoing/example.com');

Inside the iframe - but it seems that its not working ? I have read this page

code.google.com/apis/analytics/docs/tracking/gaTrackingSite.html#trackingIFrames

And it seems that I use the "iframe.src = pageTracker._getLinkerUrl" to pass some cookie info to the iframe - the problem is that I want to track stuff INSIDE the iframe (i.e. such as events etc) and I get a "pageTracker is undefined" error.

Do I need to include something like

<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>

inside the iFrame - to get the pageTracker to work. I take it that the "Publisher UA-XXXXX-X" ID will be passed via cookies and everything will work?

Any ideas

Answer 1

Yes, you have to include the GA boilerplate code inside your framed page

<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Browsers regard each and every frame as a separate window with its separate dom and javascript environment, so to be able to access pageTracker in the framed page you must include the ga.js script in this page as well.

Note that you'll also need to add

<script type="text/javascript"> 
 try {
  var pageTracker = _gat._getTracker("UA-XXXXXX-X");
 } catch(err) {}
</script>

So that the pageTracker object is actually defined. Finally, please also note that the two pageTracker javascript objects on both the framed page and the framing page, although they have the same identifier are different JS objects. That's a result of the fact that JS keeps each frame in its own window object, which practically means a JS scope.

Answer 2

Hey there

In the specidic case of iframes, google doesn't say much. I've been in the same situation but I'm glad I figured it out. I posted a walktrhough in here. It's in French but you won't need to speak the language to copy / paste the code. Plus there's a demo file you can download.

Hopefully this'll be helpful for some. Greg