vue-template

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build

track.config.js配置文件

track.config.js
import { sendTrackData, sendTrackBatchData } from '@/api/tracking.js';

function baseInfo(type) {
    const pcInfo = {
        type: 'PC',
        source: 'portal'
    };
    const mobileInfo = {
        type: 'MOBILE',
        source: 'portal'
    };
    if (type === 'MOBILE') {
        return mobileInfo;
    } else {
        return pcInfo;
    }
}

function trackConfig() {
    return {
        commonClick: {
            sendTrackFn: 'sendTrackBatchPromise',
            type: 'PC',
            event: 'CLICK'
        },
        commonView: {
            sendTrackFn: 'sendTrackBatchPromise',
            type: 'PC',
            event: 'VIEW'
        },
        commonTime: {
            sendTrackFn: 'sendTrackStayPromise',
            event: 'TIME',
            type: 'PC',
            delay: 60 * 1000
        },
        commonMobileClick: {
            sendTrackFn: 'sendTrackBatchPromise',
            type: 'MOBILE',
            event: 'CLICK'
        },
        commonMobileView: {
            sendTrackFn: 'sendTrackBatchPromise',
            type: 'MOBILE',
            event: 'VIEW'
        },
        commonMobileTime: {
            sendTrackFn: 'sendTrackStayPromise',
            event: 'TIME',
            type: 'MOBILE',
            delay: 60 * 1000
        }
    };
}

function sendTrackBatchPromise(list = []) {
    const data = list.map((track) => {
        return {
            type: track.type,
            source: track.source,
            code: track.code,
            name: track.name,
            event: track.event
        };
    });
    return sendTrackBatchData(data);
}

function sendTrackPromise(baseInfo, track) {
    const data = {
        type: baseInfo.type,
        source: baseInfo.source,
        code: track.code,
        name: track.name,
        event: track.event
    };
    return sendTrackData(data);
}

function sendTrackStayPromise(baseInfo, track) {
    const data = {
        type: baseInfo.type,
        source: baseInfo.source,
        code: track.code,
        name: track.name,
        event: track.event,
        duration: track.duration
    };
    return sendTrackData(data);
}

export const options = {
    appId: 'portalAppTrack',
    immediate: false,
    loopTime: 10 * 1000,
    baseInfo,
    trackConfig,
    sendTrackPromise,
    sendTrackBatchPromise,
    sendTrackStayPromise
};

引用示例

// 引入tracking埋点工具
import Vue from 'vue';
import track from '@/tracking/index.js';
import { options } from '@/tracking/track.config.js';
Vue.use(track, options);

###混入

<template>
    <div class="box">
        <el-button @click="handleClick">点击</el-button>
    </div>
</template>

<script>

export default {
    name: 'test',
    components: {},
    data() {
        return {};
    },
    computed: {},
    created() {},
    mounted() {
        this.onClickTrack({ trackId: 'commonView', code: 'view', name: '浏览' })
    },
    methods: {
        handleClick(){
            this.onClickTrack({ trackId: 'commonClick', code: 'click', name: '点击' })
        }
    }
};
</script>

<style></style>

###工具

<template>
    <div class="box">
        <el-button @click="handleClick">点击</el-button>
    </div>
</template>

<script>

export default {
    name: 'test',
    components: {},
    data() {
        return {};
    },
    computed: {},
    created() {},
    mounted() {
        this.$trackingUtils.onClickTrack({ trackId: 'commonView', code: 'view', name: '浏览' })
    },
    methods: {
        handleClick(){
            this.$trackingUtils.onClickTrack({ trackId: 'commonClick', code: 'view', name: '点击' })
        }
    }
};
</script>

<style></style>

###指令

<template>
    <div class="box" v-track="{ trackId: 'commonView', code: 'view', name: '浏览' }">
        <el-button @click="handleClick" v-track="{ trackId: 'commonClick', code: 'view', name: '点击' }">点击</el-button>
    </div>
</template>

<script>

export default {
    name: 'test',
    components: {},
    data() {
        return {};
    },
    computed: {},
    created() {},
    mounted() {
    },
    methods: {
        handleClick(){
        }
    }
};
</script>

<style></style>