Visual Website Optimizer (VWO)

VWO (Visual Website Optimizer) is a leading A/B testing and optimization platform that lets businesses conduct experiments on their digital properties. Using VWO and these step-by-step instructions, your organization will be able to effectively compare the performance of Fundraise Up against your current payment form, ensuring data-driven decision-making.

Before you start

VWO registration

If you don't already have a VWO account, create one on the VWO website.

VWO is a freemium tool. Depending on your number of visitors, the free version may or may not be enough. You can use VWO’s free version for up to 50,000 monthly tracked users (MTUs).

You can add Fundraise Up as an additional user, with the email support@fundraiseup.com, to your VWO account so that we can assist you with the setup and track the progress of the experiment together.

Fundraise Up installation code

Make sure that the Fundraise Up installation code is placed on the page of your website where the testing will be conducted.

VWO installation code

After registration, you'll be prompted to add VWO's JavaScript code to your website. Insert this code on every relevant page of your website just before the closing </head> tag. This ensures the correct functioning of A/B testing tools.

Step 1: Setup

1. Log in to your VWO account.
2. In the dashboard, select A/B from the side menu and click Create.
   

3. Set a name for your Campaign.
   

Step 2: Define your pages

Enter the URLs of the pages where you’ll be running your A/B test. In other words, the URLs of all pages where you want users to be tracked. If there are multiple pages involved in the donation process, enter the URLs for all those pages. When you’re done, click Next.

Step 3: Set up your test variations

After pressing Next, a new browser tab will open titled Variations, and your website will automatically open in VWO's editor mode. If this does not happen, check that VWO's JavaScript code is correctly installed on your website pages.

When conducting A/B tests, the goal is to create a test version of the page without making major changes to its design. This helps maintain consistency in the user experience and minimize potential biases in the results.

On your page, there should be an element that initiates the donation process. Typically, this is a Donate button that either opens a donation form or redirects the user to another page.

It’s often best to simply change the URL of the pre-existing Donate button, particularly if:

• your website uses a standard "Button" element to initiate the donation process.
• you aim to maintain the current design and page structure without adding or removing elements.

The advantage of this approach is that it minimizes the risks associated with disrupting the design or functionality of your website. The appearance of the elements will remain the same. The only change will be the action upon clicking the button: in the test version, it will open the Fundraise Up Checkout modal window.

Set up your modified variation

The first variation you’ll set up is your modified variation. This will be for the group of donors who will see the Fundraise Up donation form, and not your other donation form.

1. In the VWO editor, in the lower right corner of the screen, select Variation 1, which will be your modified variation.
   

2. Locate the spot on your page where the current donate button is located. Click on the current donate button, then choose Edit Element.

1. In the 'URL' field, replace the current target page with the following address:

   /?form=[CampaignID]

   Where CampaignID is the ID of a campaign you’ve created in Fundraise Up. This campaign will open when a site visitor in the test group clicks your Donate button. You can create your first campaign by selecting the New campaign button in the Campaigns view of the Fundraise Up Dashboard. Then, click Done.

Set up your current variation

Your second variation will be for the donation form you’re currently using (not the Fundraise Up donation form). This will be the control group you use to compare the two donation forms.

Do not make any changes here, and don’t close the VWO editor.

Step 4: Setting test goals and metrics

For each group, it is recommended to track at least two key metrics: "donation scenario start" and "successful donation completion". Read on to implement those two metrics for both the Control and Test groups.

Tracking “Donation scenario start” (via clicks)

Setting up “Donation start” tracking for your test group

1. In the lower right corner of the screen, select Variation 1 (your modified variation, with the Fundraise Up donation form).

1. Find the spot on your page where the current Donate button is located. Click on the current Donate button and choose Track Clicks.

1. In the Track Clicks modal window that opens, enter the name of the metric you’re creating, for example: "Click, Test Group".

1. Click Done. The newly-created metric will be displayed in the bottom-right corner.

Setting up “Donation start” tracking for your control group

1. In the lower-right corner of the screen, select Control.

1. Find the spot on your page where the current donate button is located. Click on the current Donate button and choose Track Clicks.

1. The Track Clicks modal window will open. Enter the name of the metric you created, for example “Click, Control Group”. Then, click Done.

1. The created metric will be displayed in the bottom right corner.

1. Click Next in the bottom-right corner of the VWO Editor. The browser tab with the VWO Editor will close and you will return to your Campaign in VWO. The configuration for Tracking Donation Scenario Start (via Clicks) is now complete.

Tracking “Donation Completion” (via custom events)

First, we’ll create a new Event in VWO to track successfully completed donations in your test group (the group that will be using Fundraise Up’s donation form).

1. Go to the Events section in the VWO sidebar menu.

1. Click Create in the upper-right corner.
2. Set the Event Name of the new event template you are creating, for example, "Donation Complete (FRU)".

1. Click Create to create the Event.

Create a Metric to track Test Group donations

1. Go back to your Campaign settings by clicking A/B in the sidebar and opening the Campaign.
   

2. In the third Metrics step for the Campaign, you will find the Metrics that you created in the previous step through the VWO Editor
3. Click Create a new metric.

1. Set the Metric Name for the Metric you are creating, for example, "Donation Complete, Test Group". In the for event dropdown, select the "Donation Complete (Current Form)" Event from the "My Events" section. Click Create.

If you want to include donation amount data in the final A/B test report, select Value of an event property in the Metric calculates section. Choose the property name that you created when setting up the custom event. In this example, we used the property name donationAmount as the “First value” per visitor. Make sure the Format this metric as currency checkbox is checked.

Create a Metric to track Control Group donations

1. To track a successfully completed donation through your current payment form (for your control group), you will also need to create a new Event in VWO, following steps 1-4 of the previous instruction that explained how to create a new Event for the Test Group. As an example, here is a "Donation Complete (Current Form)" Event.

1. Now we can create a new metric in your Campaign to track donations in the Control Group. To do this, repeat steps 1-3 from the previous instructions, that explained how to create a new Metric for the Test Group
2. Set the Metric Name for the metric you are creating, for example, "Donation Complete, Control Group". In the for event dropdown, select the "Donation Complete (FRU)" event from the My Events section. Click Create.

If you want to include donation amount data in the final A/B test report, select Value of an event property in the Metric calculates section. Choose the property name that you created when setting up the custom event. In this example, we used the property name donationAmount as the “First value” per visitor. Make sure the Format this metric as currency checkbox is checked.

After creating this metric, we will have 4 metrics created, 2 for the Test group and 2 for the Control group.

You can also designate the desired metric as Primary. This will make it the main metric in the report.

Click Next to proceed to the next step.

Step 5: Others

In the final Others step in VWO, check the advanced options for this campaign. If the settings are suitable, click Create to create the campaign.

Step 6. Review the campaign

Once you’ve clicked Create, you’ll be able to review these key points in your VWO Campaign.

Pages

Make sure that all pages involved in your donation scenario are accounted for.

Metrics

Ensure that the necessary metrics are set up for the Test and Control groups, as previously described in this article.

Deployments

Check that the WVO “SmartCode" initialization code is installed on your website.

Step 7. Place the event tracking code

Place event tracking code for "Donation Complete, Test Group"

To track a successfully completed donation made through Fundraise Up, we recommend using the donationComplete event from Fundraise Up’s JavaScript API. This event fires when a donation is successfully completed in Fundraise Up’s donation form. It’s best to place the code before the closing tag </body>.

1<script>
2FundraiseUp.on('donationComplete', function(details) {
3  window.VWO = window.VWO || [];
4  VWO.event = VWO.event || function () {VWO.push(['event'].concat([].slice.call(arguments)));};
5  VWO.event('donationComplete', {
6    donationAmount: details.donation.amount
7  });
8});
9</script>

Place event tracking code for "Donation Complete, Control Group"

Choose how to track events

How you track this event depends on the process of making a donation on your website. Consider the following options and choose the one that’s most suitable for your situation. If you are unsure which method best suits your needs, consult with your development team or those responsible for integrating the payment form on your website.

• If, after a successful donation, the donor is redirected to a specific "thank you" or confirmation page, you can configure VWO to track all visits to this page as a successful donation event.
• If your current payment form already generates custom JavaScript events in case of a successful donation, you can use those for tracking.
• If the server returns a specific response (e.g., JSON with a success message) after a successful donation, you can configure a listener to track these responses and send events to VWO.

Code snippet

This is the universal template for event tracking in VWO. To effectively track a successful donation, this code snippet should be integrated into the function or event handler that's executed upon a successful donation on your website.

1window.VWO = window.VWO || [];
2VWO.event = VWO.event || function () {VWO.push(['event'].concat([].slice.call(arguments)));};
3VWO.event('%YOUR_EVENT_NAME%', {
4  donationAmount: <number_value>
5});

Example

Suppose that our current donation completion scenario on our website is triggered by visiting the /thankyou page.

To implement this, we can add the following code to the /thankyou page using the addEventListener handler:

1<script>
2document.addEventListener("DOMContentLoaded", function() {
3  window.VWO = window.VWO || [];
4  VWO.event = VWO.event || function () {VWO.push(['event'].concat([].slice.call(arguments)));};
5  VWO.event('currentFormDonationComplete', {
6    donationAmount: <number_value>
7  });
8});
9</script>

In this example, as soon as the /thankyou page loads, our code automatically sends the currentFormDonationComplete event to VWO, passing along the donationAmount value. Make sure the event name currentFormDonationComplete matches the one you've set up in your VWO account. If you have a different event name, replace it in the code.

Step 8: Launch the test

After reviewing all your metrics and code snippets, click Start Now.

Step 9: Monitor and analyze the results

In the VWO platform, once your test is live and collecting data, you'll have a unique opportunity to monitor real-time metrics that can provide insights into your donation scenario.

Monitoring

Go to the Report tab in your live Campaign:

In this scenario, the primary metrics to keep an eye on are:

• “Click, Test Group”
• “Click, Control Group”
• “Donation Complete, Test Group”
• “Donation Complete, Control Group.”

If you also add donation amount tracking to your metrics, you will be able to compare not only the number of Donation Complete events, but also donation amounts by each of the groups:

Test data

You can send data for donations made in Test mode to VWO Report. This functionality is useful for testing or debugging settings in VWO.

Analysis

We recommend the following for successful analysis of your results:

Metrics to monitor

To gain a holistic view of how your variants are performing, it's crucial to not only look at conversion rates but also to understand the monetary implications. Here are some fundamental metrics to keep an eye on:

• Conversion to donation: this is a fundamental metric that shows the ratio of donors to users involved in the test.
• Average donation amount: when considering this metric, it's advisable to exclude outliers, as a single large donation can significantly skew the average. For instance, it might be sensible to omit donations exceeding $2,000 to $5,000.
• Average revenue per user: this metric tells you how much money you earn from each user who clicks the donate button. It can be particularly valuable when the conversion rate and average donation amount yield contrasting results.
• Total revenue: a cumulative representation of all donations collected during the test.

Best practices

• Consistent monitoring: regularly check the metrics to detect any shifts in user behavior. Given that these are real-time metrics, frequent monitoring can help in early detection of any anomalies.
• Compare and contrast: compare the "Click" rates between the Test and Control Groups, as well as the "Donation Complete" rates for both groups.
• Statistical significance: Before drawing any conclusions, ensure the results are statistically significant. This ensures that the observed differences are genuine and not due to random chance.
• Actionable insights: Based on the analyses of the above metrics, derive actionable insights. For example, if one variant has a significantly higher conversion rate, it may be beneficial to implement that variant site-wide.

Remember, the objective of A/B testing is not just to determine which variant performs better, but also to understand why. Deep dive into the metrics, possibly integrating user feedback, to gain comprehensive insights.

Implementing changes

The results of this analysis should help you decide which donation experience is best for your organization’s fundraising efforts, going forward.

By following the instructions in this article, you'll be able to conduct A/B testing on your website using VWO to determine which donation form — your current payment form or Fundraise Up — performs better, and implement the solution that is most effective.