Adding statistics tracking to a blog helps understand visitor behavior. This guide covers integrating Baidu Analytics and Google Analytics into a VuePress site. Both require special handling because VuePress is a single‑page application (SPA) – page transitions don't trigger default page loads, so you must manually send pageview data on route changes.
Baidu Analytics
Step 1: Add a site in Baidu Analytics
- Log in to the Baidu Analytics console.
- Navigate to Settings → Site List and click Add Site.
- Enter the domain name and homepage URL of your blog, then submit.
Step 2: Obtain and place the tracking code
After adding the site, you will be redirected to a page that displays the tracking snippet (similar to the example below). Do not copy this snippet as‑is – generate your own on the Baidu platform.
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?YOUR_UNIQUE_ID";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
Step 3: Configure VuePress to report pageviews on route changes
VuePress runs inside a Vue.js environment. Create a file .vuepress/enhanceApp.js to hook into the router. The original Baidu documentation recommends using _hmt.push(['_trackPageview', pageURL]) for SPA tracking.
Here is a modified version of the route guard (variable names changed to improve clarity):
export default ({ router }) => {
router.beforeEach((to, from, next) => {
// Only run when Baidu's global object exists
if (typeof _hmt !== "undefined") {
if (to.fullPath) {
_hmt.push(["_trackPageview", to.fullPath]);
}
}
next(); // Continue navigation
});
};
When you run the development server, open the browser's developer tools (Network tab) and navigate between pages. You should see requests sent to Baidu’s servers.
Step 4: Verify data in the analytics dashboard
Deploy the site. After about 20 minutes, data appears in the Baidu Analytics dashboard under "Real‑time" or "Overview" reports. The primary metric is PV (page views).
Google Analytics
The setup is similar but simpler because VuePress offers an official plugin.
Step 1: Create a Google Analytics account and property
- Go to Google Analytics and sign in with your Google account.
- Click Admin → Create Account (name the account, e.g., your organization).
- During property creation, click "Show advanced options" and turn on Create a Universal Analytics property. You can choose whether to also create a Google Analytics 4 property. For this guide, a Universal Analytics property is sufficient.
- Fill in the website details, accept the Terms of Service, and you will receive a Tracking ID (format:
UA-XXXXX-Y).
Step 2: Install the official VuePress plugin
Use Yarn to avoid dependency conflicts:
yarn add -D @vuepress/plugin-google-analytics
Step 3: Configure the plugin in .vuepress/config.js
module.exports = {
plugins: [
[
'@vuepress/google-analytics',
{
ga: 'UA-00000000-0' // Replace with your actual tracking ID
}
]
]
};
The plugin automatically listens to Vue Router navigation events and sends pageview data – no manual route guard needed.
Deleting a property (if needed)
If you accidentally created the wrong property, go to Admin → Property → Property Settings and scroll to the bottom to find the "Move to Trash Can" option.
Which one to choose?
Both services are reliable. In China, Baidu Analytics usually loads faster than Google Analytics due to network restrictions. You can also integrate both simultaneously to gather data from different audiences.