基於matomo實現業務數據埋點採集上報

来源:https://www.cnblogs.com/dengyao-blogs/archive/2023/10/14/17764271.html
-Advertisement-
Play Games

matomo是一款Google-analytics數據埋點採集上報的平替方案，可保護您的數據和客戶的隱私；正如它官網的slogan: Google Analytics alternative that protects your data and your customers' privacy; 該 ...


matomo是一款Google-analytics數據埋點採集上報的平替方案，可保護您的數據和客戶的隱私；正如它官網的slogan: Google Analytics alternative that protects your data and your customers' privacy; 該項目源碼開源免費，支持私有化部署，保證數據安全、可靠；支持多種方式集成，不管你的應用是傳統的html多頁面應用還是現代的SPA單頁面應用，不管你的應用是CSR渲染還是SSR渲染，均可支持；

SDK統計代碼

<!-- Matomo -->
<!-- 聯繫管理員新建項目後自動生成,放入到項目根目錄index.html header標簽下，並配置相應的追蹤功能變數名稱地址，即刻生效 -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']); // 記錄頁面視圖
  _paq.push(['enableLinkTracking']); // 在所有適用的鏈接元素上安裝鏈接跟蹤
  (function () {
    var u = "https://test-matobo.jnt-express.com.cn/"; // matomo私有伺服器地址
    _paq.push(['setTrackerUrl', u + 'matomo.php']); // 指定 Matomo 伺服器 URL
    _paq.push(['setSiteId', '9']); // 設置追蹤的站點唯一編碼(指定網站 ID) 該id將作為唯一標識來區分matomo正在採集數據的應用
    var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
    g.async=true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); // async 屬性指定該腳本SDK將會在載入完畢後執行
  })();
</script>
<!-- End Matomo Code -->

  • 常用Api：

  • setCustomUrl(string)：

    Override the page's reported URL，覆蓋頁面報告的 URL；給matomo上報業務系統的地址路徑、路由信息等

  • trackPageView([customTitle])：

    Log a page view. 記錄頁面視圖信息並上報頁面標題

  • setUserId(userId)：

    Sets a User ID to this user (such as an email address or a username). 設置該用戶的用戶 ID（例如電子郵件地址或用戶名）

  • resetUserId：

    Clears (un-set) the User ID. 清除（取消設置）用戶 ID

  • trackEvent（category，action，[name],[value]）:

    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將作為行為埋點，例記錄按鈕點擊次數上報等場景使用

接入方式

 

matomo支持多種方式接入，不管你的應用是傳統的html多頁面應用，還是現代的vue、react等單頁面應用；

 

傳統的html多頁面應用接入：

  • 使用

  • 引入SDK

<!-- 將統計代碼放入到項目根目錄下的index.html的header標簽下，註意，該script是新建項目時自動生成的追蹤代碼-->
<!-- Matomo -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="https://test-matobo.jnt-express.com.cn/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '10']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Matomo Code -->

　　引入SDK即可自動採集部分數據，如有特殊需求需要記錄頁面信息及標題，在對應的地方調用window._paq.push方法去傳遞參數即可；api跟其他方式保持一致;

  • 現代的單頁面應用接入：

  • Hooks 封裝

/** src/plugins/matomo.ts */ 
export default function useMatomo() {
  /** 頁面地址信息上報 */
  const setCustomUrl = (url: string) => {
    ;(window as any)._paq.push(['setCustomUrl', `${url}`])
  }

  /** 頁面標題信息上報 */
  const trackPageView = (title: string | any) => {
    ;(window as any)._paq.push(['trackPageView', `${title}`])
  }

  /** 用戶信息userId上報 */
  const setUserId = (userId: string | number | boolean) => {
    ;(window as any)._paq.push(['setUserId', `${userId}`])
    ;(window as any)._paq.push(['trackPageView'])
  }

  /** 重置userId，這裡多次調用trackAllContentImpressions是為了在退出登錄的時候重置調userId，併在下一次登錄時重新生成一條最新的記錄 */
  const resetUserId = () => {
    // UserID passed to Matomo (see https://developer.matomo.org/guides/tracking-javascript-guide#user-id)
    ;(window as any)._paq.push(['resetUserId'])
    ;(window as any)._paq.push(['trackAllContentImpressions', 'new_visit=1'])
    ;(window as any)._paq.push(['trackPageView'])
    ;(window as any)._paq.push(['trackAllContentImpressions'])
  }

  /**
   * 行為埋點
   * $matomo.trackEvent('行為類別', '事件', 'name', 'value')
   * behaviorCategory  行為類別
   * event 事件
   * name 事件名稱
   * value 事件值
   */
  const trackEvent = (behaviorCategory: string, event: string, name: string, value?: string | number) => {
    ;(window as any)._paq.push(['trackEvent', `${behaviorCategory}`, `${event}`, `${name}`])
  }

  return {
    setCustomUrl,
    trackPageView,
    setUserId,
    resetUserId,
    trackEvent
  }
}
<!-- App.vue --> 
<template>
  <ConfigProvider :locale="zhCN">
    <router-view />
  </ConfigProvider>
</template>
<script lang="ts" setup>
  import { onMounted, watch } from 'vue'
  import { ConfigProvider } from 'ant-design-vue'
  import { useRouter } from 'vue-router'
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import useMatomo from '@/plugins/matomo'
  import { useAuthStore } from '@/store/auth'

  const router = useRouter()
  const authStore = useAuthStore()
  const matomo = useMatomo()
  /** 
    在App.vue中記錄每個路由切換的路徑及頁面標題信息；
    sertUserId一般在登錄完成之後調用，這裡在App.vue中調用是為瞭解決token存在，spa應用直接進目標頁面而跳過登錄頁無法觸發setUserId上報的問題
  */
  watch(
    () => router.currentRoute.value,
    (newValue: any) => {
    // 這裡延遲是因為matomo sdk載入是非同步非阻塞載入，所以為了能正確的獲取到window上matomo的實例，我們這裡會有略微延遲
      setTimeout(() => {
        /**
         * 記錄跳轉頁面及頁面標題  userCode及nickName均為業務系統數據，此處做拼接傳入
         **/
        const name =
          authStore.userInfo?.userCode !== undefined
            ? `${authStore.userInfo?.userCode} | ${authStore.userInfo?.nickName}`
            : ''
        matomo.setUserId(name)
        matomo.setCustomUrl(window.location.href)
        matomo.trackPageView(router.currentRoute.value.meta.title)
      }, 500)
    }
  )
<!--src/login/index.vue -->
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue'
  import useMatomo from '@/plugins/matomo'
  const matomo = useMatomo()

  const jumpPage = (data: any) => {
    /** 登錄成功後在跳轉之前將業務數據userCode和nickName上報 */
    const { userCode, nickName, menuTree } = data
    const name = `${userCode} | ${nickName}` || ''
    matomo.setUserId(name)
  }
</script>
<!--具體的頁面具體的方法中去觸發trackEvent-->
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue'
  import useMatomo from '@/plugins/matomo'
  const matomo = useMatomo()

  const exportBtn = () => {
    /** 例如需要記錄導出按鈕的點擊次數，在導出按鈕中trackEvent即可 */    
    matomo.trackEvent('品牌監控報表', '導出', 'export')
</script>

vue-matomo npm包方式引入：

  • vue2

/** 官方提供了vue-matomo這個庫，僅適用於vue2，vue3方式接入會有問題 */
npm install --save vue-matomo
/** main.js */    
import Vue from 'vue'
import VueMatomo from 'vue-matomo'

Vue.use(VueMatomo, {
  // 請求對應服務功能變數名稱，如果是私有化部署，可以填寫自己內網的私有功能變數名稱，如果是公網部署填寫https://matomo.example.com即可
  host: 'https://matomo.example.com',
  /** 新建項目的script文件中會存在siteId這個變數，這個是跟項目綁定的唯一標識，通過該變數索引查找到對應項目 */
  siteId: 5,
// 最終的追蹤js文件名  預設 'piwik'
  trackerFileName: 'matomo',
  siteId: 9,
  router: router,
  // 支持外部鏈接跟蹤
  enableLinkTracking: true,
  // 是否需要在發送追蹤信息之前請求許可 預設false
  requireConsent: false,
  // 是否追蹤初始頁面 預設true
  trackInitialView: true,
  debug: false
});

// 掛載到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/ 本文版權歸作者和博客園共有，歡迎轉載，但必須給出原文鏈接，並保留此段聲明，否則保留追究法律責任的權利。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 基於ZXing.NET實現的二維碼生成和識別客戶端
    一、前言 ZXing.Net的一個可移植軟體包，是一個開源的、多格式的1D/2D條形碼圖像處理庫，最初是用Java實現的。已經過大量優化和改進，它已經被手動移植。它與.Net 2.0、.Net 3.5、.Net 4.x、.Net 5.x、.Net 6.x、.Net 7.x、Windows RT類庫和 ...
  • 使用try-convert將.NET Framework項目遷移到.NET Core
    工具地址：GitHub - dotnet/try-convert：幫助 .NET 開發人員將他們的項目移植到 .NET Core！ 這是一個簡單的工具，有助於將.NET Framework項目遷移到.NET Core。 如何使用它 在此處將其作為全局工具安裝： dotnet tool install ...
  • Window10安裝linux子系統及子系統安裝1Panel面板
    原文地址:Window10安裝linux子系統及子系統安裝1Panel面板 - Stars-One的雜貨小窩 最近看到halo博客發佈了2.10.0,終於是新增了個備份功能,於是有了念頭想要升級下 但是目前我還是使用halo1.5版本,所以跨版本遷移可能會有問題,官方提議還是先用個測試環境進行測試驗 ...
  • 普冉PY32系列(八) GPIO模擬和硬體SPI方式驅動無線收發晶元XN297LBW
    XN297LBW 是一個SOP8封裝的2.4GHz頻段無線收發晶元, 價格在1元左右, 因為面向的主要是低成本應用, 大多數搭配的MCU為廉價的8位8051, 不一定有硬體SPI, 為了保證相容在SDK中使用的都是GPIO模擬SPI方式進行驅動. 但是實際上是可以通過硬體SPI方式進行驅動的. 本文... ...
  • 01啟動（關閉）套接字
    windows操作系統為我們提供了一套底層Socket API，用於實現網路通信。在我們編寫的程式中，如果需要引用該網路庫，需要實現以下幾步： 1、包含頭文件 1 #include <WinSock2.h> 其中，頭文件<WinSock2.h>表示Windows Socket 第二版，第一版為 <w ...
  • 輕鬆掌握組件啟動之MongoDB：快速入門、Linux安裝和Docker配置指南
    本文總結了MongoDB的快速入門、Linux安裝和Docker配置指南。它提供了一步步的操作指引，幫助讀者迅速上手MongoDB，並瞭解如何在Linux環境下進行安裝、啟動和配置。此外，文章還介紹了使用Docker安裝和配置MongoDB的方法，使讀者能夠更輕鬆地部署和管理MongoDB實例。 ...
  • Oracle資料庫
    Ⅰ 資料庫 ①層次型資料庫 ②網狀型資料庫 ③關係型資料庫（主要介紹） E-R圖：屬性（橢圓形），實體（矩形），聯繫（菱形-一對一、一對多、多對多）註：有的聯繫也有屬性 關係型資料庫的設計範式： 第一範式（1NF）：屬性不可再分，欄位保證原子性 第二範式（2NF）：在滿足1NF的基礎上，要求表中的每 ...
  • 事件迴圈
    本文以瀏覽器的進程和線程為切入點，以開源的Chromium為例，記錄了前端中的事件迴圈。同時記錄了一些面試題。關鍵詞：隊列，非同步。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類