Skip to content

Instantly share code, notes, and snippets.

@JLarky
Created February 10, 2024 08:02
Show Gist options
  • Save JLarky/d0a1c5ac70983866b8874cc895a837db to your computer and use it in GitHub Desktop.
Save JLarky/d0a1c5ac70983866b8874cc895a837db to your computer and use it in GitHub Desktop.
Builder client side A/B testing without flicker
<div
class="builder-component builder-component-b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
data-name="global-nav"
data-source="Rendered by Builder.io"
>
<template
data-template-variant-id="63f38278c320405da7a63b8d358c1172"
><div
class="builder-content"
builder-content-id="63f38278c320405da7a63b8d358c1172"
builder-model="global-nav"
>
<div
data-builder-component="global-nav"
data-builder-content-id="b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
>
<style data-emotion-css="h47494">
.css-h47494 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
</style>
<div class="builder-blocks css-h47494" builder-type="blocks">
<style data-emotion-css="96q1si">
.css-96q1si.builder-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
box-sizing: border-box;
margin-top: 20px;
}
</style>
<div
class="builder-block builder-f7333ab96c094987a503a085784b83f2 builder-has-component css-96q1si"
builder-id="builder-f7333ab96c094987a503a085784b83f2"
>
<div>Var B</div>
</div>
<style data-emotion-css="1qnwoh7">
.css-1qnwoh7.builder-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
box-sizing: border-box;
margin-top: 21px;
height: auto;
padding-bottom: 30px;
margin-left: -1px;
}
</style>
<div
class="builder-block builder-d4a63a4bfd9248388c7d5c1d57741aaf css-1qnwoh7"
builder-id="builder-d4a63a4bfd9248388c7d5c1d57741aaf"
>
<style data-emotion-css="hgfgng">
.css-hgfgng.builder-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
box-sizing: border-box;
margin-top: 20px;
line-height: normal;
height: auto;
}
</style>
<div
class="builder-block builder-4c269a8bc78e4cf592f3b2b41480f705 builder-has-component css-hgfgng"
builder-id="builder-4c269a8bc78e4cf592f3b2b41480f705"
>
<style data-emotion-css="1qggkls">
.css-1qggkls {
outline: none;
}
.css-1qggkls p:first-of-type,
.css-1qggkls .builder-paragraph:first-of-type {
margin: 0;
}
.css-1qggkls > p,
.css-1qggkls .builder-paragraph {
color: inherit;
line-height: inherit;
-webkit-letter-spacing: inherit;
-moz-letter-spacing: inherit;
-ms-letter-spacing: inherit;
letter-spacing: inherit;
font-weight: inherit;
font-size: inherit;
text-align: inherit;
font-family: inherit;
}</style
><span class="builder-text css-1qggkls"
>Enter some text...</span
>
</div>
</div>
<style data-emotion-css="1mvsfya">
.css-1mvsfya.builder-block {
height: 0;
width: 0;
display: inline-block;
opacity: 0;
overflow: hidden;
pointer-events: none;
}</style
><img
role="presentation"
aria-hidden="true"
src="https://cdn.builder.io/api/v1/pixel?apiKey=null"
class="builder-block builder-pixel-vbpvtf2f9cb css-1mvsfya"
builder-id="builder-pixel-vbpvtf2f9cb"
/>
</div>
</div></div
></template>
<script
id="variants-script-b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
>
(function () {
if (window.builderNoTrack || !navigator.cookieEnabled) {
return;
}
var variants = [
{ id: "63f38278c320405da7a63b8d358c1172", testRatio: 0.5 },
];
function removeVariants() {
variants.forEach(function (template) {
document
.querySelector(
'template[data-template-variant-id="' +
template.id +
'"]'
)
.remove();
});
document
.getElementById(
"variants-script-b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
)
.remove();
}
if (
typeof document.createElement("template").content ===
"undefined"
) {
removeVariants();
return;
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = "; expires=" + date.toUTCString();
}
document.cookie =
name +
"=" +
(value || "") +
expires +
"; path=/" +
"; Secure; SameSite=None";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0)
return c.substring(nameEQ.length, c.length);
}
return null;
}
var cookieName =
"builder.tests.b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240";
var variantInCookie = getCookie(cookieName);
var availableIDs = variants
.map(function (vr) {
return vr.id;
})
.concat(
"b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
);
var variantId;
if (availableIDs.indexOf(variantInCookie) > -1) {
variantId = variantInCookie;
}
if (!variantId) {
var n = 0;
var random = Math.random();
for (var i = 0; i < variants.length; i++) {
var variant = variants[i];
var testRatio = variant.testRatio;
n += testRatio;
if (random < n) {
setCookie(cookieName, variant.id);
variantId = variant.id;
break;
}
}
if (!variantId) {
variantId =
"b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240";
setCookie(
cookieName,
"b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
);
}
}
if (
variantId &&
variantId !==
"b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
) {
var winningTemplate = document.querySelector(
'template[data-template-variant-id="' + variantId + '"]'
);
if (winningTemplate) {
var parentNode = winningTemplate.parentNode;
var newParent = parentNode.cloneNode(false);
newParent.appendChild(winningTemplate.content.firstChild);
parentNode.parentNode.replaceChild(newParent, parentNode);
}
} else if (variants.length > 0) {
removeVariants();
}
})();
</script>
<div
class="builder-content"
builder-content-id="b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
builder-model="global-nav"
>
<div
data-builder-component="global-nav"
data-builder-content-id="b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
>
<style data-emotion-css="h47494">
.css-h47494 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
</style>
<div class="builder-blocks css-h47494" builder-type="blocks">
<style data-emotion-css="96q1si">
.css-96q1si.builder-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
box-sizing: border-box;
margin-top: 20px;
}
</style>
<div
class="builder-block builder-77cc6e04679040099c44132a5a3510dc builder-has-component css-96q1si"
builder-id="builder-77cc6e04679040099c44132a5a3510dc"
>
<div>Var A</div>
</div>
<style data-emotion-css="1qnwoh7">
.css-1qnwoh7.builder-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
box-sizing: border-box;
margin-top: 21px;
height: auto;
padding-bottom: 30px;
margin-left: -1px;
}
</style>
<div
class="builder-block builder-1fbe09e0212845d28c67255b5c7dbcc4 css-1qnwoh7"
builder-id="builder-1fbe09e0212845d28c67255b5c7dbcc4"
>
<style data-emotion-css="hgfgng">
.css-hgfgng.builder-block {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
box-sizing: border-box;
margin-top: 20px;
line-height: normal;
height: auto;
}
</style>
<div
class="builder-block builder-a0c2ca27ca35498687563fc2d1102d81 builder-has-component css-hgfgng"
builder-id="builder-a0c2ca27ca35498687563fc2d1102d81"
>
<style data-emotion-css="1qggkls">
.css-1qggkls {
outline: none;
}
.css-1qggkls p:first-of-type,
.css-1qggkls .builder-paragraph:first-of-type {
margin: 0;
}
.css-1qggkls > p,
.css-1qggkls .builder-paragraph {
color: inherit;
line-height: inherit;
-webkit-letter-spacing: inherit;
-moz-letter-spacing: inherit;
-ms-letter-spacing: inherit;
letter-spacing: inherit;
font-weight: inherit;
font-size: inherit;
text-align: inherit;
font-family: inherit;
}</style
><span class="builder-text css-1qggkls"
>Enter some text...</span
>
</div>
</div>
<style data-emotion-css="1mvsfya">
.css-1mvsfya.builder-block {
height: 0;
width: 0;
display: inline-block;
opacity: 0;
overflow: hidden;
pointer-events: none;
}</style
><img
src="https://cdn.builder.io/api/v1/pixel?apiKey=b86c37dbf5a74f00b1140749e979b128"
aria-hidden="true"
alt=""
role="presentation"
width="0"
height="0"
class="builder-block builder-pixel-cd1ojig80k6 css-1mvsfya"
builder-id="builder-pixel-cd1ojig80k6"
/>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment