iFrame Submit Button GA Event Tracker

[email protected]

HTML

<h1>JotForm iFrame Submissions & Google Analytics</h1>

<b>We can track valid JotForm submissions through our Google Analytics account with the help of a lightweight, custom script that I wrote in jQuery.</b>

<br/>
<br/>This is done with a couple of functions and a couple of variables. When you click the "Submit" button on the form, a small script checks for form errors (using JotForm's built-in validation). If there are no errors, we then send an event tracking notification to our analytics. And yes, this is awesome! Try it out using the sample form below.
<br/>
<br/><small><b>Written by <a href="mailto:[email protected]">[email protected]</a></b></small>

<br/>
<br/>
<div class="form">
    <script type="text/javascript" src="https://form.jotform.com/jsform/53284842603961"></script>
</div>

CSS

body {
    font-family: Arial;
    padding: 40px;
    line-height: 1.5em;
    font-size: 14px;
}
h1 {
    line-height: 1.2em;
    font-size: 35px;
    margin-top: 0px;
}
.form {
    padding: 30px;
    border: 10px solid #dedede;
    max-width: 600px;
}

JavaScript

// Read the contents of the iframe.
     var iframe = $("iframe").contents();



   // Main function. Checks for errors. If none, event is sent to analytics.
   function fireEventga() {
       var errors = iframe.find(".form-button-error").length;
       // If errors do not exist
       if (!errors) {
           alert("Event pushed to analytics");
           // Send event to analytics
           ga('send', 'event', 'Category Here', 'OnMouseDown', 'Form Submit - Identifier here');
       }
       // If errors do exist
       else {
           alert("Please check the form for errors");
       }
   }


   // Submit button clicked. The delay waits for errors to render and then fires main function.
   $(function () {
       iframe.find(".form-submit-button").click(function () {
           setTimeout(fireEventga, 200);
       });
   });