<!-- Matomo -->
<!-- 聯(lián)系管理員新建項目后自動生成,放入到項目根目錄index.html header標(biāo)簽下，并配置相應(yīng)的追蹤域名地址，即刻生效 -->
<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私有服務(wù)器地址
    _paq.push(['setTrackerUrl', u + 'matomo.php']); // 指定 Matomo 服務(wù)器 URL
    _paq.push(['setSiteId', '9']); // 設(shè)置追蹤的站點唯一編碼(指定網(wǎng)站 ID) 該id將作為唯一標(biāo)識來區(qū)分matomo正在采集數(shù)據(jù)的應(yīng)用
    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將會在加載完畢后執(zhí)行
  })();
</script>
<!-- End Matomo Code -->

<!-- 將統(tǒng)計代碼放入到項目根目錄下的index.html的header標(biāo)簽下，注意，該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 -->

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

  /** 頁面標(biāo)題信息上報 */
  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，這里多次調(diào)用trackAllContentImpressions是為了在退出登錄的時候重置調(diào)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中記錄每個路由切換的路徑及頁面標(biāo)題信息；
    sertUserId一般在登錄完成之后調(diào)用，這里在App.vue中調(diào)用是為了解決token存在，spa應(yīng)用直接進目標(biāo)頁面而跳過登錄頁無法觸發(fā)setUserId上報的問題
  */
  watch(
    () => router.currentRoute.value,
    (newValue: any) => {
    // 這里延遲是因為matomo sdk加載是異步非阻塞加載，所以為了能正確的獲取到window上matomo的實例，我們這里會有略微延遲
      setTimeout(() => {
        /**
         * 記錄跳轉(zhuǎn)頁面及頁面標(biāo)題  userCode及nickName均為業(yè)務(wù)系統(tǒng)數(shù)據(jù)，此處做拼接傳入
         **/
        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) => {
    /** 登錄成功后在跳轉(zhuǎn)之前將業(yè)務(wù)數(shù)據(jù)userCode和nickName上報 */
    const { userCode, nickName, menuTree } = data
    const name = `${userCode} | ${nickName}` || ''
    matomo.setUserId(name)
  }
</script>

<!--具體的頁面具體的方法中去觸發(fā)trackEvent-->
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue'
  import useMatomo from '@/plugins/matomo'
  const matomo = useMatomo()

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

/** 官方提供了vue-matomo這個庫，僅適用于vue2，vue3方式接入會有問題 */
npm install --save vue-matomo

/** main.js */    
import Vue from 'vue'
import VueMatomo from 'vue-matomo'

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

// 掛載到vue的實例中之后，我們可以使用this.$matomo or window._paq.push or window.Piwik.getTracker 等三種方式來訪問均可，此處使用this來訪問

?

　　通過window._pag.push 來訪問全局變量，因為即使你獲取到的this.$matomo實例是undefined，window._paq.push也可以保證它是可用的；

• react

? ? 　　社區(qū)沒有提供react-matomo之類的npm包/工具來給開發(fā)者使用，可以參考Hooks方案，將使用到的Api封裝成Hooks，通過window._paq.push的方式在需要的地方來調(diào)用；

　　　由于是私有化部署，關(guān)于公司logo及業(yè)務(wù)數(shù)據(jù)等相關(guān)較敏感的數(shù)據(jù)均已打碼，只展示具體收集指標(biāo)和效果;

　　　數(shù)據(jù)采集上報最終效果圖：

?

+

?

?

?

?

文章來源地址http://www.zghlxwxcb.cn/news/detail-710697.html