Gravity Forms: Tracking a multi page form with AND without AJAX enabled

By: Chris Bates | March 15, 2012 | 11 Comments

WARNING: Geek content.

Recently I went on a quest, as I commonly do, to find out how to make Gravity Forms do what I want it to do. In this case I had a client with a multi-page gravity form setup that we wanted to track abandonment on – i.e. how many people leave on page 1, 2, 3, etc. This would then plug into Google Analytics goals and conversion funnel to give us insights and allow for better split testing.

So, first up the “official” way to get this to happen is by using a JavaScript hook on an AJAX enabled form. Super easy, just dump the following code in and you’re done.

<script type="text/javascript">// <![CDATA[
$(document).bind('gform_page_loaded', function(event, form_id, current_page){
    _gaq.push(['_trackPageview'], window.location.pathname + current_page);
});
// ]]></script>

I had an issue with this though… It required you to use AJAX. Normally that wouldn’t be an issue, but this form was integrated with Cart66 – which doesn’t support AJAX forms! Have you tried it? It gets messy…

So I did a bit of digging and discovered that there’s some POST data we can use beyond the first page that tells us what the current page is. Simply if this existed, we knew we were on page X – if it didn’t exist, we can assume we’re on page 1.

Ultimately this mix of PHP and JavaScript will depend on your setup, but the concept of it is grasped easily enough so that you can come up with your own solution. Here’s what I did:

<!--?php <br ?--> if ($_POST['gform_target_page_number_1']) {
$num = $_POST['gform_target_page_number_1'];
} else {
$num = 1;
}
?&gt;

<script type="text/javascript">// <![CDATA[
if (window.location.pathname == "/abn-application/") {
    _gaq.push(['_trackPageview', window.location.pathname + <?php echo $num; ?>]);
}
// ]]></script>

Firstly the little bit of PHP determines our page number – pretty straight forward. You’ll need to replace the ’1′ at the end of ‘gform_target_page_numer_1′ to your form ID. Next our JavaScript checks that we’re actually on the form page, and if we are uses Google Analytics to track a pageview and appends our page number to it!

The end result is you will have a pageview per page now, with the page number appended to the end of it – you can then setup your Goals to use each of those new pageviews as your conversion funnel.

Enjoy!

Posted in: Labs
  • http://twitter.com/MarcSimcox Marc Simcox

    Thank you for this very timely blog post, but I just have one question. Where do you put the code for the ajax part? does it go on every page? I haven’t worked with gravity forms much.

    • http://www.octoply.com.au Chris Bates

      Hey Marc, glad it could help! There’s a lack of info around on GF “hacks”, so I decided to start posting my own experiences up.

      Pop either of the above code in to the header.php file. If you only want the code to load on the page with the form, you could use an if block and is_page()

  • samdelaneyuk

    Thanks for your guidance Chris.

    I didn’t want to use the AJAX on my site either, although the JavaScript was enabled. I managed to bind to the ‘gform_post_render’ event which gave me the page number of the form.

    Didn’t have to touch the PHP code!

  • Riz Rahman

    This new plugin does a very similar thing:

    http://wordpress.org/extend/plugins/gravity-forms-data-persistence-add-on/

    Hope this helps. Thanks!

  • Diego Vagnoli

    Hi All, just a small enhancement on code placement.
    Using the ‘gform_enqueue_scripts’ hook is quickly possibile to echo the script just in pages that are using GF Forms (specifying even if it’s ajax or not).

    In the example below, I echo the code suggested by Chris in the header.php – just before the wp_head();

    //

    I hope it helps :)

    • http://www.octoply.com.au Chris Bates

      Hey Diego, that’s a great little enhancement! Would tidy things up as well, I’ll give your code a try next time :)

      • Diego Vagnoli

        Hi Chris, I can confirm that on my website this simple enhancement does load the script just in posts with GF on it.

        But I’m having trouble using this on Analytics. Could you give a hint on how setup the funnel steps urls using the page numbers?

      • Diego Vagnoli

        I’ve just got it, it was easy
        step 1 = http://www.website.com/form/
        step 2 = http://www.website.com/form/2
        step 3 = http://www.website.com/form/3 :)

        • http://www.octoply.com.au Chris Bates

          Glad to hear you figured it out! :)

  • Diego Vagnoli

    sorry for douyble post, some lines were cut away bu disqus, here the entire code: http://pastebin.com/nMAV92Bn

  • Diego Vagnoli

    Hi all,
    here to ask if someone have troubles with this code.

    Actually in GA funnel I just see users leaving after the Step 1,
    something is not working :(