埋点跟踪规范

核心概念

事件类型

• 点击事件：用户主动交互行为
• 曝光事件：内容可视状态
• 页面事件：生命周期相关

属性规范

| 属性名称 | 类型 | 必填 | 示例值 | |----------|------|------|--------| | ks-dot-event | string | 是 | home_banner_click | | ks-dot-pv | string | 是 | product_list_pv | | ks-dot-key | string/动态值 | 否 | 'sort_type' |

模板使用规范

<!-- ks-dot-click 元素点击事件埋点 -->
<div ks-dot-click="事件名称" ks-dot-key="上报属性" ks-dot-username="用户名" :ks-dot-extra="'动态属性'">

<!-- ks-dot-pv 元素曝光埋点 -->
<div 
  ks-dot-pv="曝光标识"
  ks-dot-username="用户名"
  :ks-dot-key="动态参数">


<!-- 元素曝光埋点-单次曝光 -->
<div 
  ks-dot-pv="曝光标识"
  ks-dot-pv-single
  ks-dot-username="用户名"
  :ks-dot-key="动态参数">
ks-dot-pv-single 属性指定元素单次曝光、后续不进行曝光

脚本方法指南

基础用法

import { logDot } from '@/dotLog'
// 带动态参数的点击事件
const handleSearch = (keyword: string) => {
  logDot.track('search_btn_click', {
    search_key: keyword,
    result_count: 18
  });
}
// 自定义事件跟踪
logDot.track('事件标识', {
  参数1: '值',
  参数2: 123
});

// 注册页面离开的上报属性（）
  logDot.pageleaveProperties({
    properties: {},
    eventName: 'exit_column_detail',
  });

高级实践

动态参数处理

<script setup>
const pagination = ref({
  page: 1,
  page_size: 20
});
</script>

<template>
  <div 
    ks-dot-pv="product_list_pv"
    :ks-dot-key="`page_${pagination.page}`">
</template>

代码审查要点

1. 检查事件命名是否符合 模块_位置_动作 格式
2. 验证动态参数类型安全
3. 曝光事件需确认单次曝光标识
4. 检查重复埋点逻辑
5. 事件标识使用模块_位置_动作格式
6. 动态参数通过ref绑定
7. 复杂事件处理建议封装为独立方法
8. 避免在模板中写复杂逻辑