You are now viewing the Control group

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

We’re using the following code to run this test:

<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

We’re using the following code to run this test:

<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>