Create multi-page experiment
Table of contents
In short
If you want to make simultaneous changes across pages within an experiment, you need a multi-page experiment. There are two ways to create such an experiment in Varify.io:
- The simple methodCreate several separate experiments and link them together.
- The advanced methodUse a single experiment and control the variants using JavaScript. However, this requires a sound knowledge of JavaScript.
Both approaches allow you to carry out effective multi-page experiments, depending on your technical know-how and requirements.
1st option: Create several experiments (beginners + advanced)
The easiest way to create a multi-page experiment is to create several experiments and then link them together. You can store the desired changes in a separate experiment for each page. As soon as all experiments have been created, the connection is made by adding a JavaScript in Audience Targeting. In this way, the experiments are efficiently coordinated and can be tested across all pages.
How to optimally implement a multi-page experiment:
1. create one experiment per page
Create a separate experiment for each website on which a change is to take place.
2. define primary experiment
Determine which experiment is the primary one. In the primary experiment, the visitors become test participants. The primary experiment is the experiment on the page that the test participants see first.
3. insert code for audience targeting
Add in all experiments that are part of the multi-page experiment, but not the primary experiment are, enter the following code in the audience targeting.
const EXPERIMENT_ID = 13013; // Change this to the experiment ID you're interested in
const STORAGE_KEY_PREFIX = 'varify-experiment-';
const specificStorageKey = STORAGE_KEY_PREFIX + EXPERIMENT_ID;
const targetVariationId = 17347; // The specific variation ID to check for
// Retrieve the value for specificStorageKey
const storedValue = localStorage.getItem(specificStorageKey);
if (storedValue) {
// Parse the stored JSON string
const storedData = JSON.parse(storedValue);
// Check if the current user has the specific variation ID
if (storedData.variationId === targetVariationId) {
console.log('User has the specific variation ID');
return true;
} else {
console.log('User does not have the specific variation ID');
return false;
}
} else {
console.log('No data found for this experiment ID');
return false;
}
4. adjust Experiment_ID
Replace Experiment_ID in the code with the ID of the primary experiment.
5. adjust targetVariationId
Yoke targetVariationId in the code to the ID of the variant of the primary experiment.
6. adjust traffic distribution
For all experiments except the primary experiment, set the traffic distribution to 100 % of the variant.
2nd option: Creating an experiment and using JavaScript (advanced)
It is possible to create a multi-page experiment without creating multiple experiments. However, this requires advanced knowledge in JavaScript as the logic for playing the variants is controlled by your code. Below you will find a step-by-step guide:
How to create a multi-page experiment with just one experiment
1. create a new experiment
2. add your JavaScript to the variant, which is executed depending on the page called up.
Example:
if (window.location.href.includes('/produktseite')) {
// Änderungen für die Produktseite
document.querySelector('.produkt-titel').innerText = 'Neue Variante';
} else if (window.location.href.includes('/checkout')) {
// Änderungen für die Checkout-Seite
document.querySelector('.checkout-banner').style.display = 'none';
}
3. save the variant
4. for page targeting, add all pages/page types to the experiment on which the variant is to be displayed