Skip to content
Zenith Docs

Analytics

If you want to track your resume’s traffic, Zenith integrates with two analytics services out of the box: Umami and PostHog. Both of them are configured to work in a cookie-less way, respecting the privacy of your visitors and removing the need for cookie banners.

Umami setup

Umami provides the fastest way to setup a simple analytics for your website. It offers 10K events per month for free, which should be more than enough for a personal resume.

To setup Umami, you need to:

  1. Create an account using their sign up form.

  2. Go through their onboarding process and create a new site. You can provide local website address (localhost:4321) if you don’t have a domain yet.

  3. From the “Add tracking code” step, copy the value of data-website-id attribute from the script tag. If you miss this step, go to Website > Your project name > Edit and copy value of the Website ID field.

  4. To test the analytics locally, create .env file in the root of your project, and add PUBLIC_UMAMI_WEBSITE_ID=copied_website_id variable. To add analytics to your production website, set the PUBLIC_UMAMI_WEBSITE_ID in the environment variables of your hosting provider.

PostHog setup

PostHog is a great choice if besides the basic analytics service you want to record user sessions. The service offers 1 million free events and 5 000 free session recordings per month.

To setup PostHog, you need to:

  1. Create an account using their sign up form. Remember to check if it correctly detected your cloud region (US vs EU).

  2. Create an organization. It will create a “Default project” automatically.

  3. From the project’s page go to Project > General and find the Web snippet section.

  4. From the snippet copy the project id and api host.

<script>
  !function(t,e) {/* function body */}
  posthog.init('project_id_to_copy',{api_host:'api_host_to_copy', /* ...rest of the config */})
</script>
  1. To test the analytics locally, create .env file in the root of your project, and add PUBLIC_POSTHOG_API_KEY=copied_project_id and PUBLIC_POSTHOG_API_HOST=copied_api_host variables. To add analytics to your production website, set those environment variables in your hosting provider.

Tracking events

You can use the trackEvent function to send custom events to the analytics service you configured. The function accepts two arguments: name of the event and optional object with event properties.

We already used this function to implement pdf_downloaded event that triggers when user clicks the resume download button. You can find the implementation here