Track subscription form that redirects to an external URL with Google Tag Manager

Question

I have a Gravity Form subscription form that I am currently tracking by triggering an even on the confirmation page using Google Tag Manager. However, very soon this form will redirect to a page on a different domain with a few parameters passed in the url. This means I would have to track the event on submit instead. I have tried the Form submit listener, click listener and link click listener and nothing seems to work. I think I might be grabbing the wrong id/class. I also want to make sure that the event only gets triggered after the form has been validated. Below is the complete form code:

<div class="gf_browser_ie gf_browser_ie8 gform_wrapper" id="gform_wrapper_1">
<form method="post" enctype="multipart/form-data" id="gform_1" action="/">
    <div class="gform_body">
        <ul id="gform_fields_1" class="gform_fields top_label description_below">
            <li id="field_1_2" class="gfield">
                <label class="gfield_label" for="input_1_2">Name</label>
                <div class="ginput_container">
                    <input name="input_2" id="input_1_2" type="text" value="" class="large" tabindex="1">
                </div>
            </li>
            <li id="field_1_1" class="gfield">
                <label class="gfield_label" for="input_1_1">Email</label>
                <div class="ginput_container">
                    <input name="input_1" id="input_1_1" type="email" value="" class="large" tabindex="2">
                </div>
            </li>
            <li id="field_1_3" class="gfield     gform_hidden">
                <input name="input_3" id="input_1_3" type="hidden" class="gform_hidden" value="17/07/2014">
            </li>
            <li id="field_1_4" class="gfield     gform_hidden">
                <input name="input_4" id="input_1_4" type="hidden" class="gform_hidden" value="Home">
            </li>
            <li id="field_1_5" class="gfield     gform_hidden">
                <input name="input_5" id="input_1_5" type="hidden" class="gform_hidden" value="http://example.com/">
            </li>
        </ul>
    </div>
    <div class="gform_footer top_label"> 
        <input type="submit" id="gform_submit_button_1" class="button gform_button" value="Submit" tabindex="3" onclick="if (window[ & quot; gf_submitting_1 & quot; ]){return false; }  if (!jQuery( & quot; #gform_1 & quot; )[0].checkValidity || jQuery( & quot; #gform_1 & quot; )[0].checkValidity()){window[ & quot; gf_submitting_1 & quot; ] = true; }"> 
        <input type="hidden" class="gform_hidden" name="is_submit_1" value="1"> 
        <input type="hidden" class="gform_hidden" name="gform_submit" value="1"> 
        <input type="hidden" class="gform_hidden" name="gform_unique_id" value=""> 
        <input type="hidden" class="gform_hidden" name="state_1" value="WyJbXSIsImYzNmQxM="> 
        <input type="hidden" class="gform_hidden" name="gform_target_page_number_1" id="gform_target_page_number_1" value="0"> 
        <input type="hidden" class="gform_hidden" name="gform_source_page_number_1" id="gform_source_page_number_1" value="1"> 
        <input type="hidden" name="gform_field_values" value="">
    </div>
</form>

jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [1, 1]) }); 

Answer 1

To call the event only on a positive validation means you would have to call it within the validation script itself.

I'd personally get rid of the inline onclick method of validation and instead do that via jQuery.

$( "#gform_1" ).submit(function( event ) {
   // Your validation script here
});

This is then tidier code, and easier to read what you are doing.

You can then call a Google Analytics event as part of your validation (ie send it before a positive validation returns true, but don't call it if it returns false.)