You are now viewing the Control group
Use the links below to switch between the Control and Test pages
We’re using the following code to run this test:
Copy
<script> // Variation definition const testSlug = '001-about-page-Heading-test'; const variations = { 'control': [{ selector: '#control-group', updates: {style: {display: 'block'}} }, { selector: '#Heading-test1', updates: {style: {display: 'none'}} }, { selector: '#Heading-test2', updates: {style: {display: 'none'}} } ], // ALWAYS keep the control key as 'control' 'test_group_1': [ { selector: '#control-group', updates: {style: {display: 'none'}} }, { selector: '#Heading-test1', updates: {style: {display: 'block'}} }, { selector: '#Heading-test2', updates: {style: {display: 'none'}} } ], 'test_group_2': [ { selector: '#control-group', updates: {style: {display: 'none'}} }, { selector: '#Heading-test2', updates: {style: {display: 'block'}} }, { selector: '#Heading-test1', updates: {style: {display: 'none'}} } ] }; // Utility functions const applyUpdates = (selector, updates) => { const elements = document.querySelectorAll(selector); elements.forEach((element) => { Object.entries(updates).forEach(([key, value]) => { if (typeof value === 'object' && !Array.isArray(value)) { Object.entries(value).forEach(([nestedKey, nestedValue]) => { element[key][nestedKey] = nestedValue; }); } else { element[key] = value; } }); }); }; const applyVariantConfig = (variant) => { const config = variations[variant]; config.forEach(({ selector, updates }) => { applyUpdates(selector, updates); }); console.log(`Test group "${variant}" activated`); }; // Retrieve query parameter value by its key const getQueryParamByKey = (key) => new URLSearchParams(window.location.search).get(key); // Determine and apply visibility of variants based on URL parameter or feature flag const evaluateTestGroup = (variations, testSlug) => { let groupValue = getQueryParamByKey(testSlug); if (!groupValue) { posthog.onFeatureFlags(() => { const flagValue = posthog.getFeatureFlag(testSlug); if (variations.hasOwnProperty(flagValue)) { groupValue = flagValue; applyVariantConfig(groupValue); } else { console.log("Test not started yet, showing control."); } }); } else { applyVariantConfig(groupValue); } }; evaluateTestGroup(variations, testSlug); </script>
You are now viewing Test group1
Use the links below to switch between the Control and Test pages
We’re using the following code to run this test:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
// Variation definition | |
const testSlug = '001-about-page-Heading-test'; | |
const variations = { | |
'control': [{ | |
selector: '#control-group', | |
updates: {style: {display: 'block'}} | |
}, | |
{ | |
selector: '#Heading-test1', | |
updates: {style: {display: 'none'}} | |
}, | |
{ | |
selector: '#Heading-test2', | |
updates: {style: {display: 'none'}} | |
} | |
], // ALWAYS keep the control key as 'control' | |
'test_group_1': [ | |
{ | |
selector: '#control-group', | |
updates: {style: {display: 'none'}} | |
}, | |
{ | |
selector: '#Heading-test1', | |
updates: {style: {display: 'block'}} | |
}, | |
{ | |
selector: '#Heading-test2', | |
updates: {style: {display: 'none'}} | |
} | |
], | |
'test_group_2': [ | |
{ | |
selector: '#control-group', | |
updates: {style: {display: 'none'}} | |
}, | |
{ | |
selector: '#Heading-test2', | |
updates: {style: {display: 'block'}} | |
}, | |
{ | |
selector: '#Heading-test1', | |
updates: {style: {display: 'none'}} | |
} | |
] | |
}; | |
// Utility functions | |
const applyUpdates = (selector, updates) => { | |
const elements = document.querySelectorAll(selector); | |
elements.forEach((element) => { | |
Object.entries(updates).forEach(([key, value]) => { | |
if (typeof value === 'object' && !Array.isArray(value)) { | |
Object.entries(value).forEach(([nestedKey, nestedValue]) => { | |
element[key][nestedKey] = nestedValue; | |
}); | |
} else { | |
element[key] = value; | |
} | |
}); | |
}); | |
}; | |
const applyVariantConfig = (variant) => { | |
const config = variations[variant]; | |
config.forEach(({ selector, updates }) => { | |
applyUpdates(selector, updates); | |
}); | |
console.log(`Test group "${variant}" activated`); | |
}; | |
// Retrieve query parameter value by its key | |
const getQueryParamByKey = (key) => new URLSearchParams(window.location.search).get(key); | |
// Determine and apply visibility of variants based on URL parameter or feature flag | |
const evaluateTestGroup = (variations, testSlug) => { | |
let groupValue = getQueryParamByKey(testSlug); | |
if (!groupValue) { | |
posthog.onFeatureFlags(() => { | |
const flagValue = posthog.getFeatureFlag(testSlug); | |
if (variations.hasOwnProperty(flagValue)) { | |
groupValue = flagValue; | |
applyVariantConfig(groupValue); | |
} else { | |
console.log("Test not started yet, showing control."); | |
} | |
}); | |
} else { | |
applyVariantConfig(groupValue); | |
} | |
}; | |
evaluateTestGroup(variations, testSlug); | |
</script> |
You are now viewing Test group2
Use the links below to switch between the Control and Test pages
We’re using the following code to run this test:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
// Variation definition | |
const testSlug = '001-about-page-Heading-test'; | |
const variations = { | |
'control': [{ | |
selector: '#control-group', | |
updates: {style: {display: 'block'}} | |
}, | |
{ | |
selector: '#Heading-test1', | |
updates: {style: {display: 'none'}} | |
}, | |
{ | |
selector: '#Heading-test2', | |
updates: {style: {display: 'none'}} | |
} | |
], // ALWAYS keep the control key as 'control' | |
'test_group_1': [ | |
{ | |
selector: '#control-group', | |
updates: {style: {display: 'none'}} | |
}, | |
{ | |
selector: '#Heading-test1', | |
updates: {style: {display: 'block'}} | |
}, | |
{ | |
selector: '#Heading-test2', | |
updates: {style: {display: 'none'}} | |
} | |
], | |
'test_group_2': [ | |
{ | |
selector: '#control-group', | |
updates: {style: {display: 'none'}} | |
}, | |
{ | |
selector: '#Heading-test2', | |
updates: {style: {display: 'block'}} | |
}, | |
{ | |
selector: '#Heading-test1', | |
updates: {style: {display: 'none'}} | |
} | |
] | |
}; | |
// Utility functions | |
const applyUpdates = (selector, updates) => { | |
const elements = document.querySelectorAll(selector); | |
elements.forEach((element) => { | |
Object.entries(updates).forEach(([key, value]) => { | |
if (typeof value === 'object' && !Array.isArray(value)) { | |
Object.entries(value).forEach(([nestedKey, nestedValue]) => { | |
element[key][nestedKey] = nestedValue; | |
}); | |
} else { | |
element[key] = value; | |
} | |
}); | |
}); | |
}; | |
const applyVariantConfig = (variant) => { | |
const config = variations[variant]; | |
config.forEach(({ selector, updates }) => { | |
applyUpdates(selector, updates); | |
}); | |
console.log(`Test group "${variant}" activated`); | |
}; | |
// Retrieve query parameter value by its key | |
const getQueryParamByKey = (key) => new URLSearchParams(window.location.search).get(key); | |
// Determine and apply visibility of variants based on URL parameter or feature flag | |
const evaluateTestGroup = (variations, testSlug) => { | |
let groupValue = getQueryParamByKey(testSlug); | |
if (!groupValue) { | |
posthog.onFeatureFlags(() => { | |
const flagValue = posthog.getFeatureFlag(testSlug); | |
if (variations.hasOwnProperty(flagValue)) { | |
groupValue = flagValue; | |
applyVariantConfig(groupValue); | |
} else { | |
console.log("Test not started yet, showing control."); | |
} | |
}); | |
} else { | |
applyVariantConfig(groupValue); | |
} | |
}; | |
evaluateTestGroup(variations, testSlug); | |
</script> |