tutorial
4 min read
5/13/2024
How to Self-Host Web Analytics for Free with Umami and Vercel
In today's digital landscape, understanding user behavior on your website is crucial for making informed decisions and improving user experience. While Google Analytics has long been the go-to solution for tracking website metrics, concerns about data privacy and control have led many to seek alternative options. Umami offers a simple, fast, and privacy-focused open-source analytics solution that puts you in control of your data without compromising user privacy.
nextjs
analytics
vercel
next
## What is Umami?
Umami stands out as a compelling alternative to Google Analytics. It's designed with simplicity, speed, and privacy in mind. Unlike Google Analytics, which collects vast amounts of user data and can potentially compromise privacy, Umami ensures that user data remains anonymous and respects their privacy rights.
### Why Choose Umami?
- **Focuses on Privacy**: Umami prioritizes user privacy by keeping user data anonymous.
- **Lightweight and Fast**: Umami boasts a lightweight design for faster loading times on your website.
- **Simple Setup**: The setup process is streamlined and user-friendly.
### Running on Vercel
This guide utilizes [Vercel](https://vercel.com/), the company behind Next.js, to host your Umami instance. They offer free hosting perfect for Next.js applications.
**Here's what you'll need:**
* A GitHub Account
* A Vercel Account
### Setup
1. **Fork the [Umami project](https://github.com/umami-software/umami):** Head over to GitHub and fork the official Umami project to your account.
2. **Create a [Vercel](https://vercel.com/) Account:** If you haven't already, create a free Vercel account.
3. **Import Project:** In your Vercel dashboard, click "Import Project" and enter the URL to your forked Umami project on GitHub.
4. **Environment Variables:** Add the required environment variable `DATABASE_URL`. Set it to `null` for now (we'll configure the database later).
5. **Create a Vercel Postgres Database:** Navigate to the "Storage" tab in your Vercel dashboard and create a new Vercel Postgres database.
6. **Set Up Database Environment Variable:** Go to the "Settings" tab and select "Environment Variables" from the left panel. Reveal the `POSTGRES_URL` and copy the value. Edit the `DATABASE_URL` variable and paste the copied URL, removing the last part (`?sslmode=require`).
**Example:**
```
DATABASE_URL=postgres://username:mypassword@****************:5432/verceldb
```
7. **Deploy and Access Umami:** Navigate to the "Deployments" tab, click the "..." button on your first instance, and redeploy it. You'll find the project URL under the "Domains" section in the "Project" tab.
### Logging In
Your Umami installation comes with a default admin account with the username `admin` and password `umami`. It's crucial to change this password upon initial login.
1. **Access Login Page:** Use the project URL obtained earlier to access the Umami login page.
2. **Change Password:** Log in with the default credentials and navigate to "Settings" in the header. Then, go to "Profile" and click the "Change password" button to set a new, secure password.
### Adding Your Website
1. **Access Settings:** Log in to Umami and navigate to "Settings" in the header.
2. **Add Website:** Click on "Websites" and then the "+ Add website" button.
3. **Fill Out Website Details:** Provide a name for your website (typically the domain name) and the actual domain URL. Click "Save" to finalize.
### Collecting Website Data
1. **Obtain Tracking Code:** Log in to Umami, navigate to "Settings," then "Websites," and click the "Edit" button for the website you want to track.
2. **Locate Tracking Code:** The tracking code will be displayed under the "Tracking Code" tab.
3. **Implement Tracking Code:** Copy the code and paste it into the `<head>` section of your website's code.
### Next.js Application
If your site was built with **Next.js**, insert the above code block using the `next/script` component.
```tsx title="layout.tsx"
import Script from "next/script"
```
```tsx title="layout.tsx"
<html lang="en">
<body>
<main>{children}</main>
<Script
defer
src="<URL>.vercel.app/script.js"
data-website-id="<DATA-WEBSITE-ID>"
/>
</body>
</html>
```
Replace `<URL>.vercel.app` with your actual Umami project URL and `<DATA-WEBSITE-ID>` with the ID provided by Umami for your website.
### Verify Data Collection
After implementing the tracking code and visiting your website, data should start populating in your Umami dashboard shortly.
