- Обучение
- Quasar Framework: Google Tag Manager и настройка Google Analytics для веб-сайта SPA
Quasar Framework: Google Tag Manager и настройка Google Analytics для веб-сайта SPA

Quasar Framework - это фантастическая платформа для создания веб-сайтов и приложений Cordova с использованием одной и той же базы кода. В этом руководстве рассматривается настройка Google Tag Manager и Google Analytics для работы на веб-сайте SPA, созданном с помощью Quasar. В руководстве представлены только базовые данные, которые передаются в GTM и GA, но как только вы поймете, как это работает, вы можете легко изменить их для своих целей.
Проблема с веб-сайтом SPA заключается в том, что стандартная настройка GTM/GA зависит от просмотров страниц, которых у нас нет в SPA. Вместо этого нам нужно отслеживать изменения маршрута, что требует некоторой ручной работы и настройки. Однако, если все сделано правильно, результат состоит в том, что у вас будет полный контроль над тем, что отправлять в GTM и когда. Также легко предварительно обработать некоторые параметры, например, путь /client/1234/posts может быть обработан в /client/x/posts перед отправкой, чтобы аналитика не интерпретировала страницу сообщений каждого клиента как отдельную страницу.
Настройка Google Tag Manager
Для начала нам понадобится контейнер в Google Tag Manager. Войдите в Tag Manager и создайте новый контейнер типа Web:
Создайте контейнер GTM, который является типом WEB
Добавьте следующие переменные. Оставьте настройки по умолчанию, кроме переменной настроек Google Analytics (см. Снимок экрана):
Добавьте свой собственный идентификатор отслеживания Google Analytics в переменную настроек Google Analytics:
Добавьте следующие два триггера:
Добавьте два тега Google Universal Analytics:
Теперь мы настроили Google Tag Manager! Эта конфигурация в основном означает, что если GTM получает событие через dataLayer с именем customEvent, он запускает тег, который отправляет данные события в Google Analytics, предварительно выполняя сопоставление некоторых параметров. Если полученное событие называется customPageView, оно запускает тег, который отправляет данные о просмотре страницы в Google Analytics.
Конфигурация Quasar
Затем нам нужно добавить GMT в наш проект src/index.template.html внутри раздела head . Замените идентификатор GTM своим собственным.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){ w[l]=w[l]||[];w[l].push({ 'gtm.start':new Date().getTime(),event:'gtm.js' });
var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;
j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); }
)(window,document,'script','dataLayer','GTM-XXXXXXX');
</script><!-- End Google Tag Manager -->
Теперь у нас есть объект dataLayer, и мы можем отправлять в него события.
Добавьте файл src/components/gtm.js
import { uid } from 'quasar'
export default {
logEvent (category, action, label, value) {
dataLayer.push({
'event': 'customEvent',
'category': category,
'action': action,
'label': label,
'value': value,
'cid': this.getCid()
});
},
logPage (path) {
// Here you can preprocess the path, if needed
dataLayer.push({
'event': 'customPageView',
'path': path,
'cid': this.getCid()
});
},
getCid () {
// We need an unique identifier for this session
// We store it in a localStorage, but you may use cookies, too
if (!localStorage.cid) {
localStorage.cid = uid();
}
return localStorage.cid;
},
}
Затем создайте загрузочный файл Quasar src/boot/gtm-plugin.js
import gtm from 'src/components/gtm';
export default ({ router }) => {
router.afterEach((to, from) => {
gtm.logPage(to.path);
})
}
Укажите этот файл в quasar.conf.js:
boot: [
...
{
server: false,
path: 'gtm'
}
],
Мы закончили! GTM собрирает просмотры страниц (а точнее, изменения маршрута). Теперь вы можете протестировать его, открыв Google Analytics и просмотрев представление в реальном времени. Вы должны увидеть 1 активного пользователя.
Собирать события можно так:
import gtm from 'src/components/gtm';
...
gtm.logEvent('conversions', 'PurchaseDoneEvent', 'Purchase Done', 99.90);
PS. Не забудьте добавить цели и конверсии в аккаунт Google Analytics.
Если урок оказался для вас полезным, поделитесь пожалуйста ;) 👇🏻
Комментарии ()
Написать комментарий