Preventing Constituents from Abandoning the TeamRaiser Registration Process

Noah Cooper · October 2011

In an ideal world, every person who comes to your site and begins the process of registering for an event would finish that process and start fundraising on your behalf. The reality is that some percentage of visitors abandon the registration process somewhere along the way, be it because they prematurely closed their browser thinking they were done registering or because they got distracted by something shiny in your site's design. This article details how you can add a little bit of JavaScript to your site that will, hopefully, help decrease your registration abandonment rate, and in turn, increase fundraising results. The steps outlined here were followed by an organization I work with, and they immediately saw a 5 point decrease in abandonment rates.

1) Create a reusable PageBuilder page called reus_tr_preventRegAbandonment. With the WYSIWYG disabled, copy and paste the following code into the page content and publish.


<script type="text/javascript">
[[?x27x::x[[S4]]x::
        //TeamRaiser Registration
        [[?xrthanksx::x[[S334g]]x::
                //On the thank you page, no need to attach the onbeforeunload event
        ::
                var registrationUnloadWarningMessage='If you leave this page your registration will not be processed.';
                addOnLoadHandler(function(){
                        [[?[[A0]]::<meta http-equiv::
                                //The user clicked "Cancel" and the page is attempting to redirect to the Greeting page, no need to attach the onbeforeunload event
                        ::
                                //Attach onbeforeunload event to prompt the user to confirm that they wish to leave the registration flow
                                window.onbeforeunload=function(){
                                        return registrationUnloadWarningMessage;
                                }
                                var resetOnBeforeUnload=function(){
                                        //Remove the onbeforeunload event when the user clicks on a submit button or a link in the content area
                                        window.onbeforeunload=null;
                                };
                                var currentRegStep;
                                [[?xx::x[[S334g]]x::
                                        if(document.getElementsByName('pg')[0])
                                                currentRegStep=document.getElementsByName('pg')[0].value;
                                ::
                                        currentRegStep='[[S334g]]';
                                ]]
                                if(currentRegStep=='tfind'){
                                        //Join or Form a Team page
                                        if(document.getElementById('fr_find_search'))
                                                Utils.addEvent(document.getElementById('fr_find_search'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('previous_step'))
                                                Utils.addEvent(document.getElementById('previous_step'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('friend_potion_next'))
                                                Utils.addEvent(document.getElementById('friend_potion_next'),'click',resetOnBeforeUnload);
                                        var allContentLinks=document.getElementsByName('pg')[0].parentNode.getElementsByTagName('a');
                                        for(i=0;i<allContentLinks.length;i++){
                                                if(allContentLinks[i])
                                                        Utils.addEvent(allContentLinks[i],'click',resetOnBeforeUnload);
                                        }
                                }
                                else if(currentRegStep=='ptype'){
                                        //Participation Type page
                                        if(document.getElementById('previous_step'))
                                                Utils.addEvent(document.getElementById('previous_step'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('next_step'))
                                                Utils.addEvent(document.getElementById('next_step'),'click',resetOnBeforeUnload);
                                }
                                else if(currentRegStep=='utype'){
                                        //New or Returning User page
                                        if(document.getElementById('login'))
                                                Utils.addEvent(document.getElementById('login'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('user_name'))
                                                Utils.addEvent(document.getElementById('user_name'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('previous_step'))
                                                Utils.addEvent(document.getElementById('previous_step'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('next_step'))
                                                Utils.addEvent(document.getElementById('next_step'),'click',resetOnBeforeUnload);
                                }
                                else if(currentRegStep=='reg'||currentRegStep=='reganother'){
                                        //Registration Information page
                                        if(document.getElementById('previous_step'))
                                                Utils.addEvent(document.getElementById('previous_step'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('previous_button'))
                                                Utils.addEvent(document.getElementById('previous_button'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('next_step'))
                                                Utils.addEvent(document.getElementById('next_step'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('next_button'))
                                                Utils.addEvent(document.getElementById('next_button'),'click',resetOnBeforeUnload);
                                }
                                else if(currentRegStep=='waiver'){
                                        //Waiver page
                                        if(document.getElementById('fuw_previous'))
                                                Utils.addEvent(document.getElementById('fuw_previous'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('fuw_next'))
                                                Utils.addEvent(document.getElementById('fuw_next'),'click',resetOnBeforeUnload);
                                }
                                else if(currentRegStep=='regsummary'){
                                        //Registration Summary page
                                        if(document.getElementById('another_button'))
                                                Utils.addEvent(document.getElementById('another_button'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('next_button'))
                                                Utils.addEvent(document.getElementById('next_button'),'click',resetOnBeforeUnload);
                                        var allPageLinks=document.getElementsByTagName('a');
                                        for(i=0;i<allPageLinks.length;i++){
                                                if(allPageLinks[i]&&allPageLinks[i].href&&(allPageLinks[i].href.indexOf('action=previous')!=-1||allPageLinks[i].href.indexOf('action=delete')!=-1))
                                                        Utils.addEvent(allPageLinks[i],'click',resetOnBeforeUnload);
                                        }
                                }
                        ]]
                });
        ]]
::]]
[[?x1x::x[[S4]]x::
        //Donations Classic
        var registrationUnloadWarningMessage='If you leave this page your registration will not be processed.';
        addOnLoadHandler(function(){
                [[?[[A0]]::<meta http-equiv::
                        //The user clicked "Cancel" and the page is attempting to redirect to the Greeting page, no need to attach the onbeforeunload event
                ::
                        if(document.getElementById('FR_ID')&&document.getElementById('FR_ID').value!=''){
                                //Attach onbeforeunload event to prompt the user to confirm that they wish to leave the registration flow
                                window.onbeforeunload=function(){
                                        return registrationUnloadWarningMessage;
                                }
                                var resetOnBeforeUnload=function(){
                                        window.onbeforeunload=null;
                                };
                                var currentBillingStep;
                                [[?xx::x[[S334:dpage]]x::
                                        currentBillingStep='billing';
                                ::
                                        currentBillingStep='[[S334:dpage]]';
                                ]]
                                if(currentBillingStep=='billing'){
                                        //Billing page
                                        if(document.getElementById('CANCEL_DIRECT_PAY_FORM'))
                                                Utils.addEvent(document.getElementById('CANCEL_DIRECT_PAY_FORM'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('PARSE_PAYMENT_FORM'))
                                                Utils.addEvent(document.getElementById('PARSE_PAYMENT_FORM'),'click',resetOnBeforeUnload);
                                }
                                else if(currentBillingStep=='pay2'){
                                        //Billing Confirmation page
                                        resetOnBeforeUnload=function(){
                                                submitted=false;
                                                window.onbeforeunload=null;
                                        }
                                        if(document.getElementById('SHOW_PAYMENT_FORM'))
                                                Utils.addEvent(document.getElementById('SHOW_PAYMENT_FORM'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('TRANSACT_CHARGE'))
                                                Utils.addEvent(document.getElementById('TRANSACT_CHARGE'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('CANCEL_DIRECT_PAY_FORM'))
                                                Utils.addEvent(document.getElementById('CANCEL_DIRECT_PAY_FORM'),'click',resetOnBeforeUnload);
                                        if(document.getElementById('PARSE_PAYMENT_FORM'))
                                                Utils.addEvent(document.getElementById('PARSE_PAYMENT_FORM'),'click',resetOnBeforeUnload);
                                }
                        }
                ]]
        });
::]]
</script>

2) In the "Additional HTML Tags for HEAD Element" section of your page wrapper(s), add the following:



[[S51:reus_tr_preventRegAbandonment]]

3) Go to your TeamRaiser event and begin the registration process. Try to abandon the process by either clicking on the "Cancel" button, clicking on a link in your page wrapper's navigation, or closing your browser entirely. If you've followed the above steps correctly, you should see a message like this (how it looks varies by browser).

Jon Cass · January 2012

I'd love to give this a try but it looks like the coding in section 2 might be messed up post-conversion to the new Convio Community. All it shows is to place

]

in your pagewrapper...

I tried add [[S51:reus_tr_preventRegAbandonment]] to the pagewrapper but doesn't seem like that alone was enough to make it work.

Ryan Rogers · January 2012

Jon Cass:
I'd love to give this a try but it looks like the coding in section 2 might be messed up post-conversion to the new Convio Community. All it shows is to place

]

in your pagewrapper...

I tried add [[S51:reus_tr_preventRegAbandonment]] to the pagewrapper but doesn't seem like that alone was enough to make it work.

Actually, I think the SCRIPT itself got hosed in the conversion. I wonder if it's possible to get Noah to post this fresh in the new Community? The original post lived here: http://community.customer.convio.com/docs/DOC-3483

Noah?

Brian Mucha · January 2012

Ryan Rogers:
Actually, I think the SCRIPT itself got hosed in the conversion. I wonder if it's possible to get Noah to post this fresh in the new Community? The original post lived here: http://community.customer.convio.com/docs/DOC-3483

Noah?

There was a problem migrating the posts with STags. Kent is working on the fix.

Noah Cooper · February 2012

I've updated the initial post so the code displays properly!

Kent Gilliam · February 2012

Noah Cooper:
I've updated the initial post so the code displays properly!

Thanks Noah!!!!

Jon Cass · February 2012

Noah Cooper:
I've updated the initial post so the code displays properly!

Noah Cooper wrote:
I've updated the initial post so the code displays properly!

Thanks! You're the best!

Ryan Rogers · February 2012

Noah Cooper:
I've updated the initial post so the code displays properly!

Thanks, Noah!!

Jon Cass · February 2012

Would it be possible to create something smiliar for donation forms? Would love to see if something like this could help increase conversion rates, but not familiar enough with java to re-code this myself.

Adam Kaye · May 2013

Jon Cass:
Would it be possible to create something smiliar for donation forms? Would love to see if something like this could help increase conversion rates, but not familiar enough with java to re-code this myself.

We're interested in something similar for donation forms as well.

Has anybody tried that yet?

Adam

Jay Daniel · July 2015

I can't get this to work. Is it possible to add a text file to the post. There are Smiley tongue references where the S-tags should be.

Thanks

Preventing Constituents from Abandoning the TeamRaiser Registration Process

Comments

Categories