Если вы еще не слышали о Matomo, то вам стоит ознакомиться с этим.
Matomo — это
«альтернатива Google Analytics, которая защищает ваши данные и конфиденциальность ваших клиентов» и «дает вам 100% владение данными».
Это отличная новость для тех из вас, кто знает о GDPR и, к сожалению (для некоторых), не может использовать облачные сервисы, такие как Google Analytics.
Итак, с чего же нам начать?
В этом руководстве я помогу вам настроить «локальную» установку Matomo, используя Docker с nginx, и запустить ее на Angular.
Справочный материал
Всю информацию, которой я делюсь, можно найти на сайтах matomo-org/docker и EmmanuelRoux/ngx-matomo.
Некоторые твики можно найти в моем git matomo-angular-docker.
Я также предполагаю, что вы уже установили docker на своей машине.
Настройка вашего docker
Эта установка предназначена для Matomo версии 3 и включает базу данных с образом MySQL (вы можете использовать и MariaDB), приложение Matomo и веб с помощью nginx.
Первым делом, давайте возьмем файл docker-compose.yaml.
version: "3"
services:
db:
image: mysql
command: --max-allowed-packet=64MB
restart: always
volumes:
- db:/var/lib/mysql
environment:
- MYSQL_ROOT_PASSWORD=matomo
env_file:
- ./db.env
app:
image: matomo:fpm-alpine
restart: always
links:
- db
volumes:
- matomo:/var/www/html
environment:
- MATOMO_DATABASE_HOST=db
- PHP_MEMORY_LIMIT=2048M
env_file:
- ./db.env
web:
image: nginx:alpine
restart: always
volumes:
- matomo:/var/www/html:ro
- ./matomo.conf:/etc/nginx/conf.d/default.conf:ro
ports:
- 8080:80
volumes:
db:
matomo:
Здесь нет ничего фантастического, Matomo будет запущен на порту 8080, и вы, конечно, можете изменить такие значения, как MYSQL_ROOT_PASSWORD или опцию restart (которая, если вы не знаете, постоянно перезапускает контейнер в случае сбоя).
Если вы не заметили, в этой композиции мы ссылаемся еще на два файла.
db.env, где мы установим некоторые переменные для изображения MySQL
MYSQL_PASSWORD=matomo
MYSQL_DATABASE=matomo
MYSQL_USER=matomo
MATOMO_DATABASE_ADAPTER=mysql
MATOMO_DATABASE_TABLES_PREFIX=matomo_
MATOMO_DATABASE_USERNAME=matomo
MATOMO_DATABASE_PASSWORD=matomo
MATOMO_DATABASE_DBNAME=matomo
И файл matomo.conf, в котором мы определяем поведение для Matomo nginx.
upstream php-handler {
server app:9000;
}
server {
listen 80;
add_header Referrer-Policy origin; # make sure outgoing links don't show the URL to the Matomo instance
root /var/www/html; # replace with path to your matomo instance
index index.php;
try_files $uri $uri/ =404;
## only allow accessing the following php files
location ~ ^/(index|matomo|piwik|js/index|plugins/HeatmapSessionRecording/configs).php {
# regex to split $uri to $fastcgi_script_name and $fastcgi_path
fastcgi_split_path_info ^(.+.php)(/.+)$;
# Check that the PHP script exists before passing it
try_files $fastcgi_script_name =404;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param HTTP_PROXY ""; # prohibit httpoxy: https://httpoxy.org/
fastcgi_pass php-handler;
}
## deny access to all other .php files
location ~* ^.+.php$ {
deny all;
return 403;
}
## disable all access to the following directories
location ~ /(config|tmp|core|lang) {
deny all;
return 403; # replace with 404 to not show these directories exist
}
location ~ /.ht {
deny all;
return 403;
}
location ~ js/container_.*_preview.js$ {
expires off;
add_header Cache-Control 'private, no-cache, no-store';
}
location ~ .(gif|ico|jpg|png|svg|js|css|htm|html|mp3|mp4|wav|ogg|avi|ttf|eot|woff|woff2|json)$ {
allow all;
## Cache images,CSS,JS and webfonts for an hour
## Increasing the duration may improve the load-time, but may cause old files to show after an Matomo upgrade
expires 1h;
add_header Pragma public;
add_header Cache-Control "public";
}
location ~ /(libs|vendor|plugins|misc/user) {
deny all;
return 403;
}
## properly display textfiles in root directory
location ~/(.*.md|LEGALNOTICE|LICENSE) {
default_type text/plain;
}
}
# vim: filetype=nginx
Вот и все!
Пора запустить файл docker-compose. Для этого просто откройте ваш любимый терминал (мне нравится ZSH!) в корне папки, в которой находится файл, и выполните команду docker-compose up. Это создаст необходимые тома и образы для новых контейнеров docker.
Если теперь вы перейдете на свой http://localhost:8080/, и вы сделали все в точности так, как я сказал, вы увидите, что Matomo готов к настройке.
Настройка Matomo
На странице Database Setup убедитесь, что вы ввели значения, определенные в файле docker-compose.yaml.
На шаге Superuser просто установите свои учетные данные, как вы хотите, а затем на Set up a Website убедитесь, что вы определили цель, в данном примере это будет https://localhost:4200, где мы будем запускать наше ангулярное приложение.
Проблемы впереди?
По окончании установки вы можете столкнуться с предупреждением о том, что Matomo не был настроен для работы на порту localhost 8080.
Проблема не проблема, смекаете?
Чтобы обойти это, нам нужно изменить файл Matomo config.ini.php внутри контейнера приложения, который был создан нашим файлом compose.
Дело в том, что нам нужно сказать Matomo, что порт, который мы используем, является доверенным хостом.
Для этого выполните следующую команду из той же папки, где находится docker-compose.yaml: docker exec -u 0 -it matomo_app /bin/sh учтите, что matomo_app — это имя вашего контейнера (в некоторых сценариях вы можете получить суффикс matomo_app_1, просто проверьте имя с помощью docker ps).
Если команда выполнена успешно, то мы должны быть внутри контейнера.
Теперь мы воспользуемся vi для редактирования конфигурационного файла Matomo, выполнив команду vi config/config.ini.php (убедитесь, что ваш путь /var/www/html).
Нажмите клавишу I для вставки данных, перейдите к разделу [General] и добавьте следующее:
[General]
trusted_hosts[] = "localhost:8080"
cors_domains[] = *
После завершения редактирования нажмите клавишу ESC, напишите :wq и нажмите Enter. Это приведет к записи и завершению редактирования файла.
Доверенные хосты позволят вам запускать Matomo на определенном вами порту (в данном сценарии это 8080), а CORS позволит вашему локальному проекту вызывать Matomo на том же порту (посмотрите на меня, делаю магию и все такое).
Мы уже на месте?
Почти все, детки. Итак, у нас все работает, и единственным недостающим звеном является добавление пакета Matomo в ваш ангулярный проект и его настройка.
В проекте angular установите пакет npm install --save @ngx-matomo/tracker, затем npm install --save @ngx-matomo/router и затем импортируйте модули NgxMatomoTrackerModule и NgxMatomoRouterModule в ваш app.module, чтобы он выглядел следующим образом
import { NgModule } from '@angular/core';
import { NgxMatomoTrackerModule } from '@ngx-matomo/tracker';
import { NgxMatomoRouterModule } from '@ngx-matomo/router';
@NgModule({
imports: [
// ...
NgxMatomoTrackerModule.forRoot({
siteId: 'YOUR_MATOMO_SITE_ID', // your Matomo's site ID (find it in your Matomo's settings)
trackerUrl: 'http://localhost:8080/', // your matomo server root url
}),
NgxMatomoRouterModule,
],
// ...
})
export class AppModule {}
Мы уже закончили?
О, да, закончили! Приведенная выше конфигурация является минимальной, поэтому у вас будет отчет для каждой навигации по маршрутизации. Попробуйте выполнить навигацию назад и вперед в вашем angular приложении, а затем проверьте приборную панель Matomo, вы должны увидеть появление некоторых данных.
Для меня это было очень увлекательное и познавательное занятие, и я надеюсь, что помог вам настроить свой станок.
Как всегда, пожалуйста, не стесняйтесь советовать, делиться идеями и комментировать! До скорой встречи!
Отдельное спасибо Ашкану Форузани, Тиму Гоуву и Рикардо Роча за фотографии.