How to integrate umami to your website for free

March 14, 2021 · 392 words · 2 min · hugo ladder Tutorial analytics umami

This article is about how to integrate umami website analytics to your website for free. The database use postgres with 500M storage limit provided by supabase.

The umami service is hosted with vercel. Thanks to the excellent service capabilities of cloud vendors, you can integrate umami in less than 10 minutes. You can see the umami dashboard by clicking the Dashboard.

Create a database

The database use postgres with 500M storage limit provided by supabase. You can create a supabase account, click new project, and enter the database passowrd to create an ProgresSQL database service.

cN3Zg4

It will take a few minutes to create the database service, and you can get the DATABASE_URL after it’s done.

image-20220815182141638

Hosting umami

The umami service is hosted with vercel, Once you have created the database instance, you can deploy the umami service with click deploy button in the Running on Vercel document.

  1. Fork the https://github.com/mikecao/umami project to your GitHub account.

  2. Create an account on Vercel.

  3. From the dashboard page click Import Project then specify the URL to your fork of the project on GitHub.

  4. Add the required environment variables to your Vercel project. These values are defined in the Configure umami step from Install.

    1. DATABASE_URL: Connection string for your database. This is the only required variable.
    2. TRACKER_SCRIPT_NAME: Allows you to assign a custom name to the tracker script different from the default umami. This is to help you avoid some ad-blockers. I used hugo-ladder on this project.

  5. Enter yarn build && yarn update-db to the BUILD COMMAND, which will migrate the tables of umami to database automatically.

  6. Deploy and visit your application at .vercel.app.

  7. Follow the Getting started guide starting from the Login step and be sure to change the default password.

gePzXI

Of course, if you want to import tables yourself, you can also get the tables from here https://github.com/umami-software/umami/blob/master/sql/schema.postgresql.sql.

umami configuration

After deploying umami in vercel you will get a <deploy-id>.vercel.app address which login with the default account: admin and password: umami.

You can change the default password and Add webiste, enter the Name and Domain, and click enable share URL so that anyone can access the dashboard.

Then you can get data-website-id and src values by click Get tracking code，enter the value to the hugo-ladder configuration params.analytics.umami.website_id , params.analytics.umami.url.

OZcU7U

In the end, you can get the website statistics analytics dashboard.🎉🎉🎉

Link to original article: https://guangzhengli.com/en/blog/en/how-to-integrate-umami-for-free-to-blog-site/

Related Resources