Настройте антимерцающий скрипт Google Optimize на NextJS/ReactJS

В проекте NextJS/ReactJS я пытаюсь настроить Google Optimize для некоторых экспериментов. Чего я хочу избежать, так это мерцающего эффекта, который он имеет, когда Оптимизация меняет визуальные элементы в каждом эксперименте.

По этой причине я использовал скрипт антимерцания, предложенный Google. Теперь, хотя это работает при начальной загрузке, практически «скрывая» всю страницу на некоторое время, чтобы Оптимизация применила изменения, это не работает в моем случае с точки зрения маршрутизации на стороне клиента, поскольку полная перезагрузка страницы в этом случае не происходит.

Поэтому я "избегаю" мерцания при начальной загрузке страницы, но мне не удалось заставить его работать с точки зрения маршрутизации на стороне клиента, так как первоначальный скрипт не выполняется повторно, а даже если бы и выполнялся, результат был бы неидеален. .

Обратите внимание, что скрытие и повторное отображение страницы не является вариантом (например, повторная инициация сценария с помощью события изменения истории), поскольку это нарушает непрерывность маршрутизации на стороне клиента. Кроме того, временно скрыть мерцающий компонент не так-то просто, так как я не уверен, на каком этапе процесса маршрутизации я должен его скрыть, и мне не удалось заставить его отображаться эффективным способом. Мысли?

Заранее большое спасибо.


reactjs javascript routes next.js google-optimize
person Nick Louloudakis    schedule 15.05.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Это решение может работать или не работать с вашим вариантом использования, но я использую это решение для большинства экспериментов Google Optimize и могу создавать с его помощью сложные тесты AB.

  1. Определите Activation event в настройках вашего эксперимента.
  2. Инициализируйте эксперимент, используя useEffect
  3. Используйте состояние React или Redux для переключения компонентов с помощью свойства eventCallback.

Образец компонента:

const ExperimentalComponent = () => {
    // 0 - Original
    const [experimentType, setExperimentType] = useState("0");
    useEffect(() => {
        if(window && window.dataLayer && !isLoadingExperiment) {
            window.dataLayer.push({
                event: "my_experiment_name",
                eventCallback: () => {
                    const experimentType = window.google_optimize && window.google_optimize.get("experimentId");
                    // undefined - when experiment isn't running
                    // 1,2,3 - when ant variant is running
                    if(experimentType) {
                        setExperimentType(experimentType);
                    }

                }
            });
        }
    }, []);

    return (
        <React.Fragment>
            {/* Yes! google_optimize.get return string instead of number */}
            { experimentType === "0" && <div>Original</div> }
            { experimentType === "1" && <div>Variant 1</div> }
            { experimentType === "2" && <div>Variant 2</div> }
        </React.Fragment>
    );
};

Идентификатор эксперимента

Идентификатор эксперимента

Триггер эксперимента

Триггер эксперимента

Использованная литература:

person Rajender Joshi    schedule 15.05.2020
comment
спасибо за ваш ответ, но если я правильно понял, вы используете API оптимизации, чтобы применить пользовательский код для каждого выбора варианта. Однако в Optimize вы можете использовать интерфейс на основе графического интерфейса для определения изменений визуальных элементов без использования кода. Что я хочу, так это отображение этих вариантов без мерцания в ReactJS, без перезаписи изменений каждого варианта в моем коде. На практике я хочу настроить динамические изменения отображения вариантов, а не просто определить вариант Optimize и установить дополнительный пользовательский код на основе этого. - person Nick Louloudakis; 18.05.2020