Как добавить код отслеживания Matomo в одностраничные приложения VueJS? - PullRequest
Новая
       7

Как добавить код отслеживания Matomo в одностраничные приложения VueJS?

0 голосов
/ 11 декабря 2018

Я хотел подтвердить, правильно ли я установил настройки отслеживания аналитики в своем одностраничном приложении в рамках VueJS.

Я использую плагин Vue для Matomo, который находится здесь: https://github.com/AmazingDreams/vue-matomo

Я импортировал плагин VueMatomo в свой файл ввода main.js следующим образом: 

import VueMatomo from 'vue-matomo';

Затем я назначил VueMatomo в качестве глобального метода в моем файле main.js следующим образом: 

Vue.use(VueMatomo, {
   // Configure your matomo server and site
      host: 'https://matomo.example.com', <-- i configured this to match my real site
      siteId: 5, <--- i configured this to match my real site

  // Enables automatically registering pageviews on the router
      router: router,

  // Enables link tracking on regular links. Note that this won't
  // work for routing links (ie. internal Vue router links)
  // Default: true
      enableLinkTracking: true,

  // Require consent before sending tracking information to matomo
  // Default: false
      requireConsent: false,

  // Whether to track the initial page view
  // Default: true
      trackInitialView: true,

  // Changes the default .js and .php endpoint's filename
  // Default: 'piwik'
      trackerFileName: 'piwik',

  // Whether or not to log debug information
  // Default: false
      debug: false
});

Это дает мне доступ к API Matomo (_paq) в моих компонентах.Однако это то, где я запутался.

Например, у меня есть представление под названием overview.vue, которое является главной страницей сайта.В этом шаблоне Vue у меня есть следующий код в моем created() хуке.Поскольку я использую SPA, мне нужно каким-то образом получить имя страницы, на которой находится пользователь, и передать ее в инструмент отчетности Matomo.Вот что я сделал: 

<template>...snip...</template>

<script>
export default {
  name: 'OverView',
  created: function() {
        window._paq.push(['setCustomUrl', '/' + window.location.hash.substr(1)]);
        window._paq.push(['setDocumentTitle', 'Overview Page']);
        window._paq.push(['trackPageView']);
  }
};
</script>

Достаточно ли вышеизложенного или есть лучший крюк для жизненного цикла (установлен?) Для кода отслеживания?Возможно, навигационные охранники более уместны?

Спасибо

1 Ответ

0 голосов
/ 12 июня 2019

Я заставил matomo работать над моим приложением vue.js (v 2.6.10).

Я использую пробную учетную запись из https://matomo.org/

В моем файле main.js:

// Analytics
import VueMatomo from "vue-matomo";

Vue.use(VueMatomo, {
  host: "https://example.matomo.cloud", // switch this to your account
  siteId: 1,                            // switch this as well you can find the site id after adding the website to the dashboard. 

  router: router,

  enableLinkTracking: true,

  requireConsent: false,

  trackInitialView: true,

  trackerFileName: "piwik",

  debug: true
});

Я могу подтвердить, что все мои вложенные маршруты отслежены.Я могу видеть, какие страницы я просматривал на моей панели инструментов matomo.

Чтобы настроить настраиваемые события, просто добавьте следующее: this.$matomo.trackEvent("Event Category", "Event Name", "event action");

Чтобы придать этому некоторый контекст, для моего приложения, которое я используюэто в вычисляемом свойстве: 

  computed: {
    selectedMapDataType: {
      get() {
        return this.$store.state.mapDataType;
      },
      set(selected) {
        this.$matomo.trackEvent("Dashboard Update", "Dashboard Data", selected);
        this.$store.dispatch("updateMapDataType", selected);
      }
    },
...}
...