vue声明式埋点指令

背景

数据埋点是前端开发中的必经一环，可以用于统计页面访问量、按钮点击量、元素展示次数等。常见的是每个公司都会封装一套自己的埋点sdk，在JS逻辑中调用对应函数上报数据埋点。这种埋点的优点是可以在元素多状态的时候进行区分上报，缺点就是与业务逻辑耦合。

本文借助vue指令的实现了一套声明式埋点方案，可以直接在template上进行指令埋点上报。为了适用不同公司，并且不对现有业务进行大的改动，将具体的埋点上报函数交由业务方实现，将上报函数作为参数初始化指令。

实现

核心原理就是利用vue指令，指令的开发就不再描述了，需要的同学可以去vue官网看文档。

常见的埋点可以分为三类：

1. 页面PV

   一般是页面初始化时进行上报，在指令初始化的时候上报即可，比较容易实现

2. 点击click

   Vue 指令初始化时，会传递绑定指令的dom元素，所以我们可以通过对dom添加点击事件进行监听来实现

3. 元素曝光show

   元素曝光实现稍微复杂些，需要借助IntersectionObserver来判断元素是否进入可视区域。

import "intersection-observer";
import { ITrackOptions } from "./types";

let ksLogShow: (arg0: any) => void;

const observer = new IntersectionObserver(
    (entries) => {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                let value: any = entry.target.getAttribute("kstrackParams");
                const once = entry.target.getAttribute("once");
                if (!value) {
                    return;
                }
                value = JSON.parse(value);
                ksLogShow(value);
                if (once === "true") {
                    observer.unobserve(entry.target);
                }
            }
        });
    },
    {
        threshold: [0.5],
    }
);

export default {
    install(Vue: any, options: ITrackOptions) {
        const { logClick, logPV, logShow } = options;
        ksLogShow = logShow;
        Vue.directive("track", {
            bind(el: any, binding: any) {
                const { arg, value, modifiers } = binding;
                if (arg === "click") {
                    el.addEventListener("click", () => {
                        logClick(value);
                    });
                } else if (arg === "show") {
                    if (modifiers.once) {
                        el.setAttribute("once", modifiers.once.toString());
                    }
                    el.setAttribute("kstrackParams", JSON.stringify(value));
                    observer.observe(el);
                } else if (arg === "pv") {
                    logPV(value);
                }
            },
        });
    },
};

使用方式

指令使用的参数，与业务自己定义的logPV、logClick、logShow三个函数的参数是对应的，参数的定义、实现、使用，全部由业务方自己决定。

初始化

import Vue from 'vue';
import logger from 'vue-logger-directive'
// 需要业务方提供三个函数，分别用于PV统计、点击统计、展示统计
import { logPV, logClick, logShow } from './logHandler';
Vue.use(logger, { logPV, logClick, logShow });

PV统计

export function logPV(params: {
    page: string;
    type: number;
}) {}

<div class="app"
    v-logger:pv="{page: "app", type: 1}">
</div>

点击统计

export async function logClick(params: {
    page: string;
    type: number;
    action: string;
}) {
    // 点击统计逻辑
}

// 组件使用时
<div class="card" v-logger:click="{page: 'app', type: 1, action: 'join-btn'}"></div>

元素曝光

export async function logShow(params: {
    page: string;
    type: number;
    action: string;
}) {
    // 展示统计逻辑
}

// 组件使用时
<div class="card" v-logger:show="{page: 'app', type: 1, action: 'main-card'}"></div>

// 支持元素展示只执行一次
<div class="card" v-logger:show.once="{page: 'app', type: 1, action: 'main-card'}"></div>

最后为了方便后续使用，发布到了npm中，有需要的可以自取

npm包地址：https://www.npmjs.com/package/vue-logger-directive