Examples
Examples to learn how to use Abrantes in your websites.
Quick tips
All examples load the default AbrantesPlus.min.js (core + plugins). But you should generate
a custom build
with the plugins you need, instead of the default.
Some examples include Google Tag Manager or Google Analytics 4 snippets. Please replace the default IDs or remove the tracking scripts in the examples.
Browse examples
Create experiments
Basic AB test
Use when you want the simplest “assign → render → persist → track” flow.
Open dev.html →CSS-only design experiment
Use when variants are mostly CSS changes and you want per-variant classes on <body>.
Segmented AB test
Use when you want to do the experiment to a segment and/or a sample of your users.
Open segment.html → Open examples - segments.js →Redirect experiment
Use when each variant is a different page/URL (landing pages, funnels, pricing pages).
Open redirect/ →Wait for DOM elements
Use when your page/app renders late (SPA, widgets) and you must wait before changing the DOM.
Open waitFor.html →Form tracking field
Use when you need the test+variant posted with a form (CRM, leads, support requests).
Open formtrack.html →Log experiment events
Use when you want to log experiment events to the Abrantes log API.
Open log.html →Cross-site experiments
Use when the experiment continues across domains and you need to keep the same variant.
Open cross-site/ →In Google Tag Manager
Use when you want to run Abrantes in GTM, for example if you can't run JavaScript on the page.
Open run-in-gtm/ →Defer-loaded scripts
Use when you load Abrantes (and/or your variant code) with defer and want predictable timing.
Iframes
Use when you want to use Abrantes in pages with iframes and part of the experiment is in an iframe.
Open iframes-limited-js/ →Open iframes-full-js/ →
Exclude variants
Exclude variants in the middle of an experiment if they are definitely getting bad results. Users already enrolled in the experiment won't be affected.
Open exclude.html →Seeded experiments
Use for cookieless experiments or cross-device experiments with logged in users.
Open seed.html →Start experiments programmatically
Start an experiment when a certain dataLayer event is triggered, instead of starting it on page load.
Open listen2DL.html →Analytics
Google Tag Manager dataLayer
Use when GTM reads your experiment/variant from dataLayer.
Google Analytics 4 (gtag)
Use when you want to send experiment and variant information to Google Analytics 4 using gtag.
Hubspot Enterprise
Use when you want to track custom events in Hubspot Marketing Hub Enterprise.
Open hubspot-enterprise.html →Microsoft Clarity
Use when you want session replays segmented by variant in Clarity.
Open clarity.html →