# 接入

# 1. 多页面环境

在多页面环境下，由于不依赖于 Vue 框架，上报接入是通过直接调用实例对象的方法进行操作。

# 1.1 全局实例化

全局实例化对象 slugReport 可以通过方法 dmp、mosso 和 emonitor 来直接调用上报方法，如：

// 实例化
var slugReport = new SlugReport({
  game: 'smoba',
})

// dmp点击上报示例
slugReport.dmp({
  action: 'click', // 必填
  targetid: '324234', // 必填
  targettype: 'news', // 必填
  title: '【英雄周报】王者荣耀盘古视频教学', // 必填
  from: 'v4', // 必填
})

// mosso点击上报示例
slugReport.mosso('btn', 'share', '分享')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 1.2 局部实例化

局部实例化对象分别是 dmp 和 mosso，可以调用实例的 report 方法来调用上报

// 实例化
var dmp = new DmpReport({
    game: 'smoba',
  }),
  mosso = new MossoReport()

// dmp点击上报示例
dmp.report({
  action: 'click', // 必填
  targetid: '324234', // 必填
  targettype: 'news', // 必填
  title: '【英雄周报】王者荣耀盘古视频教学', // 必填
  from: 'v4', // 必填
})

// mosso点击上报示例
mosso.report('btn', 'share', '分享')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2. 单页面环境

在单页面环境下，SlugReport 利用 Vue 作为底层支撑，实现了：

进入页面时，组件==自动==上报 dmp 的 visit 行为和 mosso 的 pv/uv
路由切换时，组件==自动==上报 dmp 的 pv/timeline 行为和 mosso 的 pv
在跳出站点/关闭页面时，组件==自动==上报了 dmp 的 leave 行为

因此，在单页面环境下只需要：

① 在入口文件初始化组件
② 接入 dmp 和 mosso 的点击/曝光埋点

# 2.1 单页面下初始化组件

在单页面初始化组件只有 5 步（注释的代码是按需加载/局部引入的例子）：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes/index.js'
// 1. 引入组件
import SlugReport from '@tencent/slug-report'
// 也支持按需引入上报组件
// import { Dmp, Mosso } from '@tencent/slug-report'

// 2. 安装到Vue
Vue.use(SlugReport)
// Vue.use(Dmp)
// Vue.use(Mosso)

// 3. 组件初始化 & 实例化
let slugReport = new SlugReport({
  game: 'pg',
})
// let dmp = new Dmp({
//	game: 'pg'
// })
// let mosso = new Mosso()

let router = new VueRouter({
  routes,
})

// 4. 注入路由
slugReport.regRouter(router)
// dmp.regRouter(router)
// mosso.regRouter(router)

new Vue({
  el: '#app',
  router,
  // 5. 把实例对象注入到Vue实例，在项目里即可通过this.$slugReport访问
  slugReport,
  // dmp,
  // mosso
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 2.2 单页面下埋点点击/曝光

在单页面环境下，组件通过指令的方式实现了点击/曝光上报逻辑的封装和 dom 元素的绑定，所以埋点全程直接添加指令即可

<ul>
  <li
    v-for="(item, index) in v4List"
    v-dmp="{action:'click,pop', targetid: item.iNewsId, targettype: 'news', title: item.sTitle, from: 'v4'}"
    v-mosso="['btn', 'share', '分享']"
  ></li>
</ul>

1
2
3
4
5
6
7

← 安装选项 →