Several website traffic analysis tools for Hexo - umami and Google Analytics

After setting up the website, how do you know how many people have visited your website? Or is it just yourself visiting? 🤣
In WordPress, there are many plugins that can solve the problem of website traffic analysis and monitoring in one stop. However, in Hexo or similar static blogs, you have to tinker with it yourself.
This article mainly introduces Google Analytics and self-built umami traffic analysis.

What is a website analytics tool?#

A website analytics tool can track and analyze website traffic, user behavior, and other data.

For large websites, it can help website managers better understand users and optimize website design and marketing strategies to improve user satisfaction and conversion rates.

For small sites like ours, it's probably just to see how many people other than ourselves have visited our website (:

Prerequisite: Using Hexo Injector to Add HTML Fragments#

The working principle of most website analytics tools is to add a <script> in the <head> of the HTML, so we need to inject a piece of code provided by the tool into every page of the site, which requires the use of Hexo Injector.

The documentation is here: Injector | Hexo, but we don't need to use all the parameters. Just follow the steps below.

Create a scripts folder in the root directory of Hexo (at the same level as the source and theme folders).
Create a JavaScript file in the scripts folder, with any name, such as analytics.js.
Add the following line in the JavaScript file:

hexo.extend.injector.register('head_begin', 'Code to be injected')

At this point, your tracking code has been added to all pages of Hexo. If you only want to track a few pages (not recommended), or want to exclude a few pages, you can refer to the documentation.

After adding it, you can find it in the browser by pressing F12.

Google Analytics#

Google Analytics can be said to be the most powerful free website analytics tool available today. It has everything you need.

Register and Get the Tracking Code#

Open https://analytics.google.com/ and log in with your Google account.

Then, follow the prompts to create a Google Analytics account (one Google account can create 100 GA accounts to manage different resources), and then create a media resource under this GA account. Finally, on the "Start collecting data" page, select the platform "Web" and enter the name and domain to create a data stream.

After that, theoretically, a page will pop up containing the code provided by Google. If not, you can find it by following the path below:

Bottom left corner: Admin - Select the correct account and media resource - Data Streams - Enter the details of the created data stream - View code instructions - Add manually

View Code 1

View Code 2

Add the Code#

In general, the theme has already integrated the functionality of Google code, so you just need to add the code starting with UA- in the corresponding _config.<theme name>.yaml file. However, Google has stopped using the UA- code and switched to the G- code. The original UA- code will no longer collect information from July 1, 2023. Most themes have not adapted to this change, so you can only use the method of the injector mentioned above. Since there are many lines of code, you can define a string first.

const google_ana = `
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-*******"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-*******');
</script>
`
hexo.extend.injector.register('head_begin', google_ana)

Usage#

Take a look at the homepage, there is quite a lot of information, but for small sites, most of the data is not needed (:

umami#

umami introduces itself as an alternative to Google Analytics, with similar functionality to GA, which is sufficient for small sites. At the same time, it can be self-hosted (and recommended), which is more important for people who value privacy. In addition, the interface is much simpler and more elegant than Google Analytics.

The umami shared link for this site: umami | Yunfi's Blog, you can take a look.

Just set up, the data is a bit bleak

Setup#

If you don't want to self-host/don't have a server, you can also use the official demo: Login | umami

Setup documentation: Getting started | umami

Prerequisite tutorial: Visualize Nginx Management with Nginx Proxy Manager | Yunfi's Blog, which includes tutorials on installing Docker and setting up reverse proxy.

The docker-compose.yml I used:

version: '3'
services:
  umami:
    image: docker.umami.dev/umami-software/umami:postgresql-latest
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      APP_SECRET: replace_with_random_string
    depends_on:
      - db
    restart: always
  db:
    image: postgres:15-alpine
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - ./sql/schema.postgresql.sql:/docker-entrypoint-initdb.d/schema.postgresql.sql:ro
      - ./umami-db-data:/var/lib/postgresql/data
    restart: always

Default username: admin, default password: umami

Add a Monitored Site#

There's not much to say about this, just remember to copy the code and then follow the same steps as Google Analytics to inject the code.

umami can also share links, allowing non-administrators to see a less detailed statistics page in the site settings.