Next.js如何接入百度统计

18 min read
import '../styles/globals.css'
import '../styles/typo.css'
import 'highlight.js/styles/tomorrow-night-eighties.css';
import ProgressBar from "@badrap/bar-of-progress";
import Router from "next/router";
import Head from "next/head";

const getAnalyticsTag = () => {
    return {
        __html: `
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?4dac1dac82xxxxx547b3c16ab87";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();`,
    }
}

const progress = new ProgressBar({
    size: 2,
    color: "#42b983",
    className: "bar-of-progress",
    delay: 100,
});

Router.events.on("routeChangeStart", progress.start);
Router.events.on("routeChangeComplete", progress.finish);
Router.events.on("routeChangeError", progress.finish);

function MyApp({ Component, pageProps }) {
  return  (
      <>
          <Head>
              <script dangerouslySetInnerHTML={getAnalyticsTag()}/>
          </Head>
          <Component {...pageProps} />
      </>
  )
}

Router.events.on('routeChangeComplete', (url) => {
    try{
        window._hmt.push(['_trackPageview', url]);
    }catch (e){}
})

export default MyApp

因为Next.js路由采用的是前端路由，所以整个应用出来第一次是服务端渲染出来的，后面的都是在客户端渲染的，本质上还是一个单页面应用，而百度统计代码并没有很好的适配单页面应用，所以我们需要自己处理这部分逻辑。使用routeChangeComplete这个事件，会在路由切换完成后触发