Vue Plugin For Matomo
时间:2021-08-20
本文章向大家介绍Vue Plugin For Matomo,主要包括Vue Plugin For Matomo使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
By default, Matomo uses a JavaScript Tracker code to track users who visit a website with their browser. But using JavaScript is not the only option and Matomo also offers several alternatives. For example you can use Matomo to get Mobile Apps Analytics for iOS and Android based apps. And you can also implement tracking of your users and interactions in your Apps, or APIs, or servers backends using one of the Server-Side tracking libraries. The Matomo team offers SDKs for Apps and Server-Side Analytics in the following languages:
- PHP
- Java
- C#
And there are community contributed SDKs in many more languages:
- C++
- Node.js
- JavaScript Frameworks (AngularJS, Vue.js, React, React native…)
- and more: see the list of Matomo integrations
And if for some reason you can’t implement server-side tracking, but you have access to the web server access logs, you can use the Log Analytics tool to import your server-side logs in Matomo! Learn more in Server Logs Analytics and How do I use Log Analytics to import my logs?
Note to developers: if you use any of these SDKs, it is greatly appreciated if you can consider reporting bugs, feature requests, and even open pull requests to help improve these SDKs, in the relevant Github issue tracker. Most of these SDKs are built by developers like you from the Matomo community, and we rely on your support to keep the SDKs up to date. The PHP SDK is always the most up to date one and the one that you can refer to when implementing a new SDK, since Matomo itself uses the PHP SDK for server-side tracking.
VueMatomo
This plugin allows you to easily track an Vue application by automatically tracking page views with the router and gives easy access to the Matomo tracking API.
Link your Piwik/Matomo installation. Compatible with vue 2.x and 3.x.
Installation
npm install --save vue-matomo
Browser
<!-- Include after Vue --> <!-- Local files --> <script src="vue-matomo/dist/vue-matomo.js"></script> <!-- From CDN --> <script src="https://unpkg.com/vue-matomo"></script>
Usage
Bundler (Webpack, Rollup)
import Vue from 'vue' import VueMatomo from 'vue-matomo' Vue.use(VueMatomo, { // Configure your matomo server and site by providing host: 'https://matomo.example.com', siteId: 5, // Changes the default .js and .php endpoint's filename // Default: 'matomo' trackerFileName: 'matomo', // Overrides the autogenerated tracker endpoint entirely // Default: undefined // trackerUrl: 'https://example.com/whatever/endpoint/you/have', // Overrides the autogenerated tracker script path entirely // Default: undefined // trackerScriptUrl: 'https://example.com/whatever/script/path/you/have', // 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, // Run Matomo without cookies // Default: false disableCookies: false, // Require consent before creating matomo session cookie // Default: false requireCookieConsent: false, // Enable the heartbeat timer (https://developer.matomo.org/guides/tracking-javascript-guide#accurately-measure-the-time-spent-on-each-page) // Default: false enableHeartBeatTimer: false, // Set the heartbeat timer interval // Default: 15 heartBeatTimerInterval: 15, // Whether or not to log debug information // Default: false debug: false, // UserID passed to Matomo (see https://developer.matomo.org/guides/tracking-javascript-guide#user-id) // Default: undefined userId: undefined, // Share the tracking cookie across subdomains (see https://developer.matomo.org/guides/tracking-javascript-guide#measuring-domains-andor-sub-domains) // Default: undefined, example '*.example.com' cookieDomain: undefined, // Tell Matomo the website domain so that clicks on these domains are not tracked as 'Outlinks' // Default: undefined, example: '*.example.com' domains: undefined, // A list of pre-initialization actions that run before matomo is loaded // Default: [] // Example: [ // ['API_method_name', parameter_list], // ['setCustomVariable','1','VisitorType','Member'], // ['appendToTrackingUrl', 'new_visit=1'], // etc. // ] preInitActions: [], // A function to determine whether to track an interaction as a site search // instead of as a page view. If not a function, all interactions will be // tracked as page views. Receives the new route as an argument, and // returns either an object of keyword, category (optional) and resultsCount // (optional) to track as a site search, or a falsey value to track as a page // view. // Default: false, i.e. track all interactions as page views // Example: (to) => { // if (to.query.q && to.name === 'search') { // return { keyword: to.query.q, category: to.params.category } // } else { // return null // } // } trackSiteSearch: false }); // Now you can access piwik api in components through this.$matomo // or window._paq.push // or through window.Piwik.getTracker
For available operations see the matomo api docs
Note on async loading
This plugin loads the matomo.js asynchronously, which means it is possible that $matomo is not (yet) loaded. Furthermore anti-tracking plugins on browsers might block matomo.js entirely. You should always guard your calls to $matomo, or use window._paq.push:
this.$matomo && this.$matomo.trackPageView() // Or... window._paq.push(['trackPageView'])
Note on external link tracking
When using the option to trackExternalLinks, vue-matomo ensures the corresponding Matomo method is called after each navigation event. Matomo scans the entire DOM for external links and adds its link handling. This means that if your external links are rendered dynamically these links may not be picked up. You need to call this method manually if links might not exist after the page has finished rendering (for example if the links come from some REST call). For more information refer to https://developer.matomo.org/guides/spa-tracking#link-tracking
this.$matomo && this.$matomo.enableLinkTracking() // Or... window._paq.push(['enableLinkTracking'])
Nuxt
Nuxt can work by creating a plugin that will load VueMatomo with SSR disabled. Note how the router is passed in the second snippet:
// nuxt.config.js export default { plugins: [ { src: '~/plugins/vue-matomo.js', ssr: false } ] } // plugins/vue-matomo.js import Vue from 'vue' import VueMatomo from 'vue-matomo' export default ({ app }) => { Vue.use(VueMatomo, { router: app.router /** Other configuration options **/ }) }
Ignoring routes
It is possible to ignore routes using the route meta:
{ path: '/page-2', name: 'Page2', component: Page2, meta: { analyticsIgnore: true } }
Managing tracking consent
First of all load the plugin with the requireConsent option enabled:
Vue.use(VueMatomo, { // ... requireConsent: true })
Matomo has a built in way to give and remember consent. The simplest way is to simply use this method provided by Matomo:
<button @click="handleConsent()">Accept Tracking</button> handleConsent() { this.$matomo.rememberConsentGiven() }
Another option is to use your own implementation for remembering consent. In that case you can simply call this.$matomo.setConsentGiven() on each page load when you establish that the user has given consent.
Managing cookie consent
You can use Matomo Analytics without consent and cookie banner. For more information see matomo faq: "How do I use matomo analytics without consent or cookie banner?.
First of all load the plugin with the requireCookieConsent option enabled:
Vue.use(VueMatomo, { // ... requireCookieConsent: true })
Matomo has a built in way to give and remember consent. The simplest way is to simply use this method provided by Matomo:
<button @click="handleConsent()">Accept Cookies</button> handleConsent() { this.$matomo.rememberCookieConsentGiven() }
Another option is to use your own implementation for remembering cookie consent. In that case you can simply call this.$matomo.setCookieConsentGiven() on each page load when you establish that the user has given cookie consent.
Build
Bundle the js and css of to the dist folder:
npm run build
License
原文地址:https://www.cnblogs.com/gkmeteor/p/15164937.html
- 【C】用C语言提取bmp图片像素,并进行K-means聚类分析——容易遇到的问题
- SEED缓冲区溢出实验笔记
- HTTP严格安全传输(HTTP Strict Transport Security, HSTS)chromuim实现源码分析(一)
- Linux下ls命令显示符号链接权限为777的探索
- Django form表单
- Django ORM那些相关操作
- 使用mitmproxy嗅探双向认证ssl链接——嗅探AWS IoT SDK的mqtts
- Django中ORM介绍和字段及其参数
- 几个实现分页的方法
- 如何识别IDA反汇编中动态链接库中的函数
- Kali Linux安装TL-WN821N USB无线网卡驱动(make失败)
- Cookie、Session登陆验证相关介绍和用法
- 题型分析
- .NET CORE 框架ABP的代码生成器(ABP Code Power Tools )使用说明文档
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 实现ListView的点击变色的实例
- Android播放音乐案例分享
- linux crm部署代码详解
- Android自定义WaveProgressView实现水波纹加载需求
- CentOS8下的root密码快速修改方法
- Android开发之自定义刮刮卡实现代码
- Android ScrollView无法填充满屏幕的解决办法
- Android 监听屏幕是否锁屏的实例代码
- Android实现水波纹控件的方法
- Android中GridView布局实现整体居中方法示例
- Android SharedPreferences四种操作模式使用详解
- Ubuntu18.04下将 磁盘挂载在某目录下
- Android编程之绘图canvas基本用法示例
- Android 编译出错版本匹配问题解决办法
- Linux(CentOS7)使用 RPM 安装 mysql 8.0.11的教程