Visual Website Optimizer (VWO)

Run A/B tests using VWO in order to compare Fundraise Up’s performance to your current donation form.

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 will be able to effectively compare the performance of Fundraise Up against your current payment form, ensuring data-driven decision-making.

Before you start

 
Link copied

VWO registration

 
Link copied

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

 
Link copied

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

 
Link copied

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.

You need to insert this code on each page of your donation process. If your current donation scenario includes multiple pages, add the code to all pages involved in the scenario.

Step 1: Setup

 
Link copied
  1. Log in to your VWO account.
  2. In the dashboard, select A/B from the side menu and click Create.
    VWO dashboard displaying the A/B Tests section with options to create a new test and filter campaigns by status. Navigation menu on the left includes Testing and Workflows.

  3. Set a name for your Campaign.
    New Campaign section in a web application interface, with fields to define pages and audience for A/B testing, including a URL input box and options to include or exclude pages.

Step 2: Define your pages

 
Link copied

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

 
Link copied

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.

The VWO Editor is a visual interface within the VWO platform that allows users to create and modify variations of their website for A/B testing without needing to write code. It enables users to open their website in a special mode for hands-on editing and configuration.

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 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.

A/B testing of Fundraise Up Elements with VWO or similar JavaScript tools at page load is not supported. Instead, use URL split testing: create two versions of the same Element with different configurations, place them on separate pages, and split your traffic between these URLs to compare their performance.

Set up your modified variation

 
Link copied

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.
    A woman wearing a colorful headwrap smiles, with the text &#34;Provide Relief&#34; and a call-to-action button &#34;Donate now&#34; prominently displayed on a webpage. Below, it notes that 1,508 people have donated this month.

  2. Locate the spot on your page where the current donate button is located. Click on the current donate button, then choose Edit Element.
    Website interface displaying a &#39;Provide Relief&#39; message, with a highlighted &#39;Donate now&#39; button and a dropdown menu for link options. A smiling person wearing a colorful headwrap is visible in the background.

  3. In the 'URL' field, replace the current target page with the following address:
    /?form=[CampaignID]
    Where CampaignID is the ID of a 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 . Then, click Done.
    Homepage of Relief Operations International featuring a call to action to donate, with a smiling woman wearing a colorful head wrap. Text highlights the impact of donations on those in need.

Set up your current variation

 
Link copied

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

 
Link copied

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)

 
Link copied

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).
    A woman wearing a colorful head wrap smiles, with the text &#34;Provide Relief&#34; and a call-to-action button labeled &#34;Donate now&#34; prominently displayed on a webpage about supporting people in need.

  2. Find the spot on your page where the current Donate button is located. Click on the current Donate button and choose Track Clicks.
    Webpage interface showing a &#39;Donate now&#39; button and a dropdown menu with editing options. A smiling person wearing a colorful headwrap is visible in the background.

  3. In the Track Clicks modal window that opens, enter the name of the metric you’re creating, for example: "Click, Test Group".
    Popup window for tracking clicks on a &#39;Donate now&#39; button, with options to confirm or cancel. Background features a smiling person wearing a colorful headwrap.

  4. Click Done. The newly-created metric will be displayed in the bottom-right corner.
    Smiling woman wearing a colorful headscarf, with a call-to-action button labeled &#34;Donate now&#34; and a message indicating the number of people who have donated this month.

Setting up “Donation start” tracking for your control group

  1. In the lower-right corner of the screen, select Control.
    Smiling woman wearing a colorful headscarf, with a call-to-action button labeled &#34;Donate now&#34; above her. Text below indicates people have already contributed this month.

  2. Find the spot on your page where the current donate button is located. Click on the current Donate button and choose Track Clicks.
    Woman wearing a colorful headwrap smiles, with a call-to-action button labeled &#34;Donate now&#34; and text encouraging support for relief efforts in the background.

  3. The Track Clicks modal window will open. Enter the name of the metric you created, for example “Click, Control Group”. Then, click Done.
    Donation prompt with a &#34;Donate now&#34; button and a tracking dialog box for click data, alongside a blurred image of a person wearing a colorful head wrap.

  4. The created metric will be displayed in the bottom right corner.
    Call to action button labeled &#39;Donate now&#39; with a message indicating 1,508 people have donated this month, alongside a smiling woman wearing a colorful headscarf.

  5. 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.
    Smiling woman wearing a colorful headwrap, with a &#34;Donate now&#34; button and a message indicating 1,508 people have donated this month.

Tracking “Donation Completion” (via custom events)

 
Link copied

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.
    Events management interface showing a list of event types, including page visit, click, and form submission, with a &#34;Create&#34; button highlighted in the top right corner.

  2. Click Create in the upper-right corner.
  3. Set the Event Name of the new event template you are creating, for example, "Donation Complete (FRU)".
    Create Event form in a web application, displaying fields for event name, API name, and properties including data type and description. Menu on the left shows navigation options like Events and Triggers.

If you want to include information about donation amounts in the final A/B test report, create a specific property for this purpose. In this example, we have added a property called donationAmount. Comparing donation amounts will help us gain a more comprehensive interpretation of the final test results.
  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.
    Dashboard interface of a web application showing selected metrics for tracking clicks. Options include &#34;Click, Test Group&#34; and &#34;Click, Control Group,&#34; with corresponding URL match criteria displayed. Navigation menu on the left.

  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.
    Metrics selection interface for tracking campaign performance, featuring options for various metrics and a highlighted button labeled &#34;Create a new metric.&#34;

  4. 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.
    Create a new metric dialog box with fields for metric name and definition. The metric name is &#34;Donation Complete, Test Group.&#34; Options include calculating based on event triggers or properties, with &#34;Donation Complete (FRU)&#34; selected from a dropdown list.

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.

Form for creating a new metric titled &#34;Donation Complete, Test Group,&#34; with fields for metric definition, event property value, and formatting options for currency. Includes checkboxes and dropdown selections.

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.
    Create Event form for tracking user interactions, featuring fields for Event Name, API Name, and Properties such as Donation Amount with data type options. Navigation menu on the left includes Events, Testing, and Insights.

    If you want to include information about donation amounts in the final A/B test report, create a specific property for this purpose. In this example, we have added a property called donationAmount. Comparing donation amounts will help us gain a more comprehensive interpretation of the final test results.
  2. 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
  3. 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.
    Create a new metric interface showing the metric name &#34;Donation Complete, Control Group&#34; and options for defining event triggers. The dropdown menu highlights &#34;Donation Complete (Current Form)&#34; as a selected event.

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 new metric form with fields for metric name, definition, calculation logic, event properties, and options to format as currency and save for future use.

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.

Dashboard displaying selected metrics for tracking user interactions, including &#34;Click, Test Group&#34; and &#34;Donation Complete, Control Group,&#34; with options to create or edit metrics and links for more information. A &#34;Next&#34; button is visible.

Click Next to proceed to the next step.

Step 5: Others

 
Link copied

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.

Traffic allocation settings for a campaign, featuring a slider to select the percentage of traffic included, options for distributing traffic, and sections for integrating third-party products and adding notes.

Step 6. Review the campaign

 
Link copied

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

Dashboard for A/B testing campaign titled &#34;Relief Operations International.&#34; Displays included pages, metrics for tracking clicks, and settings summary with variations and screenshots for comparison. Button to start the campaign is visible.

Pages

 
Link copied

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

Metrics

 
Link copied

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

Deployments

 
Link copied

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

Step 7. Place the event tracking code

 
Link copied

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

 
Link copied

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>

Ensure that the event name, written here as donationComplete, matches the name of the Event you created in VWO. Also, make sure that the specific property name, written here as donationAmount, matches the property you created in the Event in VWO. Only add this property if you want to include donation amounts data in the final A/B test report.

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

 
Link copied

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});

Ensure that the event name, written here as %YOUR_EVENT_NAME% , matches the name of the Event you created in VWO. Also, make sure that the specific property name, written here as donationAmount, matches the property you created in the Event in VWO. Only add this property if you want to include donation amounts data in the final A/B test report.

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.

Using VWO with Campaign Pages

To use VWO on a Campaign Page, follow these steps:
Step 1. Specify the URL of the Campaign Page within your VWO account as described in “Step 2: Define your pages”.
Step 2. Set up new tags in Google Tag Manager (GTM). These tags will send specific events to VWO:
FundraiseUp.checkoutOpen: When a checkout process starts.
FundraiseUp.donationComplete: When a donation is completed.
Step 3. Add VWO's JavaScript code (described in the “VWO installation code”) to each tag in GTM and associate them with the “Initialization” trigger.

Integrating VWO with Campaign Pages has certain limitations:
You cannot use VWO to change the look or functionality of a Campaign Page.
VWO can only be used to track the two events listed above.

Step 8: Launch the test

 
Link copied

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

Button to start the campaign with options to preview or start later.

Step 9: Monitor and analyze the results

 
Link copied

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

 
Link copied

Go to the Report tab in your live Campaign:

Report dashboard for Relief Operations International showing conversion rates for two test groups. Control group has a conversion rate of 0.61%, while Variation 1 shows 38.81%. A graph illustrates the conversion trends over time.

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:

Report dashboard for Relief Operations International showing data from October 12-13, 2023. Includes metrics for unique conversions, variations, and expected values, with a line graph illustrating conversion trends over the two days.

Test data

 
Link copied

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

 
Link copied

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

 
Link copied

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.

 

In this article