6️⃣Setup in-app custom events

Custom events are user-defined interactions or actions that you want to track specifically for your website or application.

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

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.

How to track custom events with the Cookie3 Analytics snippet?

Tracking custom events with the Cookie3 Analytics snippet is completely free—no additional costs involved.

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:

// 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:

<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