Skip to main content

Landing Page Experiments

Running an A/B test between multiple versions of Landing Pages is a common Marketing use case. Statsig provides powerful no/low-code support for running such experiments, and also makes it extremely simple and robust. Since Statsig can integrate seamlessly with product analytics, you can run experiments and understand deeper business level impact easily.

This method operates directly at the HTML/JS level and supports all web development tools: Webflow, Framer, WordPress, Wix, Contentful, etc.

Working Prototype​

A working prototype is available here: https://ab-testing-website.webflow.io/

info

This guide assumes you have an existing Statsig account. Please go here to create a new free account if you don't already have one: https://statsig.com/signup

Step 1: Create an experiment​

Start by creating a new Experiment on Statsig console. Put in a name and select 'Stable ID' for the ID Type. This ensures that the experiment works for logged-out users as well. For the purposes of this walkthrough, you can leave the rest of the fields empty/default.

Create New Experiment

Step 2: Add Parameters​

Scroll down the Setup tab of the newly created experiment and click on "Add Parameter" button.

image

In the Add New Parameter modal, add a new String parameter and name it page_url

image

Set the urls that you want to test in those parameters. These urls can either be absolute (https://example.com/page_one), or relative to the originating url (/page_one). For this walkthrough, you can leave the allocations at 50%/50%. This will run an equally allocated A/B test.

image

Step 3: Start the experiment​

Save the experiment setup and Start it. We're all set with the experiment set up.

image

While you're at it, copy the Experiment Name. We'll use this in a bit.

image

Step 4: Copy API key​

Click on the settings and choose 'Project Settings'

image

Select the 'API Keys' tab and copy the 'Client API Key'. It will look something like this: client-aBcD45FghIjk890... You'll need this to wire up the landing pages.

image

Step 5: Add HTML snippet​

In your landing pages, add the following code snippet in the <head> section. Make sure you replace the [API_KEY] with the Client API Key you copied in Step 4, and [EXP_NAME] with the Experiment Name you copied in Step 3.

<script src="https://cdn.jsdelivr.net/npm/statsig-landing-page-exp?apikey=[API_KEY]&expid=[EXP_NAME]">
</script>

You have to do this to both the landing pages you're testing.

Now, publish your landing pages, and you're good to go. Whenever a user lands on either of those landing pages, Statsig will automatically redirect them to the one they are allocated to as part of the experiment. So over time you'll get an even 50%/50% split.

Monitoring the set up​

When you've published the landing pages, you can verify everything is working as expected by navigating to the Diagnostics Tab in your experiment and looking at the 'Exposure Stream' at the bottom of the page. This shows a realtime stream of the page loads along with the variant they were allocated.

image

Tip: You can clear cookies, or use Incognito mode on your browser to test the variant allocation for a different user.

Interpreting results​

By going to the Pulse Results tab in the Experiment page, you can add metrics you want to monitor and verify which variant is doing better. To learn more about reading Pulse Results, check this article out: Reading Pulse Results.

image

More than two variants​

It's simple to extend this setup to run ABC or ABn tests. You can add more variants in the Experiment Setup tab, like below:

image

Webflow set up​

To add the script in Webflow, you can open the Pages tab on the left, and click the 'Settings' gear icon next to the landing page. In there, within the 'Custom Code' section, add the script snippet Inside <head> tag

image