Hexo接入Google Analytics(谷歌分析)

同步MrHao Blog文章
源地址https://git.mrhao.xyz/blog/2020/04/25/GoogleAnalytics/

前言

首先呢，这个“修改”标签是最近加的，打算记录一些平常我瞎改的一些思路（PS：瞎改的意思就是完全没有了解过某门语言却修改一些项目的成功案例）

这次涉及到的下面做解释

pug：模板引擎（未了解）

html：标签语言（中等水平）

js：脚本语言（学得头疼还没懂）

hexo：轻量级静态博客（熟练基本操作，已部署）

Visual Studio：微软的一款IDE

然后环境介绍及本次重要文件结构

hexo已部署

使用的hexo主题Anatole（重要！！！）

比较重要的文件结构，其他讲不到的省略

├─public（渲染输出文件夹）
├─source（文章md源文件）
└─themes（主题文件夹）
 └─Anatole（这次用到的主题）
    ├─layout
      │  └─partial
      │      └─head.pug（head部分pug文件）

开始吟唱！！

第一步当然是去坐趟飞机去外面再上 Google Analytics (以下简称‘谷歌分析’)，登录谷歌账号

创建媒体资源

这步看着填

接下来会跳转到这个界面UA开头的ID就是你的识标，中间有一堆JS代码，不用慌

根据代码框上面的信息我们可以知道需要将这对代码插入到你想要跟踪的界面其中的head标签中，显然对于一个静态博客来说直接一个一个页面插入根本就是在搞笑

然而hexo博客是靠模板引擎渲染的那么就是说我们可以在模板的“部分插入这代码

分析模板引擎文件

我们用vs打开head.pug（文件位置详情见上方文件结构下文不再提醒）

这里比较顺眼就决定在这插入了

随便看了眼pug的参考文档看到一个超链接的写法

a(href='google.com') Google //pug部分

<a href="google.com">Google</a> //渲染后html代码

行了，我又懂了

<!-- 假如以下是我要插入的js代码 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=xxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'xxxxxxx');
</script>

我会拆分成两部分来写，因为一共两组标签

//根据 a(href='google.com') Google
//我们的第一组标签应该是
script(src="https://www.googletagmanager.com/gtag/js?id=xxxxx")
//同样第二部分是
script window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'xxxxxxx');
//第二部分看起来不太美观，但是这样才不会报错，而且JS语言以";"结尾了就不怕冲突

保存退出，大功告成，一顿hexo g，部署后可以见到每个界面的head标签中都有谷歌分析的代码

看看到这可怜访问量，博主的文章觉得好的话记得推荐给需要的人哦