https://github.com/dropbear-software/web-experiments
Implement flexible client-side A/B experiments with weighted variants, persistence, and optional server-side control.
https://github.com/dropbear-software/web-experiments
ab-testing analytics custom-elements customer-experience google-analytics-4 google-tag-manager no-dependencies split-testing vanilla-javascript web-components
Last synced: about 2 months ago
JSON representation
Implement flexible client-side A/B experiments with weighted variants, persistence, and optional server-side control.
- Host: GitHub
- URL: https://github.com/dropbear-software/web-experiments
- Owner: dropbear-software
- License: mit
- Created: 2025-05-03T19:42:14.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-05-20T20:20:39.000Z (11 months ago)
- Last Synced: 2025-10-06T15:47:22.622Z (7 months ago)
- Topics: ab-testing, analytics, custom-elements, customer-experience, google-analytics-4, google-tag-manager, no-dependencies, split-testing, vanilla-javascript, web-components
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@dropbear-dev/web-experiments
- Size: 528 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://opensource.org/licenses/MIT)
[](https://studio.firebase.google.com/import?url=https%3A%2F%2Fgithub.com%2Fdropbear-software%web-experiments)
# Web Experiments
Run A/B tests directly in your HTML using framework-agnostic native web components.
## Description
`@dropbear/web-experiment` is a web component that simplifies the process of running A/B tests directly on your website. It leverages custom elements to manage experiment variants and track user assignments.
## Installation
You can install the package using npm:
```bash
npm install @dropbear-dev/web-experiments
```
## Usage
Include the script in your HTML file:
```html
```
Alternatively, consider using a modern approach with Import Maps
```html
{
"imports": {
"@dropbear-dev/web-experiments": "https://ga.jspm.io/npm:@dropbear-dev/web-experiments@0.1.0/main.js"
}
}
import "@dropbear-dev/web-experiments";
```
Now, include the following CSS on the page:
```css
/* Rule 1: Hide the experiment until the web-experiment component has loaded */
web-experiment:not(:defined) {
display: none;
}
/* Rule 2: Hide all variants within an experiment BY DEFAULT */
web-experiment>web-experiment-variant {
display: none;
}
/* Rule 3: Define how the CHOSEN variant should display
This rule applies when the script removes the 'hidden' attribute */
web-experiment>web-experiment-variant:not([hidden]) {
display: block;
/* Or inline, flex, etc. - match your layout needs */
}
/* Rule 4: (Optional fallback/belt-and-suspenders)
Explicitly ensure elements with 'hidden' attr are hidden */
web-experiment-variant[hidden] {
display: none !important;
}
```
Finally, use the custom elements in your HTML:
```html
Short Headline Example
This is my Long Headline Example
```
Set the probabilities for each variant. The sum of probabilities for all variants within an experiment should be 100.
Note that you can also integrate with Google Tag Manager or Google Analytics 4 automatically by just adding the appropriate attribute `gtm` or `ga` to the `` tag like so:
```html
Short Headline Example
This is my Long Headline Example
```
## License
MIT