Как заставить Google Analytics показывать правильную активную страницу в SPA, используя gtag.js?

Question

Как заставить Google Analytics показывать правильную активную страницу в SPA, используя gtag.js?

1

Я новичок в Google Analytics, поэтому я пошел дальше и добавил код gtag.js в заголовок HTML-страницы, и он отлично gtag.js для начальной загрузки страницы. Однако я использую React и response-router для динамического изменения URL-адреса, и Google Analytics не подбирает изменения на активной странице или новых кликах, когда изменение URL-адреса происходит из моего SPA.

Ответы, которые я нашел, предназначены для ga.js вместо gtag.js Я попытался приспособить предложение документации Google здесь с прослушивателем URL-адресов в других ответах, чтобы соответствовать моим потребностям.. но хотя код работает при динамической загрузке страницы, в GA ничего не отправляется.

window.gtag && history.listen((location)=>{
    console.log('>>>', location.pathname)
    gtag('config', 'GA_TRACKING_ID', {'page_path': location.pathname});
    // window.ga('set', 'page', location.pathname);  //--> this would have worked with ga.js
    // window.ga('send', 'pageview', location.pathname);
});

Jad S 28 окт. 2017, в 06:21

Источник

Теги:

javascript

google-tag-manager

google-analytics

2 ответа

0

Полагаю, это может быть проблема с Реактивом. Попробуйте проверить этот поток: React router 4 history.listen никогда не срабатывает

Дмитро Булах 30 окт. 2017, в 07:23

0

Я на самом деле понял это. Я отправлю ответ. history.listen сработала, это был GA, который не стрелял, но оказалось, что решение простое и обрабатывается вне кода (из GTM).
Jad S 30 окт. 2017, в 10:54
0

Ах, вы не упомянули, что стреляете с GTM. Я полагаю, вам не нужен gtag('config', 'GA_TRACKING_ID', {'page_path':location.pathname}); тогда dataLayer.push() будет достаточно для запуска тега.
Дмитро Булах 30 окт. 2017, в 12:23
0

BTW GTM имеет встроенный слушатель изменения истории, поэтому вам не нужно делать dataLayer.push из кода
Дмитро Булах 30 окт. 2017, в 12:25
0

Интересно, есть ли у вас ссылка об этом для справки?
Jad S 30 окт. 2017, в 13:28
0

У Симо есть полный обзор simoahava.com/analytics/google-tag-manager-history-listener
Дмитро Булах 31 окт. 2017, в 11:28

Показать ещё 3 комментария

Ещё вопросы

Я на самом деле понял это. Я отправлю ответ. history.listen сработала, это был GA, который не стрелял, но оказалось, что решение простое и обрабатывается вне кода (из GTM).
Ах, вы не упомянули, что стреляете с GTM. Я полагаю, вам не нужен gtag('config', 'GA_TRACKING_ID', {'page_path':location.pathname}); тогда dataLayer.push() будет достаточно для запуска тега.
BTW GTM имеет встроенный слушатель изменения истории, поэтому вам не нужно делать dataLayer.push из кода
Интересно, есть ли у вас ссылка об этом для справки?
У Симо есть полный обзор simoahava.com/analytics/google-tag-manager-history-listener

Jad S · Accepted Answer · 2017-10-30T08-01-00.000Z

Решение оказалось на стороне Диспетчера тегов Google. Увольнение события, как показано в документации GTM, которую я связывал, не принесет никакой пользы, если на этом этапе не будет триггера на стороне GTM, и тег, прослушивающий этот триггер.

поэтому шаг:

Подключите приложение к Диспетчеру тегов Google
создать триггер в Диспетчере тегов Google, который прослушивает событие VirtualPageview
Создайте тег, прослушивающий триггер, созданный на шаге 2, этот тег является тегом Google Analytics
Теперь все, что должно произойти, - это код, чтобы VirtualPageview событие VirtualPageview. Это делается, как показано ниже

-

export function virtualPageviewOnRouteChange(history){
    let previousPathname = null
    window.gtag && history.listen((location)=>{
        if(previousPathname != location.pathname){
            previousPathname = location.pathname;
            gtag('config', 'GA_TRACKING_ID', {'page_path':location.pathname});
            dataLayer.push({
                'event':'VirtualPageview',
                'virtualPageURL':location.pathname,
            });
        }
    });
}