# 快速上手

# 1. 全局上报单页面示例

已发布至 tnpm 仓库

tnpm i @tencent/slug-report -S

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes/index.js'
// 1. 引入组件
import SlugReport from '@tencent/slug-report'

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

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

let router = new VueRouter({
  routes,
})

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

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

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

项目组件内：

<!-- 6. dmp点击曝光上报埋点 && mosso点击埋点示例 -->
<ul>
  <li
    v-for="(item, index) in v4List"
    v-dmp="{action:'click,pop', targetid: item.iNewsId, targettype: 'news', title: item.sTitle, from: 'v4'}"
  ></li>
</ul>

<button v-mosso="['btn', 'share', '分享']">分享内容</button>

1
2
3
4
5
6
7
8
9

# 2. 全局上报多页面示例

<!--1. 引入组件-->
<script src="https://tiem-cdn.qq.com/slugteam/libraries/slug-report/slug-report@0.1.min.js"></script>
<script>
  // 2. 组件初始化 & 实例化
  var slugReport = new SlugReport({
    game: 'pg',
  })

  // 3. dmp上报pv（可选参数在图文和视频详情页才需要填）
  slugReport.dmp({
    action: 'pv', // 必填
    targetid: '324234', // 可选，内容id，如v4的iNewsId / iVideoId / iId
    targettype: 'news', // 可选，内容类型，填：news | video
    title: '【英雄周报】王者荣耀盘古视频教学', //  可选，内容标题
    from: 'v4', // 可选，内容从哪个平台拉取：v4 | tgl | ingame
  })

  // 4. 上报click
  // ① dmp点击上报，一般埋在内容列表的li上，自行onclick事件
  slugReport.dmp({
    action: 'click', // 必填
    targetid: '324234', // 必填
    targettype: 'news', // 必填
    title: '【英雄周报】王者荣耀盘古视频教学', // 必填
    from: 'v4', // 必填
  })
  // ② mosso点击上报，按产品需求埋
  slugReport.mosso('btn', 'share', '分享')

  // 5. dmp上报timeline（可选参数在图文和视频详情页才需要填）
  window.addEventListener(
    'unload',
    function () {
      slugReport.dmp({
        action: 'timeline', // 必填
        staytime: new Date() - stayTime, // 必填
        targetid: '324234', // 可选
        targettype: 'news', // 可选
        title: '【英雄周报】王者荣耀盘古视频教学', // 可选
        from: 'v4', // 可选
      })
    },
    true
  )
</script>

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
40
41
42
43
44
45

# 3. 局部(dmp)上报单页面示例

tnpm i @tencent/slug-report -D

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes/index.js'
import { Dmp } from '@tencent/slug-report'

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

// 3. 初始化
let dmp = new Dmp({
  game: 'pg', //填游戏id
})

let router = new VueRouter({
  routes,
})
// 4. 路由注入
dmp.regRouter(router)

new Vue({
  mixins: [globalData],
  el: '#app',
  router,
  // 5. 实例注入
  dmp,
  render: (h) => h(App),
})

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

<!-- 6. 在v4、tgl或ingame等内容的列表上，添加v-dmp指令（曝光和点击上报） -->
<ul>
  <li
    v-for="(item, index) in v4List"
    v-dmp="{action:'click,pop', targetid: item.iNewsId, targettype: 'news', title: item.sTitle, from: 'v4'}"
  ></li>
  <!--action固定填‘click,pop’，targetid是文章id，targettype是news-新闻/video-视频，title是文章标题，from是内容类型：v4/tgl/ingame-->
</ul>

1
2
3
4
5
6
7
8

# 4. 局部(dmp)上报多页面示例

<script src="https://tiem-cdn.qq.com/slugteam/libraries/slug-report/slug-report.dmp@0.1.min.js"></script>
<script>
var dmp = new DmpReport({
    // 游戏id
    game: 'pg'
})

var stayTime = new Date()
dmp.report({
    action: 'pv'
})

window.addEventListener('unload', function(){
    dmp.report({
        action: 'timeline',
        staytime: (new Date()) - stayTime
    })
}, true)
<script>

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

← 介绍安装 →