Google Optimize JS API на SPA

У меня проблема с Google Optimize JS API в моем SPA, обратный вызов запускается только при перезагрузке страницы, но при переходе назад и вперед на конкретную страницу обратный вызов не запускается. Вот сценарий:

1) Я перезагружаю приложение и перехожу на свою страницу с активным A / B-тестом: mysite.com/testpage

2) Выполняется следующий код:

gtag('event', 'optimize.callback', {
     name: experimentId,
     callback: useVariant,
});

и useVariant(variantId) вызывается с установкой правильного optionId.

3) Я щелкаю или ухожу со страницы, а затем щелкаю / перехожу обратно на mysite.com/testpage, обратите внимание, это SPA.

4) Код gtag() вызывается повторно, НО обратный вызов useVariant() не выполняется.

5) Какого черта.

6) Если я перезагружаю страницу, используя CMD + R (да, я использую Mac), код работает как в пункте 1) И все в порядке.

Я пробовал следующее:

A. Сброс уровня данных с помощью google_tag_manager['xxx'].datalayer.reset()

Б. Повторная отправка события с неопределенным обратным вызовом gtag('event', 'optimize.callback', undefined)

C. Сброс datalayer = [] manually

D. Удаление события optimize.callback из уровня данных

E. Любая комбинация вышеперечисленного (что иногда дает немного интересные результаты)

Итак, вопрос в пункте 5: WTF? Приветствуются любые предложения / мысли.

Спасибо!


javascript google-tag-manager google-optimize
person Georgios Dimitriadis    schedule 02.08.2019    source источник
comment
Что является триггером вашего эксперимента? Загрузка страницы или настраиваемое событие?   -  person kgrg    schedule 02.08.2019
comment
Использование redux useEffect в компоненте.   -  person Georgios Dimitriadis    schedule 02.08.2019

Ответы (2)


arrow_upward
0
arrow_downward

Я наконец решил это! Вот как это исправить, может это кому-то поможет.

Проблема заключается в функции обратного вызова useVariant. Я определил это так useVariant(variantId), когда на самом деле (спасибо документации Google за ясность по этому поводу, НЕ), это должно быть useVariant(variantId, experimentId)

Итак, изменив функцию обратного вызова, чтобы она принимала два аргумента, код будет работать.

person Georgios Dimitriadis    schedule 02.08.2019
comment
У меня такая же (или похожая проблема). Это не помогло мне. Интересно, есть ли у меня другая конфигурация за пределами вызова gtag('event', 'optimise.callback', /* ... */). - person Simon Dell; 08.11.2019
comment
Не более того: window.gtag('event', 'optimize.activate'); window.gtag('event', 'optimize.callback', { name: experimentId, callback: useVariant, }); - person Georgios Dimitriadis; 15.11.2019

arrow_upward
-1
arrow_downward

Для React вы можете реализовать события активации в методах componentDidMount и componentDidUpdate жизненного цикла компонента верхнего уровня, чтобы запускать коды экспериментов сразу после монтирования или обновления компонента на странице.

Ваш код может выглядеть так:

import React from 'react';
export default class App extends React.Component {
    componentDidMount() {
        dataLayer.push({ 'event': 'optimize.activate' });
    }
    componentDidUpdate() {
        dataLayer.push({ 'event': 'optimize.activate' });
    }
    render() {
        // experiment code goes here...
    }
}

Тесты SPA в Google optimize

person neha    schedule 06.02.2020