{"id":28882827,"url":"https://github.com/dropbear-software/web-experiments","last_synced_at":"2026-03-05T04:01:47.592Z","repository":{"id":291322057,"uuid":"977261923","full_name":"dropbear-software/web-experiments","owner":"dropbear-software","description":"Implement flexible client-side A/B experiments with weighted variants, persistence, and optional server-side control.","archived":false,"fork":false,"pushed_at":"2025-05-20T20:20:39.000Z","size":541,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T15:47:22.622Z","etag":null,"topics":["ab-testing","analytics","custom-elements","customer-experience","google-analytics-4","google-tag-manager","no-dependencies","split-testing","vanilla-javascript","web-components"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@dropbear-dev/web-experiments","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dropbear-software.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-03T19:42:14.000Z","updated_at":"2025-07-31T05:10:12.000Z","dependencies_parsed_at":"2025-06-20T21:05:21.615Z","dependency_job_id":"5f9f310c-b3e3-4c44-88e1-9a39df5ae2b9","html_url":"https://github.com/dropbear-software/web-experiments","commit_stats":null,"previous_names":["dropbear-software/web-experiments"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/dropbear-software/web-experiments","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropbear-software%2Fweb-experiments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropbear-software%2Fweb-experiments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropbear-software%2Fweb-experiments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropbear-software%2Fweb-experiments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dropbear-software","download_url":"https://codeload.github.com/dropbear-software/web-experiments/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropbear-software%2Fweb-experiments/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30109075,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T03:40:26.266Z","status":"ssl_error","status_checked_at":"2026-03-05T03:39:15.902Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ab-testing","analytics","custom-elements","customer-experience","google-analytics-4","google-tag-manager","no-dependencies","split-testing","vanilla-javascript","web-components"],"created_at":"2025-06-20T21:01:54.958Z","updated_at":"2026-03-05T04:01:47.583Z","avatar_url":"https://github.com/dropbear-software.png","language":"JavaScript","readme":"[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n[![Open in Firebase Studio](https://cdn.firebasestudio.dev/btn/open_light_20.svg)](https://studio.firebase.google.com/import?url=https%3A%2F%2Fgithub.com%2Fdropbear-software%web-experiments)\n# Web Experiments\n\nRun A/B tests directly in your HTML using framework-agnostic native web components.\n\n## Description\n\n`@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.\n\n## Installation\n\nYou can install the package using npm:\n\n```bash\nnpm install @dropbear-dev/web-experiments\n```\n\n## Usage\n\nInclude the script in your HTML file:\n\n```html\n\u003cscript type=\"module\" src=\"node_modules/@dropbear-dev/web-experiments/main.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, consider using a modern approach with Import Maps\n\n```html\n\u003cscript type=\"importmap\"\u003e\n  {\n    \"imports\": {\n      \"@dropbear-dev/web-experiments\": \"https://ga.jspm.io/npm:@dropbear-dev/web-experiments@0.1.0/main.js\"\n    }\n  }\n\u003c/script\u003e\n\u003cscript type=\"module\"\u003e\n  import \"@dropbear-dev/web-experiments\";\n\u003c/script\u003e\n```\n\nNow, include the following CSS on the page:\n\n```css\n/* Rule 1: Hide the experiment until the web-experiment component has loaded */\nweb-experiment:not(:defined) {\n  display: none;\n}\n\n/* Rule 2: Hide all variants within an experiment BY DEFAULT */\nweb-experiment\u003eweb-experiment-variant {\n  display: none;\n}\n\n/* Rule 3: Define how the CHOSEN variant should display\nThis rule applies when the script removes the 'hidden' attribute */\nweb-experiment\u003eweb-experiment-variant:not([hidden]) {\n  display: block;\n  /* Or inline, flex, etc. - match your layout needs */\n}\n\n/* Rule 4: (Optional fallback/belt-and-suspenders)\nExplicitly ensure elements with 'hidden' attr are hidden */\nweb-experiment-variant[hidden] {\n  display: none !important;\n}\n```\n\nFinally, use the custom elements in your HTML:\n\n```html\n\u003cweb-experiment experiment-id=\"headline-test\" data-storage=\"local\"\u003e\n  \u003cweb-experiment-variant variant-id=\"short-headline\" weight=\"70\"\u003e\n    \u003ch1\u003eShort Headline Example\u003c/h1\u003e\n  \u003c/web-experiment-variant\u003e\n  \u003cweb-experiment-variant variant-id=\"long-headline\" weight=\"30\"\u003e\n    \u003ch1\u003eThis is my Long Headline Example\u003c/h1\u003e\n  \u003c/web-experiment-variant\u003e\n\u003c/web-experiment\u003e\n```\n\nSet the probabilities for each variant. The sum of probabilities for all variants within an experiment should be 100.\n\nNote 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 `\u003cweb-experiment\u003e` tag like so:\n\n```html\n\u003c!-- Will automatically send the right events to the data layer that GTM expects --\u003e\n\u003cweb-experiment gtm experiment-id=\"headline-test\" data-storage=\"local\"\u003e\n  \u003cweb-experiment-variant variant-id=\"short-headline\" weight=\"70\"\u003e\n    \u003ch1\u003eShort Headline Example\u003c/h1\u003e\n  \u003c/web-experiment-variant\u003e\n  \u003cweb-experiment-variant variant-id=\"long-headline\" weight=\"30\"\u003e\n    \u003ch1\u003eThis is my Long Headline Example\u003c/h1\u003e\n  \u003c/web-experiment-variant\u003e\n\u003c/web-experiment\u003e\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdropbear-software%2Fweb-experiments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdropbear-software%2Fweb-experiments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdropbear-software%2Fweb-experiments/lists"}