iFrame Submit Button GA Event Tracker

[email protected]

by Ryan Brackett

HTML

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

CSS

body {
    font-family: Arial;
    padding: 20px;
    line-height: 1.5em;
    font-size: 14px;
}

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);
       });
   });



iframe.find("label:contains('Favorite') + div").find(".form-single-column").append("<span class='form-checkbox-item' style='clear:left'><span class='dragger-item'></span> <input type='checkbox' class='form-checkbox' id='input_19_3' name='q19_favoriteColor[]' value='Yellow'><label id='label_input_19_3' for='input_19_3'> Yellow </label></span>");