Engineering A/B tests
Overview
An A/B test is when we release two versions of a page and compare how well they perform (comparing version A to version B). When running an experiment, we are testing a hypothesis using a control variant and a test variant, similar to how one typically employs the scientific method.
We currently use LaunchDarkly to control whether or not a test is showing, at what percentage, and gather metrics about a test’s performance. Within LaunchDarkly, you can create events that fire when a user does something. For our case, our most common example would be a click. We also push the experiment ID into the Google Analytics dataLayer so we know what version of the page the user viewed.
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'launchDarklyExperiment',
'launchDarklyExperimentName': 'name of experiment',
'launchDarklyExperimentId': '0 or 1' //0 = control, 1 = variant
});
This project is for the ideation and refinement of AB Tests to be conducted on GitLab’s Marketing site. Anyone can contribute an AB testing issue.
What is a feature flag
Below are some resources to learn more about feature flags. At a high level, a feature flag is an if-else wrapper around code that can be enabled, disabled, or served at a certain percentage to a certain group. This is controlled via a dashboard toggle, changing the production interface on-the-fly without having to wait for a release to change something.
How we run AB test
Our AB tests include two files, the control and the test variant. Both exist on the page in the HTML DOM at the same time, but are hidden by default on page load. The javascript SDK will return which version of the experiment should be shown. For each test, we use the following process:
- Test Candidates are validated by modelling out the potential lift on an annualized basis.
- AB test candidate with the highest annualized lift (lift scoped specifically to the action/improvement we’re measuring) is run as an AB test.
- AB test complete, data analysis on results.
- The winner goes live at 100%.
- Saves (tests that did not deliver as expected) are documented.
A/B Testing Schedule
Planned A/B Tests
Issue | Test Length | Status |
---|---|---|
Homepage Featured Blocks vs Carousel | scheduled |
Completed A/B Tests & Results
How do we engineer tests
Running test on the Buyer’s Experience repository
- Developer notes on running an experiment: https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/blob/main/docs/plugins.md
- Example MR for an AB test: https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/merge_requests/258
- Video Explanation: https://www.youtube.com/watch?v=F1tlCZgYUqQ
Running test on the www
repository
This can be overridden by optional URL parameters as exhibited in the codepaths section below.
Example merge request for an AB test
Tutorials for implementing AB test in the www-gitlab-com project
Active
- VIDEO: Part 1 of 3, explaining code paths and how to develop an AB test of the pricing page
- VIDEO: Part 2 of 3, explaining how our feature flag vendor’s system works and how to verify that the AB test is working
- VIDEO: Part 3 of 3, explaining how to decommission a feature flag and set up a new control experience
- DEPRECATED: Outdated Google doc and video explainer outlining the system. Code and structure has changed a lot since this video was made.
Additional Notes
- Previous solution:
run-experiments.js
from www: https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/source/javascripts/run-experiment.js - Originally tried to bring this file over and integrate it as a nuxt plugin in this MR: https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/merge_requests/224/diffs#8f8555baf29e37a194c0d155b0001e82de21ddbf
- Our buyer’s experience repository is a JS pre-rendered site with TS support, so this would be a good candidate for interacting with their SDK TS directly: https://docs.launchdarkly.com/sdk/client-side/javascript#getting-started
- Initialize client, helper function to evaluate feature flag value: https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/blob/main/plugins/launchdarkly.ts
- Higher order component with control and experiment slots: https://gitlab.com/gitlab-com/marketing/digital-experience/buyer-experience/-/blob/main/components/launch-darkly.vue
Why did we choose LaunchDarkly
Because the marketing website about.gitlab has no dynamic server, we needed a solution that could be performant and implemented using a javascript SDK. In addition to that, we needed a solution that was able to attach metrics.
Below are some links with information on the history of the decision:
- GitLab marketing’s use of LaunchDarkly
- Why use a SaaS tool
- Taking a step back when defining requirements
- Epic for the original implementation
- Original proof of concept
fb1fed75
)