myyshop-web-track

v1.2.0

Published

5 months ago

前端埋点插件

0High
0Medium
0Low

hanzhangmin

toolkit rollup

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）

1.1.8 版本使用的是设置 spm-a字符串时以语言二字码结尾（如：wwwen）的方式 1.1.8 后使用 Cookies.set('language') 或者设置的方式

触发自动埋点的条件

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

myyshop-web-track

1. autoTrack

2. pageView

3. traceClick

4. traceExpose

使用示例

nuxt,vue

next,react

options