CODEWITHSUNDEEP
javascriptiframegoogle-analytics
user3218006
user3218006

Reputation:

Google Analytic inside iframe

I have an iframe that hosting a third party page (that I build). In that page, I have a Google analytic as below. However, Google analytic is not tracking all the entries...

The third paty page redirects users to different pages depending on different times of the day. Is there anything extra we need to do to implement Google Analytic in an iframe?

 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-47306399-1', 'serviceportal.com.au');
  ga('send', 'pageview');

Upvotes: 1

Views: 2063

Answers (2)

user3218006
user3218006

Reputation:

One of the SEO gurus at my workplace was able to provide me with the solution tips

It was a fact of misamtached server..

The correct code ended up being

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-47544250-1']);
  _gaq.push(['_setDomainName', 'vserver.com.au']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

Upvotes: 1

Jasper
Jasper

Reputation: 76003

If the page within the <iframe /> element is on a different domain than the parent page, then you'll run into problems (particularly with older versions of Internet Explorer). The issue is that 3rd party cookies are blocked when there isn't a correct P3P header for every external asset loaded on the page within the <iframe /> (including the HTML document itself). This will effectively break your tracking code since it relies on 3rd party cookies (i.e. cookies created for domains controlled by Google or whatever other tracking provider you use).

If this is your issue, I've found two fixes.

  1. Output proper P3P headers for all assets loaded inside the IFRAME so browsers don't block 3rd party cookies.
  2. Use JS to Communicate from the inner-page to the parent-page and then use that communication to trigger tracking pixels from the parent-page.

My guess is that there are other ways to do this as well, this is what has worked for me.

Also, note that you can do as little as change the protocol and the pages will be thought of as on different domains by the browser, so it's generally a good idea to load the IFRAME with a URL starting in // rather than http:// or https:// so that the protocols of the parent-page and the inner-page will match. This is just if they are on the same domain to start with.

Another note... Please DO NOT just copy/paste any old P3P header value into a production environment just because it makes the "evil eye" go away in IE. Specific P3P header "codes" equate to real privacy policy statements.

Upvotes: 2

Related Questions