Myyshop-web-track NPM

myyshop-web-track

前端埋点插件

pnpm install -S myyshop-web-track

暴露方法

1. autoTrack

参数 options 对象

options?.baseUrl // 上报地址 (必要)
options?.spm_a // 站点 ID (必要)
options?.spm_b // 页面 ID (必要)
options?.userIdCacheKey // 站点用户 ID 缓存 key
options?.autotrack // 是否自动上报 pv

站点语言可以通过 Cookies.set('language') 或者设置或者设置 spm-a字符串时以语言二字码结尾（如：wwwen）

触发自动埋点的条件

站点 id (必要)

<meta name="spm-a" content={spma} />

页面 id (必要)

<meta name="spm-b" content={spmb} />

元素设置spm-c参数 (必要)
元素设置spm-index参数 (非必要)
元素设置other参数（非必要）
元素设置itemcode参数（商品元素必要）
元素设置event-code参数（非必要）
元素设置event-type参数（非必要） event-type=expose 曝光埋点 event-type=click 点击埋点（点击埋点时该参数可以不传）

自动触发页面 pv 埋点需要给页面设置但是在 nuxt.js, 设置 content="true" 会不显示 true，但是没关系，设置为 content="123" 也可以，只要是取布尔值为 true 的值都可以！

2. pageView

参数

eventCode 事件码
other 其他信息
itemcode 商品 ic
options ((内容参看下面 options))

3. traceClick

参数

module 默认 document.body
eventCode 事件码
other 其他信息
spmd
spmc
itemcode 商品 ic
options ((内容参看下面 options))

4. traceExpose

module 默认 document.body
eventCode 事件码
other 其他信息
spmd
spmc
itemcode 商品 ic
options ((内容参看下面 options))

使用示例

nuxt,vue

app.vue

<script setup>
import { autoTrack } from 'myyshop-web-track'
  useHead({
    // 埋点需要
    meta: [
      {
        hid: 'spm-a',
        name: 'spm-a',
        content: 'spm-a',/*在不同的站点可以设置不同的值  */
      },
      {
        hid: 'spm-b',
        name: 'spm-b',
        content: 'spm-b',/*在不同的页面可以设置不同的值  */
      },
      {
        name: 'autotrack',//对于无需提交pageview的页面可以不设置
        content: '1',
      },
    ],
  })
onMounted(() => {
  // 注册自动埋点
  autoTrack({ baseUrl: ['https://d1.dhmogo.com/track/tracklog.jsp'] })
})
</script>

next,react

app/layout.js

'use client'
import { autoTrack } from 'myyshop-web-track'
import { useEffect } from 'react'
export const metadata = {
  other: {
    autotrack: 'true', //对于无需提交pageview的页面可以不设置
    'spm-b': 'spm-b', //在不同的页面可以设置不同的值
  },
}

export default function RootLayout({ children }) {
  // useEffect在本地执行两次，故埋点在开发环境会有重复执行的问题，但是生产环境正常
  useEffect(() => {
    // d1埋点
    autoTrack({
      baseUrl: ['https://d1.dhmogo.com/track/tracklog.jsp'],
      userIdCacheKey: 'userId', // 用户ID缓存key，用于埋点上报
    })
  }, [])
  return (
    <html>
      <head>
        <meta name='spm-a' content={spma} />
        {/*在不同的站点可以设置不同的值  */}
      </head>
      <body>{children}</body>
    </html>
  )
}

options

参数	类型	注释
baseUrl	Array	上报地址 api
spm_a	String	站点 ID
spm_b	String	页面 ID
userIdCacheKey	String	站点用户 ID 缓存 key
autotrack	Boolean	是否自动上报 pv
module	Dom 对象	当前模块
moduleName	String	模块名称,对应 spmC
moduleIndex	String	模块索引，对应 spmD 默认“1”
title	String	标题
event_body	String	事件体
event_code	String	事件码
other	Object	用于上报特殊参数
domain	String	当前 domian 默认 options.domain / location.hostname
userIdCacheKey	String	当前站点用户 ID 缓存 key 默认（ 'd1_userid' ）
keywordQueryKey	String	当前站点搜索结果页 url query key 默认（ 'searchKey' ）
cateName	String	当前站点搜索结果页 url query key 默认（ 'cateDisName' ）
sessionExpireTime	Number	会话最大有效时间默认 30 60 1000
callback	Function	回调默认 null