Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I'm trying to track how many visitors click on a button in our site. The problem is the button is located within an iframe coming from an external service.

Here is the page in question: http://www.anoisewithin.org/support-us/individual-giving/#tabs-7

I would like to be able to measure how many visitors click the Search button in the iframe, but I am unable to append any Google Analytics tracking code to the button. Is there any other way I can track that particular click event?

share|improve this question

1 Answer 1

up vote 3 down vote accepted

Since the search button is within the iframe's code located on the hepdata.com domain, you would need access to the source code on that site in order to add tracking code that you can use on your site, by setting the document.domain property or using cross-document messaging.

If you don't have access to the code on that site, you might try positioning a transparent image in your code over the search button in the iframe, and on the image hover event have it trigger JavaScript to run the tracking code and then hide itself so the user can click on the underlying search button. This is dependent of course on if the search button will remain in the same position in the iframe's layout, and JavaScript is enabled in the user's browser.

Other than the above, there isn't much else you can do to track click events within an iframe because of the cross-site scripting security implemented in browsers to protect JavaScript exploits from other domains.

share|improve this answer
    
Great idea with the transparent image! –  Baumr Jul 9 '13 at 12:27
1  
Thanks! I came up with the idea for a similar situation in which I didn't have access to the iframe source either. Hiding the transparent image on hover so that the click event can occur on the iframe layer while triggering additional JavaScript tracking code, seemed to work well in all browsers. The downside is you have to make sure to use the same CSS to position the transparent image as the button in the iframe uses, so it will still cover the button during browser re-sizes. –  dan Jul 9 '13 at 15:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.