Next.js如何接入百度统计
发布时间:2020-12-27 13:05:26阅读:(959)
Next.js是一个非常优秀的React服务端渲染解决方案。一般做服务端渲染,大多数因素都是为了SEO,既然做了SEO,那么肯定会嵌入一些网站统计代码,本文将介绍如何在Next.js内使用百度统计代码。
一、获取百度统计代码
这一步就不多介绍了,详细大部分人都知道。

二、嵌入统计代码
next.js并没有像其他react框架一样有一个index.html入口,那么统计代码该放在哪个地方呢?next.js官方提供了这两个入口可以放置一些全局的代码:自定义Document或者自定义App。
官方文档如下:
- https://nextjs.org/docs/advanced-features/custom-document
- https://nextjs.org/docs/advanced-features/custom-app
虽然这两个地方都可以放置,但我还是喜欢放在App内,_app.js代码如下:
import React from 'react';
import { Head } from 'next/document';
function MyApp({ Component, pageProps }) {
const getAnalyticsTag = () => {
return {
__html: `
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?你的代码";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();`,
}
}
return (
<>
<Head>
<script dangerouslySetInnerHTML={getAnalyticsTag()}/>
</Head>
<Component {...pageProps} />
</>
)
}
export default MyApp;
然后我们回到浏览器,访问页面,看到会有一个hm.gif的请求,就说明代码集成没问题了。
那么到这里就结束了吗?显然没有。我们发现第一次进入页面的时候确实有hm.gif这个请求,但是在页面切换的时候,并没有这个请求。说明页面的切换并没有被统计进去,那是为什么呢?
因为Next.js路由采用的是前端路由,所以整个应用出来第一次是服务端渲染出来的,后面的都是在客户端渲染的,本质上还是一个单页面应用,而百度统计代码并没有很好的适配单页面应用,所以我们需要自己处理这部分逻辑。
三、解决路由切换时统计并不生效问题
Next Router设计了这个几个事件:
https://nextjs.org/docs/api-reference/next/router#routerevents
这里我们主要使用routeChangeComplete这个事件,这个事件会在路由切换完成后触发,因此我们在这里加上手动埋点。代码依旧在_app.js中
import { Router } from 'next/router';
Router.events.on('routeChangeComplete', (url) => {
try{
window._hmt.push(['_trackPageview', url]);
}catch (e){}
})
再回到浏览器中,就能看到页面切换时也有hm.gif这个请求了。
至此,百度统计的代码就加完了。
文章版权及转载声明:
文章转载或复制请以超链接形式并注明出处陌上小筑
文章推荐
热门文章
- 使用rook在k8s管理ceph集群
- 如何拉取k8s.grc.io、quay.io的镜像
- 二进制方式搭建Kubernetes 1.19.3高可用集群(三)——部署controller-manager和scheduler
- 由cookie SameSite引起的坑
- 二进制方式搭建Kubernetes 1.19.3高可用集群(二)——部署ETCD集群和api-server
- 使用Spring ldap操作active directory
- Gitlab企业版证书生成
- G1GC调优时遇到的坑
- Jackson 2.11.0无法使用@JsonCreator反序列化枚举值
- Spring boot 2.4.2 redisson报错问题排查
标签云
站点信息
- 建站时间:2019年6月15日
- 文章统计:32篇文章
- 统计数据:百度统计
- 总访问量:44378
- 今日访问量:44
发表评论