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.
Step 2: Add Parameters
Scroll down the Setup tab of the newly created experiment and click on "Add Parameter" button.
In the Add New Parameter modal, add a new String parameter and name it page_url
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.
Step 3: Start the experiment
Save the experiment setup and Start it. We're all set with the experiment set up.
While you're at it, copy the Experiment Name. We'll use this in a bit.
Step 4: Copy API key
Click on the settings and choose 'Project Settings'
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.
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.
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.
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:
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