Отслеживание события загрузки страницы GA для одностраничного приложения при каждом изменении URL - PullRequest
Новая
       14

Отслеживание события загрузки страницы GA для одностраничного приложения при каждом изменении URL

0 голосов
/ 28 сентября 2018

Я использовал GTM и GA в своем одностраничном приложении.Для отслеживания просмотра страницы при каждом изменении URL я написал тег и триггер в GTM и могу отслеживать URL в GA при каждом изменении URL.но как отследить событие загрузки страницы при каждом изменении URL?это мой большой вопрос.Насколько я знаю, мы отслеживаем только URL и отправляем просмотр страницы при каждой загрузке страницы на веб-сайте, используя обычные действия ga. 

ga('set', 'page', '/new-page.html');
ga('send', 'pageview');

Что я должен сделать для отслеживания события загрузки страницы в gtm или ga для SPA.

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

Для SPA вам нужно настроить триггеры GTM по-другому.Стандартный триггер «Все страницы» срабатывает при всех загрузках страниц, если вы настроили его таким образом для своего SPA, а ваш SPA находится по адресу example.com/myapp, то при загрузке SPA вы увидите просмотр страницы по этому URL в GA.

Как только SPA загружен, последующие изменения маршрутизации / экрана больше не вызовут этот тег GA в GTM.

Что я нашел наиболее универсальным, так это использование пользовательских событий и слой данных для управления ими во время маршрутизации.

Например, в вашем SPA при маршрутизации на новый экран вы можете выдвинуть следующее к анализатору данных: 

dataLayer.push({
    'my-page-title': 'My App - Screen 1',
    'my-page-path': '/my-screen-1',
    'event': 'my-screen-load'});

ВыМожно заменить «Мое приложение - Экран 1» и «/ my-screen-1» переменными, чтобы сделать его динамичным, но это больше относится к вашему дизайну SPA и полностью зависит от вас, хотите ли вы, чтобы он был динамическим или статическим.

Когда вы это сделаете, в GTM вы настроите 2 переменные, 1 триггер и 1 тег GA:

Переменные: Вы создадите «Переменную уровня данных»в GTM, ссылаясь на ключ "my-page-path" в объекте datalyer,Вот так: enter image description here Мне нравится устанавливать значение по умолчанию для проверки ошибок, на случай, если кто-то запустил это событие и не предоставил значение для него в анализаторе данных, и оно еще не было установлено,значение по умолчанию поймает это.Сделайте то же самое для клавиши «my-page-title».

Trigger Создайте триггер «Custom Event» в GTM, обратитесь к событию «my-screen-load», убедитесь, чтоВы выбираете «все пользовательские события» для «этот триггер срабатывает» следующим образом: enter image description here

GA-тег Создайте новый тег Google Analytics в GTM.Установите правильные настройки (ID или переменная настроек).Затем в разделе «дополнительные параметры -> поля для установки» добавьте «страницы» и «заголовок» как два поля для установки и использования соответствующих имен переменных GTM.Затем добавьте триггер, который мы только что создали.Пример: enter image description here

Это должно позволить вам отслеживать виды экрана в вашем SPA.

0 голосов
/ 28 сентября 2018

Если вы используете GTM, вы можете настроить стандартный тег просмотра страницы GA с помощью триггера «History Change» для запуска просмотра виртуальной страницы.Триггер «Изменение истории» используется точно для одностраничных приложений, как вы описали.

В GTM щелкните свой тег GA и перейдите к триггерам -> Создать -> Конфигурация триггера -> Изменение истории

Подробнее об этом вы можете прочитать на странице поддержки GTM здесь .

...