Setting up Landing Page Experiments
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.
page_url could also be of form: https://example.com/path_name, ./path_name, /path_name or +/path_name, and each of them will merge with the host page's url in different ways as indicated in the table below:
| Base Page URL | page_url parameter | Resulting redirect |
|---|---|---|
| https://ex.com/abc/def | https://ex2.com/path_name | https://ex2.com/path_name |
| https://ex.com/abc/def | /path_name | https://ex.com/path_name |
| https://ex.com/abc/def | ./path_name | https://ex.com/abc/path_name |
| https://ex.com/abc/def | +/path_name | https://ex.com/abc/def/path_name |
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.