Matomo 跟踪器( 反应)

在 React 工程中使用 Matamo 跟踪的独立库

安装

npm install @datapunt/matomo-tracker-react

使用量

在使用Matomo Tracker之前,您需要用您的项目细节创建 Matomo 实例,并将您的应用程序包入 MatomoProvider 这个包裹暴露.

import { MatomoProvider, createInstance } from '@datapunt/matomo-tracker-react'

const instance = createInstance({
  urlBase: 'https://LINK.TO.DOMAIN',
  siteId: 3,
  userId: 'UID76903202', // optional, default value: `undefined`.
  trackerUrl: 'https://LINK.TO.DOMAIN/tracking.php', // optional, default value: `${urlBase}matomo.php`
  srcUrl: 'https://LINK.TO.DOMAIN/tracking.js', // optional, default value: `${urlBase}matomo.js`
  disabled: false, // optional, false by default. Makes all tracking calls no-ops if set to true.
  heartBeat: { // optional, enabled by default
    active: true, // optional, default value: true
    seconds: 10 // optional, default value: `15
  },
  linkTracking: false, // optional, default value: true
  configurations: { // optional, default value: {}
    // any valid matomo configuration, all below are optional
    disableCookies: true,
    setSecureCookie: true,
    setRequestMethod: 'POST'
  }
})

ReactDOM.render(
  <MatomoProvider value={instance}>
    <MyApp />
  </MatomoProvider>,
)

将您的申请与 MatomoProvider 您可以使用 useMatomo matomo Provider 组件树内任何地方跟踪您的应用程序的钩子 :

import React from 'react'
import { useMatomo } from '@datapunt/matomo-tracker-react'

const MyPage = () => {
  const { trackPageView, trackEvent } = useMatomo()

  // Track page view
  React.useEffect(() => {
    trackPageView()
  }, [])

  const handleOnClick = () => {
    // Track click on button
    trackEvent({ category: 'sample-page', action: 'click-event' })
  }

  return (
    <button type="button" onClick={handleOnClick}>
      Click me
    </button>
  )
}

高级用途

默认情况下, Matomo Tracker 会发送窗口的文档标题和位置, 或者发送自己的值 。 还有.., 自定义维度 可用于:

import React from 'react'
import { useMatomo } from '@datapunt/matomo-tracker-react'

const MyPage = () => {
  const { trackPageView, trackEvent } = useMatomo()

  // Track page view
  React.useEffect(() => {
    trackPageView({
      documentTitle: 'Page title', // optional
      href: 'https://LINK.TO.PAGE', // optional
      customDimensions: [
        {
          id: 1,
          value: 'loggedIn',
        },
      ], // optional
    })
  }, [])

  const handleOnClick = () => {
    // Track click on button
    trackEvent({ category: 'sample-page', action: 'click-event' })
  }

  return (
    <button type="button" onClick={handleOnClick}>
      Click me
    </button>
  )
}

你也可以为 trackEvent 方法 :

import React from 'react'
import { useMatomo } from '@datapunt/matomo-tracker-react'

const MyPage = () => {
  const { trackEvent } = useMatomo()

  const handleOnClick = () => {
    // Track click on button
    trackEvent({
      category: 'sample-page',
      action: 'click-event',
      name: 'test', // optional
      value: 123, // optional, numerical value
      documentTitle: 'Page title', // optional
      href: 'https://LINK.TO.PAGE', // optional
      customDimensions: [
        {
          id: 1,
          value: 'loggedIn',
        },
      ], // optional
    })
  }

  return (
    <button type="button" onClick={handleOnClick}>
      Click me
    </button>
  )
}

这个 useMatomo 钩子还暴露出以下方法:

• trackEvents()
• trackSiteSearch()
• trackLink()
• pushInstruction()

例如 pushInstruction() 函数可以用来将指令推给Matomo执行. 这个 等于将条目推入 _paq 阵列.

const { pushInstruction } = useMatomo();
pushInstruction('setUserId', 'USER_ID_HERE');

SPA 链接跟踪

Matomo提供了追踪出行链接的选项,然而,这种执行对于SPA(单一页面应用程序)来说是片面的 无 SSR (Server side rendering) 跨不同版本的马多摩. 因此,你可以使用 enableLinkTracking 在锁定元素上点击。 这种方法应放在您 MatomoProvider 每个页面视图都显示的组件 另外,确保使 linkTracking 选项:

import { MatomoProvider, createInstance, useMatomo } from '@datapunt/matomo-tracker-react'

const instance = createInstance({
  urlBase: "https://LINK.TO.DOMAIN",
  linkTracking: false // Important!
});

ReactDOM.render(
  <MatomoProvider value={instance}>
    <MyApp />
  </MatomoProvider>
)

const MyApp = () => {
  const { enableLinkTracking } = useMatomo()

  enableLinkTracking()

  return (
    // Render components
  )
}

参考资料

• Matomo JavaScript 跟踪指南