vue-baidu-analytics

This article was last updated 3 years 10 months ago, and some content may be legacy. Please use it for reference only.

Only 3 kB, this plugin base on the Baidu analytics, it can help you quickly to collect the page views on your website, including single page web application.

Since the version v2.0.0, it supports the Vue 3.0, and is compatible with the Vue 2.0, you can see the live demo to learn more.If you haven’t started using Vue 3.0, welcome to read the tutorial learning Vue3 .

Features

• Asynchronously load the Baidu analytics scripts, no need to modify the entry HTML.

• Support the deployment of multiple site IDs and corresponding data reporting.

• Supports automatic reporting of PV data generated by route switching (This feature need Vue Router, It can support hash mode and history mode).

• Support manual submission of page views reports.

• Support manual submission of event reports.

• Since the version v2.0.0, the plugin can automatically recognize the Vue version at Vue 2.0 or Vue 3.0 .

• Since the version v2.1.0, Hooks API is provided (So the usage of CDN installation is slightly adjusted)

Project

As long as Vue and Vue Router are introduced, the projects can be used normally, no matter what method is used to develop your project, e.g. :

• Vue-CLI scaffolding project

• Vite project

• Introduce the HTML page of Vue related CDN

• VuePress project

It is not limited to SPA single page projects, it can also be used in SSG / SSR projects.

Preview

Both live demos have enabled debug mode, and you can open the console to view the report.

Vue 2.0 ：vue-baidu-analytics demo for Vue 2.x

Vue 3.0 ：vue-baidu-analytics demo for Vue 3.x

Options

Tips: Please remember to turn off the debug mode before publish.

Install

You can install the plugin from NPM.

npm install vue-baidu-analytics --save-dev

Can also use the CDN URL in your HTML.

<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>

Usage

If use NPM, you must import the plugin in main.js .

import baiduAnalytics from 'vue-baidu-analytics'

Then, refer to the sample code in Vue 2.0 and Vue 3.0 below to use it.

When the route is switched, the new URL address will be reported to Baidu analytics after the visit.

Use in the Vue 2.0

See：main.js - Vue 2.0 demo

Since the version v2.1.0, if you use CDN in your HTML, must be use baiduAnalytics.default to use the plugin.

Vue.use(baiduAnalytics, {
  router: router,
  siteIdList: ['aaaaaaaaaaaaaaaaaaa', 'bbbbbbbbbbbbbbbbbbb'],
  isDebug: false,
})

Use in the Vue 3.0

See：main.js - Vue 3.0 demo

Since the version v2.1.0, if you use CDN in your HTML, must be use baiduAnalytics.default to use the plugin.

createApp(app)
  .use(router)
  .use(baiduAnalytics, {
    router: router,
    siteIdList: ['aaaaaaaaaaaaaaaaaaa', 'bbbbbbbbbbbbbbbbbbb'],
    isDebug: false,
  })
  .mount('#app')

Use in the VuePress

The plugin can also be used in VuePress project.

In the /docs/.vuepress folder under the project, create a file named enhanceApp.js, and write the following code in this file.

You can see App Level Enhancements - VuePress to learn more.

import baiduAnalytics from 'vue-baidu-analytics'

export default ({ Vue, router }) => {
  Vue.use(baiduAnalytics, {
    router: router,
    siteIdList: [
      'aaaaaaaaaaaaaaaaaaa',
      'bbbbbbbbbbbbbbbbbbb',
      'ccccccccccccccccccc',
    ],
    isDebug: false,
  })
}

You can turn on the debug mode in the development environment to learn about related reports (remember to turn off debug before going online).

API

Since the version v2.1.0, you can use the Global API $pushBAIDU and the Hooks API usePush in your project, they both support the Vue 2.0 and 3.0.

The APIs can't be used directly, it needs to cooperate with the Methods to operate the specific functions.

The Global API

In the Vue 2.0:

// xxx.vue in Vue 2.0
export default {
  // ...
  mounted() {
    this.$pushBAIDU.pv('/example-url/')
  },
  // ...
}

In the Vue 3.0, you can use the Global Properties:

// xxx.vue in Vue 3.0
import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const app = getCurrentInstance()
    app.appContext.config.globalProperties.$pushBAIDU.pv('/example-url/')
  },
}

You can also import the proxy component in the current instance to operate:

// xxx.vue in Vue 3.0
import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const { proxy } = getCurrentInstance()
    proxy.$pushBAIDU.pv('/example-url/')
  },
}

The Hooks API

In the Vue 2.0:

// xxx.vue in Vue 2.0
import { usePush } from 'vue-baidu-analytics'

export default {
  // ...
  data() {
    return {
      baidu: usePush(),
    }
  },
  mounted() {
    this.baidu.pv('/example-url/')
  },
  // ...
}

In the Vue 3.0, just use it as if you were using the route const router = useRouter();.

// xxx.vue in Vue 3.0
import { usePush } from 'vue-baidu-analytics'

export default {
  setup() {
    const baidu = usePush()
    baidu.pv('/example-url/')
  },
}

If the name of the hook API has already been declared, you can rename it when import.

import { usePush as useBaidu } from 'vue-baidu-analytics'
const baidu = useBaidu()

Methods

All methods are needs to be triggered through the API, and the methods supported by the Global API and the Hooks API are exactly the same.

Since there are still many users of Vue 2.0, the following examples only use the operation method of Vue 2.0 to demonstrate. Vue 3.0 can call specific methods according to the description of the Hooks API.

Tips: If multiple site IDs are configured, the data will be reported to all sites at the same time.

Manually report the page views

If you switch content rendering on some pages through Tab, but you need to report access data, you can use this method to manually report.

Params

Example

this.$pushBAIDU.pv('/example-url/')

Manually report the event analysis

For example, there is a "exchange" function button on your page. If you want to count the clicks of this button, you can perform click analysis by binding the button to report events.

Params

Example

this.$pushBAIDU.event(this.category, this.action, this.label, this.value)

CHANGELOG

See：releases

License

MIT License © 2019 chengpeiquan