如何在Hexo-NexT主題中配置GoogleAnalytics

发表于 分类于

前言

Google Analytics（后文简称为 GA）是一个由 Google 所提供的网站流量统计服务，通过在网站中埋入 GA 追踪码，网站主们可以获取进站流量的资料，包括来源、使用者、装置、造访路径等，通过 GA，可以更全面的了解品牌的受众，进而为潜在客户优化购买、造访流程，提高转单意愿，对于网页入门来说是非常推荐使用的工具。(摘自维基百科) 不过这篇只会教你怎么让你的网页与 GA 连接，详细的操作可以看 google 推出的免费课程

教学开始！

首先到 GA 的官网注册一个帐号，接着到管理建立帐户、资源，最后切换到资料串流建立帐户、资源、切换到资料串流

建立帐户、资源、切换到资料串流

新增串流，选择网页新增串流

新增串流

设定串流名称、串流网址，它会自动生成 GA id（就是最后的评估 id，格式为G-1XXXXSZ6），把它复制下来等会用到设定资料并复制 id

设定资料并复制 id

这次不去改_config.yml 的内容，虽然说它里面也有可以设定 GA 的地方，但不知道为什么我试过之后没办法使用，这里我们直接改它的 layout，首先到 theme->next->layout->_layout.njk 切换到_layout.njk

切换到_layout.njk

在 body 的上方插入以下程式码，请务必将 ‘your-id’ 替换为刚刚复制的 id

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
\<!-- Google tag (gtag.js) -->

\<script async src="https://www.googletagmanager.com/gtag/js?id=your-id">\</script>

\<script>

&#x20; window.dataLayer = window.dataLayer || \[];

&#x20; function gtag(){dataLayer.push(arguments);}

&#x20; gtag('js', new Date());

&#x20; gtag('config', 'your-id');

\</script>

将程式码插入到 body 的上方

将程式码插入到 body 的上方

重启网站（使用 hexo s）并重新载入网页，然后前往 GA -> 报表 -> 即时，检查是否有变化，有时可能需要等待一段时间才能看到数据更新。查看即时报表有没有变化

查看即时报表有没有变化

结语

现在，你可以使用 Google Analytics 来监控每日访问你的网站的人数。如果流量足够，你甚至可以考虑进行广告投放。