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 administrators better understand users and optimize website design and marketing strategies to improve user satisfaction and conversion rates.

For us small site owners, 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> tag to the <head> of the HTML. Therefore, 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 to 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 certain 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 property under this GA account. Finally, on the "Start collecting data" page, select the platform "Web" and enter a 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 property - 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- to the corresponding _config.<theme name>.yaml file. However, Google has stopped using codes starting with UA- and switched to codes starting with G-. The original UA- codes will no longer collect information starting from July 1, 2023. Most themes have not yet adapted to this change, so you can only use the method of injecting code mentioned above. Since the code is long, 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 like ours, most of the data is not needed (:

umami#

umami is an alternative to Google Analytics, with similar functionality, which is sufficient for small sites. It can also be self-hosted (and recommended), which is even more important for those 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.

Here is 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 Site for Monitoring#

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 also allows you to share links, so that non-admin users can see a less detailed statistics page in the site settings.