Gravity Forms: Tracking a multi page form with AND without AJAX enabled
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;
}
?>
<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!