npm package: @myyshop/track
Description: 前端埋点插件
Latest version: 0.0.4

# @myyshop/track

> 前端埋点插件

`pnpm install -S @myyshop/track`

暴露方法

## 1. autoTrack

参数 options 对象

- `options?.baseUrl` // 上报地址 (必要)
- `options?.spm_a` // 站点 ID (必要)
- `options?.spm_b` // 页面 ID (必要)
- `options?.userIdCacheKey` // 站点用户 ID 缓存 key
- `options?.autotrack` // 是否自动上报 pv

站点语言可以通过 Cookies.set('language') 或者<html lang="en"> 设置 或者设置 `spm-a`字符串时以语言二字码结尾（如：wwwen）

1.1.8 版本使用的是设置 `spm-a`字符串时以语言二字码结尾（如：wwwen） 的方式
1.1.8 后使用 Cookies.set('language') 或者<html lang="en"> 设置 的方式

触发自动埋点的条件

- 站点 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 埋点需要给页面设置 <meta name="autotrack" content="true"> 但是在 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

```javascript
<script setup>
import { autoTrack } from '@myyshop/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: ['url'] })
})
</script>
```

### next,react

app/layout.js

```javascript
'use client'
import { autoTrack } from '@myyshop/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: ['url'],
      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 |