Nuxt3接入51la等网站统计 - 文章

theme: github

你们做网站会不会关注有多少人访问呢？我是会关注的。

把自己的内容分享出来，让过多的的人看到是一件令人兴奋的事情，所以我就想要把我实现的每一个功能，都以文章的形式进行分享。那么怎么样能够知道有多少人点进来了呢？答案就是网站统计。

关于统计

网站统计这段时间闹得沸沸扬扬的，就是CNZZ这个统计厂商开始收费了，于是大家都转到了 51.la( https://v6.51.la/ )，开始说什么割韭菜之类的，其实我是不认同的，因为大家毕竟都要吃饭嘛，宝塔的统计还要9.9一个月呢。所以这个事情其实也没啥讨论的，事情发生以后51啦开始说话了：近日流量突增，统计可能出现延迟，得嘞，流量全跑这里来了，当然，这都是题外话。目前统计使用最多的有三个（排名不分先后）：

CNZZ
51啦
百度统计

剩下的我也了解不多，所以不在多说。下面开始叙述我在Nuxt3中集成网站统计的过程。

集成之路

官网示例

在使用Nuxt3后发现，真的很多东西缺乏官方文档的支持，非常难办，唯一能够在文档中找到的就是集成谷歌统计，传送门：https://v3.nuxtjs.org/guide/directory-structure/plugins 所以集成谷歌统计就非常简单了，使用yarn安装一个插件，再稍微配置下，完成。

yarn add --dev vue-gtag-next

//plugins/vue-gtag.client.js
import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
})

是不是太简单了？可是我们不用谷歌统计呀！

统计代码

我们来看看51啦提供的统计代码：

!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"id",ck:"ck"});

官网的意思就是把这段代码扔在footer.html的script标签里面去，确实，在传统网站里面，这样方式无疑非常简单，可是现在我们是nuxt3，并且使用的ts语法，那么怎么办呢？

国内统计都是这样的，一段代码或者一个js。

分析

还是回到上面的谷歌统计插件去，可以看到集成谷歌总共也就三部：

安装统计插件
import导入插件
配置插件id

开干

那么我们也照它这么做，首先我们先在plugins目录创建一个文件：tj.client.ts

安装统计插件

怎么安装统计插件？yarn又没有提供51啦或者其他网站统计厂商的依赖包，那么我们看下第二部，import导入，那么自己写一个文件，让它导入不就可以了吗？在assets文件夹下，或者public文件夹都行，新建一个文件：tj.js，我这里是assets/js/ts.js，其实都无所谓了，然后把我们的统计代码粘贴进来：

//assets/js/ts.js
!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"id",ck:"ck"});

这样我们的第一步，安装插件就完成了。

import导入插件

将import VueGtag from 'vue-gtag-next'替换成import '~/assets/js/tj.js'，就可以了：

//plugins/tj.client.ts
import '~/assets/js/tj.js'


export default defineNuxtPlugin(nuxtApp => {

})

完成！

配置插件id

兄弟，还想啥呢？第一步的代码里面已经包含统计id和ck了，还看什么呢？直接发布然后去看数据报表吧！

详细代码可以看本站开源代码：https://github.com/ZN-GG/ZNGG-Nuxt3