Matomo — это потрясающая аналитическая платформа с собственным хостингом, которая, кстати, с открытым исходным кодом.

Сегодня я покажу вам, как вы можете добавить Matomo с помощью angulartics2: независимой от поставщика аналитики для вашего приложения JHipster.

Также мы увидим, как запросить у пользователя согласие на использование файлов cookie Matomo (#GDPR 😎).

Требование

Во-первых, вам понадобится развернутый Matomo для тестирования вашего кода.

В целях тестирования здесь доступны несколько образов докеров: https://github.com/matomo-org/docker.

См. Начало работы для правильной настройки.

Создать угловой проект

Наберите `jhipster` в новой папке и ответьте на вопрос

Добавьте библиотеку Angulartics2 с помощью NPM / Yarn

Добавим библиотеку в проект

Для НПМ

npm install --save angulartics2

Для пряжи

yarn add angulartics2

Настройка Angulartics2 для нашего приложения

Нам нужно импортировать и инициализировать нашу библиотеку отслеживания

Добавьте Angulartics2Module.forRoot() в app.module.ts

Теперь мы собираемся указать, какой тип аналитики мы хотим, и начать отслеживать наших пользователей.

В main.component.ts :

  • Внедрить Angulartics2Piwik
  • Вызовите метод startTracking

Настройка нашей новой библиотеки завершена, теперь нам нужно интегрировать код с сервера Matomo. Это позволит нашему угловому приложению узнать, какой экземпляр Matomo должен быть доступен для передачи данных отслеживания.

Сначала перейдите в prod.config.ts и создайте метод с именем initMatomo(), затем вызовите этот новый метод внутри if (!DEBUG_INFO_ENABLED).

Таким образом, мы не собираемся отправлять данные отслеживания при разработке приложения. Код сработает только тогда, когда будет включен режим prod (в основном, через сборку скрипта запуска npm).

Затем перейдите в приложение Matomo и выберите Настройки › Веб-сайты› Код отслеживания приложения Matomo и скопируйте и вставьте. код отслеживания.

Не забудьте удалить параметр «trackpageview», эта функция обрабатывается и запускается маршрутизатором angular

Затем нам нужно будет обернуть наш код отслеживания JS внутри нашего метода. Это будет выглядеть так со всеми нашими предыдущими работами:

И вуаля! Теперь выполните: соберите npm run-script с ./mvnw для сервера и перейдите на http://localhost:8080

Вы должны увидеть что-то вроде этого на панели управления Matomo:

Запрос у пользователя файла cookie (согласие)

Потому что мы с уважением относимся к конфиденциальности наших пользователей. Мы спросим их, хотят ли они, чтобы их отследили. По умолчанию отслеживание будет отключено.

К счастью для нас, в Matomo есть все необходимое.

Во-первых, мы должны добавить параметр непосредственно перед параметром в сценарий Matomo, чтобы сказать, что мы должны дождаться согласия пользователя, добавить следующее в сценарий Matomo, присутствующий в prod.config.ts :

_paq.push(['requireConsent']);

Теперь давайте создадим кнопку и назовем согласие:

Для кнопки на home.component.html:

<button type="button" class="btn btn-primary" (click)="onAcceptCookie()">Accept the cookie</button>

В home.component.ts :

Сразу после импорта:

declare var _paq: any;

Затем добавьте метод:

onAcceptCookie() {
    if (typeof _paq !== 'undefined') {
        // 720h = 1 month
        _paq.push(['rememberConsentGiven', 720]);
    }
}

Мы будем помнить об этом согласии только в течение одного месяца.

Для контроля вы можете проверить файлы cookie в инструментах Chrome / Firefox. Как только вы нажмете кнопку, вы должны увидеть файл cookie с именем «mtm_consent» со сроком действия/максимальным возрастом, установленным сегодня + 1 месяц.

Если вы хотите дать пользователю возможность сказать «нет», вы можете вызвать этот код, и он отменит согласие так же, как мы сделали это для предоставления согласия:

if (typeof _paq !== 'undefined') {
    _paq.push(['forgetConsentGiven']);
}

И вуаля, теперь вы находитесь в режиме подписки.

Надеюсь, этот пост был полезен, скажите, если увидели ошибку. Я всегда рад получить обратную связь.