Self-Hosting

Umami Web Analytics: Event Tracking, Dashboard Goals, and Client-Side SDK Integration (Part 2)

Learn how to implement client-side event tracking, configure conversion goals, and customize Umami analytics.

Julio
· 1 min read

Event Tracking and Conversion Goals in Umami

Umami tracks website visitors without cookies. Expanding its script integration allows tracking user interactions like clicks and form submissions.

Integrating the Tracking Script

Embed the Umami script tag in your HTML file inside the <head> block:

<script async defer src="https://analytics.yourdomain.com/script.js" data-website-id="YOUR_WEBSITE_ID"></script>

For Next.js applications, use the next/script component:

import Script from 'next/script';

export default function MyPage() {
  return (
    <Script
      src="https://analytics.yourdomain.com/script.js"
      data-website-id="YOUR_WEBSITE_ID"
      strategy="afterInteractive"
    />
  );
}

Custom Event Tracking

Track user events by adding CSS classes or data attributes to elements:

<button class="umami--click--signup-button">Sign Up</button>

Or trigger events programmatically in JavaScript:

umami.track('Purchase', { value: 19.99, product: 'Pro Plan' });