基于matomo实现业务数据埋点采集上报

佛陀的眼泪

matomo是一款Google-analytics数据埋点采集上报的平替方案，可保护您的数据和客户的隐私；正如它官网的slogan: Google Analytics alternative that protects your data and your customers' privacy; 该项目源码开源免费，支持私有化部署，保证数据安全、可靠；支持多种方式集成，不管你的应用是传统的html多页面应用还是现代的SPA单页面应用，不管你的应用是CSR渲染还是SSR渲染，均可支持；

SDK统计代码

1. [/code]
2. [list]
3. [*][b]常用Api：[/b]
4. [*][b]setCustomUrl(string)：[/b]
5. Override the page's reported URL，覆盖页面报告的 URL；给matomo上报业务系统的地址路径、路由信息等
6. [*][b]trackPageView([customTitle])：[/b]
7. Log a page view. 记录页面视图信息并上报页面标题
8. [*][b]setUserId(userId)：[/b]
9. Sets a User ID to this user (such as an email address or a username). 设置该用户的用户 ID（例如电子邮件地址或用户名）
10. [*][b]resetUserId：[/b]
11. Clears (un-set) the User ID. 清除（取消设置）用户 ID
12. [*][b]trackEvent（category，action，[name],[value]）:[/b]
13. Log an event with an event category (Videos, Music, Games...), an event action (Play, Pause, Duration, Add Playlist, Downloaded, Clicked...), and an optional event name and optional numeric value  记录事件，其中包含事件类别（视频、音乐、游戏...）、事件操作（播放、暂停、持续时间、添加播放列表、下载、单击...）以及可选事件名称和可选数值；此api将作为行为埋点，例记录按钮点击次数上报等场景使用
14. [/list][b]接入方式[/b]
15. [indent] 
16. [b]matomo支持多种方式接入，不管你的应用是传统的html多页面应用，还是现代的vue、react等单页面应用；[/b]
17.  
18. [/indent][b]传统的html多页面应用接入：[/b]
19. [list]
20. [*][b]使用[/b]
21. [*][b]引入SDK[/b]
22. [/list][code]

复制代码

　　引入SDK即可自动采集部分数据，如有特殊需求需要记录页面信息及标题，在对应的地方调用window._paq.push方法去传递参数即可；api跟其他方式保持一致;

• 现代的单页面应用接入：
  
• Hooks 封装
  

1. /** src/plugins/matomo.ts */
2. export default function useMatomo() {
3.   /** 页面地址信息上报 */
4.   const setCustomUrl = (url: string) => {
5.     ;(window as any)._paq.push(['setCustomUrl', `${url}`])
6.   }
8.   /** 页面标题信息上报 */
9.   const trackPageView = (title: string | any) => {
10.     ;(window as any)._paq.push(['trackPageView', `${title}`])
11.   }
13.   /** 用户信息userId上报 */
14.   const setUserId = (userId: string | number | boolean) => {
15.     ;(window as any)._paq.push(['setUserId', `${userId}`])
16.     ;(window as any)._paq.push(['trackPageView'])
17.   }
19.   /** 重置userId，这里多次调用trackAllContentImpressions是为了在退出登录的时候重置调userId，并在下一次登录时重新生成一条最新的记录 */
20.   const resetUserId = () => {
21.     // UserID passed to Matomo (see https://developer.matomo.org/guides/tracking-javascript-guide#user-id)
22.     ;(window as any)._paq.push(['resetUserId'])
23.     ;(window as any)._paq.push(['trackAllContentImpressions', 'new_visit=1'])
24.     ;(window as any)._paq.push(['trackPageView'])
25.     ;(window as any)._paq.push(['trackAllContentImpressions'])
26.   }
28.   /**
29.    * 行为埋点
30.    * $matomo.trackEvent('行为类别', '事件', 'name', 'value')
31.    * behaviorCategory  行为类别
32.    * event 事件
33.    * name 事件名称
34.    * value 事件值
35.    */
36.   const trackEvent = (behaviorCategory: string, event: string, name: string, value?: string | number) => {
37.     ;(window as any)._paq.push(['trackEvent', `${behaviorCategory}`, `${event}`, `${name}`])
38.   }
40.   return {
41.     setCustomUrl,
42.     trackPageView,
43.     setUserId,
44.     resetUserId,
45.     trackEvent
46.   }
47. }

复制代码

2. <template>
3.   <ConfigProvider :locale="zhCN">
4.     <router-view />
5.   </ConfigProvider>
6. </template>

复制代码

1. [/code][b]vue-matomo npm包方式引入：[/b]
2. [list]
3. [*][b]vue2[/b]
4. [/list][code]/** 官方提供了vue-matomo这个库，仅适用于vue2，vue3方式接入会有问题 */
5. npm install --save vue-matomo

复制代码

1. /** main.js */   
2. import Vue from 'vue'
3. import VueMatomo from 'vue-matomo'
5. Vue.use(VueMatomo, {
6.   // 请求对应服务域名，如果是私有化部署，可以填写自己内网的私有域名，如果是公网部署填写https://matomo.example.com即可
7.   host: 'https://matomo.example.com',
8.   /** 新建项目的script文件中会存在siteId这个变量，这个是跟项目绑定的唯一标识，通过该变量索引查找到对应项目 */
9.   siteId: 5,
10. // 最终的追踪js文件名  默认 'piwik'
11.   trackerFileName: 'matomo',
12.   siteId: 9,
13.   router: router,
14.   // 支持外部链接跟踪
15.   enableLinkTracking: true,
16.   // 是否需要在发送追踪信息之前请求许可 默认false
17.   requireConsent: false,
18.   // 是否追踪初始页面 默认true
19.   trackInitialView: true,
20.   debug: false
21. });
23. // 挂载到vue的实例中之后，我们可以使用this.$matomo or window._paq.push or window.Piwik.getTracker 等三种方式来访问均可，此处使用this来访问

复制代码

 其实就是在业务代码中做侵入式埋点了，在对应的业务逻辑中使用  this.$matomo && this.$matomo.trackPageView() 或 window._paq.push(['trackPageView']) 等api来进行注入埋点采集数据并上报，两者功能效果相同，区别仅仅只是调用方式不同，挂载到实例中直接以funtion函数的方式调用传参，window全局变量调用通过 push方法来调用，push方法接收一个数组，数组第一项为key，后续剩余参数为name;

• vue3
  

 　　vue3由于使用Composition API，且生命周期机制跟vue2不同，同时matomo又是异步加载资源，所以在main.ts文件中即使挂载了对应的实例，通过getCurrentInstance()?.appContext.config.globalProperties.$matomo 来访问matomo对应实例，无法保证能准确的获取，即使你通过nextTick；因为加载matomo资源不是响应式的，若在页面渲染完成时，matomo资源文件未加载完成，此时获取到的matomo实例仍然为undefined；至于matomo的实例只在页面渲染的那一刻就决定你单次加载是否包含matomo实例
 
参考github issues：
   github vue-matomo issue

解决方案：

 
　　通过window._pag.push 来访问全局变量，因为即使你获取到的this.$matomo实例是undefined，window._paq.push也可以保证它是可用的；

• react
  

    　　社区没有提供react-matomo之类的npm包/工具来给开发者使用，可以参考Hooks方案，将使用到的Api封装成Hooks，通过window._paq.push的方式在需要的地方来调用；
　　　由于是私有化部署，关于公司logo及业务数据等相关较敏感的数据均已打码，只展示具体收集指标和效果;
　　　数据采集上报最终效果图：
 

+

 

 

 

 

出处：https://www.cnblogs.com/dengyao-blogs/本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。
来源:https://www.cnblogs.com/dengyao-blogs/p/17764271.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！