@deppon/deppon-log

前端埋点工具库

安装

npm install @deppon/deppon-log

基础使用

JavaScript/TypeScript 项目

import depponLog from '@deppon/deppon-log';

// 初始化
depponLog.init(process.env.NODE_ENV, {
    // 配置项
});

// 自定义事件埋点
depponLog.eventTrack('button_click', {
    id: 1,
    name: 'test',
});

Vue 3 使用

1. 安装插件

在 Vue 应用中安装插件：

import { createApp } from 'vue';
import { VuePlugin } from '@deppon/deppon-log';
import router from './router'; // 可选：如果使用 Vue Router

const app = createApp(App);

// 基础安装
app.use(VuePlugin);

// 或者带配置安装（自动追踪路由变化）
app.use(VuePlugin, {
    router, // 传入 router 实例，会自动追踪路由变化
});

app.mount('#app');

2. 在模板中使用指令

点击埋点

<template>
    <!-- 基础用法：点击时触发埋点 -->
    <button v-log="'button_click'">点击按钮</button>

    <!-- 带属性 -->
    <button v-log="'button_click'" v-log:property="{ id: 1, name: 'test' }">点击按钮</button>

    <!-- 或者使用对象形式 -->
    <button
        v-log="{
            event: 'button_click',
            properties: { id: 1, name: 'test' },
        }"
    >
        点击按钮
    </button>
</template>

曝光埋点

<template>
    <!-- 元素进入视口时触发埋点 -->
    <div v-log:exposure="'element_exposure'">内容区域</div>

    <!-- 带属性 -->
    <div
        v-log:exposure="{
            event: 'banner_exposure',
            properties: { bannerId: 123 },
        }"
    >
        横幅广告
    </div>
</template>

3. 在 Composition API 中使用

<script setup>
import { useLog } from '@deppon/deppon-log';

const log = useLog();

const handleClick = () => {
    log.eventTrack('button_click', {
        id: 1,
        name: 'test',
    });
};
</script>

<template>
    <button @click="handleClick">点击</button>
</template>

4. 在 Options API 中使用

<script>
export default {
    methods: {
        handleClick() {
            // 通过 this.$log 访问
            this.$log.eventTrack('button_click', {
                id: 1,
                name: 'test',
            });
        },
    },
};
</script>

5. 自动路由追踪

如果安装插件时传入了 router 实例，会自动追踪路由变化：

import { VuePlugin } from '@deppon/deppon-log';
import router from './router';

app.use(VuePlugin, {
    router, // 自动追踪路由变化，触发 $pageview 事件
});

API

指令

• v-log="eventName" - 点击埋点
• v-log:click="eventName" - 点击埋点（同上）
• v-log:exposure="eventName" - 曝光埋点（元素进入视口时触发）
• v-log:property="{ key: value }" - 设置埋点属性

Composition API

• useLog() - 获取埋点实例

方法

• init(develop, property) - 初始化埋点
• eventTrack(event_name, properties, callback) - 自定义事件埋点
• login(user_id) - 绑定用户 ID
• changeDistinctId(distinct_id) - 修改匿名 ID

更多 API 请参考源码。