blackteay/vue-baidu-analytics
1
0
Fork 0
mirror of https://github.com/analyticsjs/vue-baidu-analytics.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

update demo.

Browse Source
This commit is contained in:
chengpeiquan 2021-01-04 18:21:21 +08:00
parent bec6096098
commit 27a45b8f56
5 changed files with 185 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
demo/css/style.css Normal file
View File

@ -0,0 +1,48 @@
#app,
.section {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.section {
margin-bottom: 40px;
}
.nav {
margin-bottom: 20px;
}
.nav .item {
color: #666;
margin: 0 10px 20px;
}
.nav .cur {
color: #000;
font-weight: bold;
}
.label {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.text {
display: flex;
justify-content: flex-end;
align-items: center;
width: 60px;
font-size: 14px;
margin-right: 20px;
}
.input {
display: flex;
align-items: center;
width: 240px;
height: 40px;
font-size: 14px;
box-sizing: border-box;
padding: 0 10px;
}
.button {
padding: 5px 20px;
cursor: pointer;
}

51
demo/index.html
View File

@ -6,56 +6,7 @@
<title>vue baidu analytics demo</title> <title>vue baidu analytics demo</title>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script> <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.4.9/dist/vue-router.js"></script> <script src="https://unpkg.com/vue-router@3.4.9/dist/vue-router.js"></script>
<style> <link rel="stylesheet" href="css/style.css">
#app,
.section {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.section {
margin-bottom: 40px;
}
.nav {
margin-bottom: 20px;
}
.nav .item {
color: #666;
margin: 0 10px 20px;
}
.nav .cur {
color: #000;
font-weight: bold;
}
.label {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.text {
display: flex;
justify-content: flex-end;
align-items: center;
width: 60px;
font-size: 14px;
margin-right: 20px;
}
.input {
display: flex;
align-items: center;
width: 240px;
height: 40px;
font-size: 14px;
box-sizing: border-box;
padding: 0 10px;
}
.button {
padding: 5px 20px;
cursor: pointer;
}
</style>
</head> </head>
<body> <body>

74
demo/js/main-for-vue3.js Normal file
View File

@ -0,0 +1,74 @@
const { createRouter, createWebHashHistory } = VueRouter;
const { createApp } = Vue;
// 定义路由信息
const routes = [
{
path: '/',
redirect: '/page1'
},
{
path: '/page1',
component: {
template: '<div class="view">当前是 <strong>Page1</strong> 的路由</div>'
}
},
{
path: '/page2',
component: {
template: '<div class="view">当前是 <strong>Page2</strong> 的路由</div>'
}
},
{
path: '/page3',
component: {
template: '<div class="view">当前是 <strong>Page3</strong> 的路由</div>'
}
}
];
// 初始化路由
const router = createRouter({
history: createWebHashHistory(),
routes,
linkActiveClass: 'cur',
linkExactActiveClass: 'cur'
});
// 初始化Vue
createApp({})
.use(router)
.use(baiduAnalytics, {
router: router,
siteIdList: [
'8dca8e2532df48ea7f1b15c714588691'
],
isDebug: true
})
.mount('#app');
// // 初始化Vue
// const app = new Vue({
// el: '#app',
// router,
// data () {
// return {
// pageUrl: '',
// category: '',
// action: '',
// label: '',
// value: ''
// }
// },
// mounted () {
// },
// methods: {
// pv () {
// // this.$pushBAIDU.pv(this.pageUrl);
// console.log(baiduAnalytics.pushBAIDU);
// },
// event () {
// this.$pushBAIDU.event(this.category, this.action, this.label, this.value);
// }
// }
// });

6
demo/js/main.js
View File

@ -35,15 +35,11 @@ const router = new VueRouter({
Vue.use(baiduAnalytics, { Vue.use(baiduAnalytics, {
router: router, router: router,
siteIdList: [ siteIdList: [
'aaaaaaaaaaaaaaaaaaa', '8dca8e2532df48ea7f1b15c714588691'
'bbbbbbbbbbbbbbbbbbb',
'ccccccccccccccccccc'
], ],
isDebug: true isDebug: true
}); });
console.log('baiduAnalytics', baiduAnalytics);
// 初始化Vue // 初始化Vue
const app = new Vue({ const app = new Vue({
el: '#app', el: '#app',

61
demo/vue3.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Vue3] vue baidu analytics demo</title>
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.2/dist/vue-router.global.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<h1>Hello Vue3 App!</h1>
<section class="section">
<h2>切换路由自动上报测试</h2>
<div class="nav">
<router-link class="item" to="/page1" exact>Go to Page1</router-link>
<router-link class="item" to="/page2">Go to Page2</router-link>
<router-link class="item" to="/page3">Go to Page3</router-link>
</div>
<router-view></router-view>
</section>
<section class="section">
<h2>提交pv测试</h2>
<label class="label">
<span class="text">pageUrl</span>
<input class="input" type="text" placeholder="输入页面的url" v-model="pageUrl">
</label>
<button class="button" @click="pv">提交一个pv</button>
</section>
<section class="section">
<h2>提交event测试</h2>
<label class="label">
<span class="text">category</span>
<input class="input" type="text" placeholder="输入产生该事件的位置名称" v-model="category">
</label>
<label class="label">
<span class="text">action</span>
<input class="input" type="text" placeholder="输入产生该事件的行为描述" v-model="action">
</label>
<label class="label">
<span class="text">label</span>
<input class="input" type="text" placeholder="输入产生该事件的标签名称" v-model="label">
</label>
<label class="label">
<span class="text">value</span>
<input class="input" type="text" placeholder="输入该事件的分值" v-model="value">
</label>
<button class="button" @click="event">提交一个event</button>
</section>
</div>
<script src="../dist/vue-baidu-analytics.js"></script>
<script src="js/main-for-vue3.js"></script>
</body>
</html>