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

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

    SDK统计代码

    复制代码
    

<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>
    复制代码

    • 常用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

    复制代码
    

<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>
    复制代码

    　　引入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
  }
}
    复制代码
    复制代码