Анти-фликер
Для решения проблемы рендеринга, которое может быть связано с тем, что пользователь сначала видит контент до применения сплитов, а потом может увидеть другой после их расчетов. Можно применить механизм, который скрывает элемент пока модуль работает с данными. Этот механизм также решит проблему, если модуль по какой то причине не загрузился.
-
в
<head>
добавить скрипт, который навешивает класс скрывающий элемент (в примере sigma-preloader), и назначить время(мс) по истечению которого класс будет удален(в примере 5000)Пример:
<style>
.sigma-preloader {
opacity: 0;
}
</style>
<script>
window.SIGMA_ERROR_TIMEOUT = 5000
((element, className, delay) => {
element.className += ' ' + className;
const removeClassName = () => {
element.className = element.className.replace(RegExp(' ?' + className), '')
};
setTimeout(function () {
removeClassName();
}, delay);
})(document.documentElement, 'sigma-preloader', SIGMA_ERROR_TIMEOUT);
</script> -
Следующий скрипт удалит класс скрывающий элемент('sigma-preloader') сразу по завершению работы sdk.
В ином случае, будет ждать 5000мс после этого удалит класс 'sigma-preloader' и добавит ключ в sessionStorage который отключит конкретный эксперимент.const rootElement = document.documentElement;
const removeClassName = () => {
if (rootElement.classList.contains('sigma-preloader')) {
rootElement.classList.remove('sigma-preloader');
}
};
const sigmaToken = <TOKEN>;
const sigmaUserData = { userId: <USER_ID> }
async function sigmaPayload(sigmaToken, sigmaUserData) {
if (sessionStorage.getItem('sigmaDisabledSplitUrl')) {
removeClassName();
return null;
}
const sigmaTimeStart = performance.now();
const sigma = new Sigma();
sigma.init({
token: sigmaToken,
userData: sigmaUserData,
});
await sigma.useSplitUrl();
const sigmaTimePassed = performance.now() - sigmaTimeStart;
if (sigmaTimePassed > SIGMA_ERROR_TIMEOUT) {
sessionStorage.setItem('sigmaDisabledSplitUrl', 1);
}
removeClassName();
}
sigmaPayload(sigmaToken, sigmaUserData);