Analytics and conversion tracking for a Google Docs Form

My friend recently asked for a way to track conversions of a Google Docs Form IFRAME that he has hosted on his company’s website. After some digging I figured out a way to accomplish this using a little bit of jQuery.

The trick is to attach a jQuery listener to the .load() event of the IFRAME that contains the Google Form. The IFRAME will load twice. The first .load() event will be the questions, the second .load() event will indicate that the Form has been submitted. The second load occurs because the forms use a standard FORM submit and the content inside the IFRAME will go to a new page, thus triggering .load() again.

$(function () {
    window.loaded = 0;
    // add an id to the <iframe> that you  embedded on your page
   f = $("iframe#googledoc");
   f.load( function () { 
        // first load is for the form.
        // second load means that the form was submitted leading to
        // Google Doc Form  "thank you" message
        if (window.loaded >= 2)
           // Example Google AdWords tracking pixel
           $("body").append(‘<img height="1" width="1" style="border-style:none;" alt="" src=""/>’);  
        // Example Google Analytics Event trigger
        _gaq.push([‘_trackEvent’, ‘category’, ‘action’, ‘label’]);
        // Example Google Analytics page view trigger
        _gaq.push([‘_trackPageview’, ‘/submitted/form’]);