Matomo (ранее известная как Piwik) – это платформа веб-аналитики с открытым исходным кодом, которая предоставляет ценную информацию о том, как пользователи взаимодействуют с вашим веб-сайтом. Интеграция Matomo с вашим одностраничным приложением (SPA) позволяет отслеживать поведение пользователей и собирать данные для анализа. В этой статье мы рассмотрим несколько методов интеграции Matomo с вашим SPA, сопровождая их примерами кода.

Метод 1: отслеживание вручную через JavaScript API

1. Включить код отслеживания Matomo JavaScript:

   <script type="text/javascript">
   var _paq = window._paq || [];
   _paq.push(['trackPageView']);
   _paq.push(['enableLinkTracking']);
   (function() {
   var u="//your-matomo-url.com/";
   _paq.push(['setTrackerUrl', u+'matomo.php']);
   _paq.push(['setSiteId', 'YOUR_SITE_ID']);
   var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
   g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
   })();
   </script>

2. Отслеживать маршруты SPA:

   // Call this function when the SPA route changes
   function trackPageView(url) {
   _paq.push(['setReferrerUrl', url]);
   _paq.push(['setCustomUrl', url]);
   _paq.push(['trackPageView']);
   }

3. Вызов функции trackPageViewпри изменении маршрута:

   // Example using React Router
   import { useEffect } from 'react';
   import { useLocation } from 'react-router-dom';
   const App = () => {
   const location = useLocation();
   useEffect(() => {
   trackPageView(location.pathname);
   }, [location]);
   // ...
   }

Метод 2. Использование диспетчера тегов Matomo

1. Настройте диспетчер тегов Matomo:

   • Создайте контейнер Matomo Tag Manager на своем сервере Matomo.
   • Настройте контейнер для отслеживания маршрутов SPA.

2. Включите JavaScript-код Matomo Tag Manager в свой SPA:

   <script src="//your-matomo-url.com/matomo.js" async></script>
   <script>
   var _mtm = window._mtm = window._mtm || [];
   _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
   var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
   g.type='text/javascript'; g.async=true; g.defer=true; g.src='//your-matomo-url.com/container_XXXXXX.js'; s.parentNode.insertBefore(g,s);
   </script>

Метод 3: используйте плагин или библиотеку Matomo

1. Проверьте, доступен ли плагин или библиотека Matomo для вашей инфраструктуры SPA (например, React, Angular, Vue.js).
2. Следуйте инструкциям по установке и настройке, предоставленным плагином или библиотекой.

Интеграция Matomo с вашим SPA имеет решающее значение для понимания поведения пользователей и оптимизации вашего веб-сайта. В этой статье мы рассмотрели три различных метода: отслеживание вручную через API JavaScript, использование диспетчера тегов Matomo и использование плагинов или библиотек Matomo, специфичных для вашей платформы SPA. Выберите метод, который лучше всего соответствует вашим потребностям, и начните собирать ценные аналитические данные для своего одностраничного приложения.