# Setup in-app custom events

## What are custom events?

Custom events are user-defined interactions or actions that you want to track specifically for your website or application. They allow you to measure and analyze user behavior that goes beyond standard page views or default analytics metrics. Custom events provide deeper insights into how users engage with your content, features, or products, enabling you to make data-driven decisions to improve user experience and achieve your business goals.

### Key components of custom events

Custom events in Cookie3 Analytics consist of four main components, two of which are required:

| Attribute                     | Description                                     | Example                                                       |
| ----------------------------- | ----------------------------------------------- | ------------------------------------------------------------- |
| Category (Required)           | Describes the type of event you want to track   | Link Clicks, Videos, Outbound Links, Form Events              |
| Action (Required)             | Specifies the action taken within the event     | For Video category: Play, Pause, Complete                     |
| Name (Optional - Recommended) | Identifies the specific element interacted with | Name of a video played, form being submitted                  |
| Value (Optional)              | A numeric value, often dynamically generated    | Price of a product added to cart, percentage of video watched |

{% hint style="warning" %}
**Important Notes:**

* The **Category** and **Action** fields are mandatory for every event.
* The **Value**, if included, must always be a number.
* All values are customizable based on the events you want to track.
  {% endhint %}

### How to track custom events with the Cookie3 Analytics snippet?

{% hint style="info" %}
Tracking custom events with the Cookie3 Analytics snippet is completely free—no additional costs involved.
{% endhint %}

Currently the only way to track custom events is with the use of Javascript on your site. In order to do this, you must call the `window.cookie3.trackEvent({category, action, name, value})` method from within your application code. For example, if you’d like to track all button clicks from the application with a specific class or id parameter, you can simply do the following:

```jsx
// Example implementation for tracking button clicks
document.addEventListener('DOMContentLoaded', function() {
    // Select all buttons with the class 'track-click'
    var buttons = document.querySelectorAll('.track-click');
    
    buttons.forEach(function(button) {
        button.addEventListener('click', function() {
            // Get button text or a data attribute for the name
            var buttonName = this.textContent || this.getAttribute('data-name');
            
            // Track the event
            window.cookie3.trackEvent(
                {
                    category: 'Button Click',  // Category
                    action: 'Click',         // Action
                    name: buttonName,      // Name (optional)
                    value: 1                 // Value (optional)
                }               
            );
        });
    });
});
```

This example demonstrates how to track button clicks using the Cookie3 Analytics snippet. Here's what the code does:

* It waits for the DOM content to be fully loaded before executing.
* It selects all buttons with the class 'track-click'.
* For each button, it adds a click event listener.
* When a button is clicked, it retrieves the button's text or a custom data attribute for the event name.
* It then calls the `window.cookie3.trackEvent()` method with appropriate parameters.

To use this code, you would need to add the 'track-click' class to any buttons you want to track. For example:

```html
<button class="track-click">Sign Up</button>
<button class="track-click" data-name="Learn More">Read Our Blog</button>
```

This implementation allows you to easily track button clicks across your website or application, providing valuable insights into user interactions.

### **Example Event Configurations**

#### **Tracking Call To Action Clicks**

* **Event Category:** Call to action
* **Event Action:** Button click
* **Event Name:** Solana Summer Campaign
* **Event Value:** (blank)

#### **Tracking User Reviews**

* **Event Category:** Reviews
* **Event Action:** Published Matomo Review
* **Event Name:** (blank)
* **Event Value:** 10


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cookie3.com/cookie3-analytics/setup-your-site-or-app/setup-in-app-custom-events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.