<h1>Track events</h1>
<p>Besides pageviews, Umami is also able to track events that occur on your website. There are two ways to record
events in Umami, using <strong>CSS classes</strong> or using <strong>Javascript</strong>.</p>
<h2>Using CSS classes</h2>
<p>To enable events, simply add a
special CSS class to the element you want to track.</p>
<p>For example, you might have a button with the following code:</p>
<pre><code>&#x3C;button id="signup-button" class="button">Sign up&#x3C;/button>
</code></pre>
<p>Add a class with the following format:</p>
<pre><code>umami--&#x3C;event>--&#x3C;event-name>
</code></pre>
<p>So your button element would now look like this:</p>
<pre><code>&#x3C;button id="signup-button" class="button umami--click--signup-button">Sign up&#x3C;/button>
</code></pre>
<p>When the user clicks on this button, Umami will record an event named <code>signup-button</code> with an event type of <code>click</code>.</p>
<p>The event can be any <a href="https://developer.mozilla.org/en-US/docs/Web/Events">Javascript event</a> that can be
applied to an element.</p>
<p>Note: be careful not to attach to any events that fire continuously like <code>scroll</code> and <code>drag</code>. </p>
<h2>Using Javascript</h2>
<p>You can also record events manually using the <code>window.umami</code> object. To accomplish the same thing as the above
CSS method, you can do:</p>
<pre><code>const button = document.getElementById('signup-button');

button.onclick = () => umami('Signup button click');
</code></pre>
<p>In this case, Umami will record an event named <code>Signup button click</code> with an event type of <code>custom</code>.</p>
<p>If you want to use your own event type instead of <code>custom</code>, see <a href="/docs/tracker-functions">Tracker functions</a>.</p>
<h2>View events</h2>
<p>Once your events are recorded, they will be available on your website <strong>Details</strong> page.</p>


Documentation

Basics

Advanced

Guides