Skip to main content

Анти-фликер

Для решения проблемы рендеринга, которое может быть связано с тем, что пользователь сначала видит контент до применения сплитов, а потом может увидеть другой после их расчетов. Можно применить механизм, который скрывает элемент пока модуль работает с данными. Этот механизм также решит проблему, если модуль по какой то причине не загрузился.

  • в <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);