Рубрики
Без рубрики

Отслеживание посетителей в Vue.js: Матомо делает возможным 📈

Первоначально опубликовано на WebDeasy.de! Матомо позволяет нам выполнять анализ и отслеживание в соответствии с конфиденциальностью … Теги от Vue, JavaScript, учебник.

Первоначально опубликовано webdeasy.de !

Матомо позволяет нам выполнять анализ и отслеживание в защите конфиденциальности. Матомо также легко интегрировать в Vue.js. Я покажу тебе, как это работает!

Мы можем собирать данные о посетителей на наших сайтах Vue.js, то есть треки и проанализировать их поведение. В Matomo мы уделяем особое внимание конфиденциальности и защите данных посетителей, но у нас все еще есть много способов проанализировать соответствующие данные.

Отслеживание без файлов cookie Также возможно с Matomo. Это одна из причин, почему я использую MatoMo в приложениях Vue.js, а также на этом сайте. Кроме того, на месте Matomo – бесплатно .

Соответствующие процедуры отказа и отказа, конечно, также предоставляются.

Внимание: у меня сейчас есть Моя собственная рассылка . Время от времени есть информация о новых руководствах и фрагментах кода. 📬🙂.

1.1 Скачать матомо

Сначала вы должны Скачать матомо Здесь и расстегните целевой каталог или непосредственно в ваше веб-пространство.

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

2.1 Выберите URL MatoMo URL

Вы можете разместить матомо либо в дополнительном каталоге, поддомен или в совершенно другой домене. Также обратите внимание, что вы можете создавать несколько страниц в одной установке MATOMO.

Поэтому, если вы планируете использовать MatoMo на нескольких сайтах, может иметь смысл установить матомо на нейтральный домен и ввести все сайты там в комплекте.

Это предлагает вам преимущество, которое вы можете сравнить несколько страниц друг с другом. Вот несколько идей на случай, если вам нужно вдохновение:

Я проводлю свое тестовое приложение для этого урока локально и выбрал следующий каталог: http://localhost: 81/vue-matoomo-test/matomo .

Кроме того, вы можете защитить сайт Матомо с .htaccess и .htpasswd обеспечить еще больше безопасности.

2.3 Создать базу данных MySQL

На следующем шаге вам необходимо создать базу данных MySQL на вашем хостере или на месте. Если вы хотите создать локальную базу данных, я могу порекомендовать программу Xampp Отказ

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

2.4 Продолжайте через мастер установки

После того, как вы выбрали свой URL, поместите загруженные файлы внутри и создали базу данных, вы можете просто посетить страницу. Это то, что вы увидите там:

Здесь вы теперь можете пройти через восемь шагов и ввести необходимые данные. Все шаги являются самоочередными и не должны быть проблемой.

Когда вы достигаете конца, появляется этот вид. Если вы запускаете свой сайт Vue.js в ЕС, вы должны проверить флажок «Anonymize последних байтов для посетителей IP-адресов, чтобы соответствовать вашим Локальные законы о конфиденциальности/Руководящие принципы .

Тем не менее, снова намек, который вы должны проконсультироваться с вашим сотрудником по защите данных для юридических вопросов, я не могу и не давать никаких информации или рекомендаций!

Установка сейчас завершена. Теперь вы можете открыть Матомо в первый раз.

Нам нужна информация, помеченная красным, снова в шаге 4.1 – поэтому, пожалуйста, напишите это.

Кроме матомо вы также можете Интеграция Google Analytics в Vue.js собирать еще больше данных.

Теперь мы приходим к части Vue.js, конечно, мы должны сначала создать приложение Vue.js, если еще не сделано. Мы можем сделать это легко с Vue CLI.

Если вы просто начинаете и хотите узнать Vue.js, у меня есть Примеры того, как узнать Vue.js здесь.

vue create vue-matomo-test

Ваше приложение или страница Vue.js всегда следует включать Vue-маршрутизатор. Matomo может использовать его для отслеживания данных позже.

Рекомендуется создать собственную предустановку для создания Vue Apps быстрее. В моем примере я создал «LH-стандарт». Вы можете увидеть включенные модули на картинке.

Чтобы интегрировать матомо в наше приложение Vue.js, мы используем пакет Vue-MatoMo . Вы устанавливаете его со следующей командой:

npm install vue-matomo

4.1 Интеграция Vue Matomo

Наше main.js должен выглядеть так:

// src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueMatomo from 'vue-matomo';
Vue.config.productionTip = false;
Vue.use(VueMatomo, {
  host: "https://your-local-matomo-url.com/",
  siteId: 1,
  trackerFileName: 'matomo',
  router: router,
  enableLinkTracking: true,
  requireConsent: false,
  trackInitialView: true,
  disableCookies: false,
  enableHeartBeatTimer: false,
  heartBeatTimerInterval: 15,
  debug: false,
  userId: undefined,
  cookieDomain: undefined,
  domains: undefined,
  preInitActions: []
});
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

В строках 13 и 14 приходят данные из вашей установки MatoMo с шага 2.4.

4.2 Настройка параметров

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

Дополнительные описания и примеры параметров можно найти непосредственно на Официальная страница NPMJS Отказ

4.3 Тестирование

Теперь вы можете начать приложение Vue.js и посмотреть в Matomo, какие данные отслеживаются.

5.1 Игнорируйте маршруты

Если вы не хотите отслеживать определенные просмотры страниц, вы можете установить это непосредственно в соответствующем Vue маршруте.

// src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    meta: {
      analyticsIgnore: true
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});
export default router;

Я добавил три обозначенные линии от Мета: на маршрутизатор по умолчанию. Это означает, что каждый вызов на страницу/ance больше не отслеживается.

5.2 Отслеживание В

Матомо предлагает возможность активировать отслеживание для отслеживания. Это означает, что пользователь должен сначала Активно согласен что его визит может быть отслежен.

Для этого мы установили параметр Потребительна В нашем main.js к правда Отказ Таким образом, посетитель больше не отслеживается.

Теперь вы можете создать подсказку, например, когда вы посещаете эту страницу, где пользователь должен согласиться до его визита через кнопку. Это может быть реализовано в качестве примера:



Эта функция должна выполняться один раз с помощью пользователя. Таким образом, звонки на подпункты отслеживаются после одобрения. Важный звонок метода Это. $ matoomo.rememberConcentgiven (); Отказ Вы можете найти больше информации об этом Прямо в Matomo.org Отказ

Таким образом, у вас есть вся информация, необходимая для успешного отслеживания с Vue.js и MatoMo! Если у вас есть какие-либо вопросы, вы найдете поле комментариев ниже. 🙂

Если вы заинтересованы в большем количестве учебников, фрагментов кода и многое другое, следуйте за мной на Twitter на кассе мой блог .

Оригинал: “https://dev.to/webdeasy/how-to-integrate-matomo-into-your-vue-js-application-3oho”