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.

Если урок оказался для вас полезным, поделитесь пожалуйста ;) 👇🏻