Custom Events

After the basic script is running, the next step is “tagging”. This allows you to capture user interactions like button clicks, form submissions, or purchases that cannot be tracked automatically.

Basic Rules

Character Limit: Event names are limited to 50 characters.
Name Required: Events cannot be sent without a name.

Understand Event Types

We distinguish between two types of events:

Property-Type Events

Simple Tracking. Sends only the name of the action.Example: “Button clicked”, “Menu opened”.

Payload Events

Advanced Tracking. Sends the name plus additional data (context).Example: “Product added to cart” (incl. product name, price, category).

Critical Privacy Notice bchic is designed to work completely without personally identifiable information (PII).Never use the following data in your events:

Email addresses
Names or usernames
Phone numbers
IP addresses
User IDs (in plain text)

Allowed are: Product IDs, categories, prices, generic status messages (e.g., “Plan: Pro”).

Method 1: HTML Attributes (No-Code)

This is the easiest method. You simply add attributes to your HTML elements – our script handles the rest automatically.

Choose Event Type

Decide if you just want to know IF something happened (Property), or WHAT exactly happened (Payload).

Add Attributes

Add the data-bchic-event attribute to the HTML element.

Simple Event
Event with Data (Payload)

Syntax: data-bchic-event="NAME"

<!-- Before -->
<button class="btn">Download</button>

<!-- After -->
<button class="btn" data-bchic-event="whitepaper-download">
    Download
</button>

Syntax:

Name: data-bchic-event="NAME"
Data: data-bchic-event-{KEY}="{VALUE}"

<button class="add-to-cart"
        data-bchic-event="add-to-cart"
        data-bchic-event-product="premium-plan"
        data-bchic-event-price="29.99">
    Add to Cart
</button>

Result: Sends the event add-to-cart with the data { product: 'premium-plan', price: '29.99' }.

Note: Data via HTML attributes is always transmitted as text (string). For real numbers or booleans, use Method 2 (JavaScript).

Test

Click on the element and check your bchic Dashboard. The event should appear immediately. If not, reload the dashboard once.

Method 2: JavaScript (For Developers)

For full flexibility or dynamic applications, use the function call bchic(). This method is ideal if you have data from an API or data types (numbers, booleans) are important.

Simple
With Payload

const button = document.getElementById('signup-button');

button.addEventListener('click', () => {
// Sends only the name
bchic('track', 'signup_click');
});

const button = document.querySelector('.add-to-cart');

button.addEventListener('click', () => {
bchic('track', 'add-to-cart', {
    product: 'premium-plan',
    price: 99.99,     // Saved as number
    currency: 'EUR',  // Important for revenue statistics
    is_featured: true // Saved as boolean
});
});

Best Practices

To keep your data clean, we recommend the following conventions:

Naming

Use Kebab-Case:

✅ newsletter-signup
❌ Newsletter Signup

Be Specific:

✅ pricing-cta-click
❌ click

Consistency: Do not use signup on Page A and register on Page B for the same action.

Privacy Checklist

Before implementing an event, ask yourself the following questions:

Is an email address in the payload? ❌ (Forbidden)
Is a User ID included? ❌ (Only allowed hashed or as internal ID)
Is the data general enough? ✅ (e.g., product category instead of username)

Platforms

Application

Understand Event Types

Property-Type Events

Payload Events

Method 1: HTML Attributes (No-Code)

Method 2: JavaScript (For Developers)

Best Practices

Platforms

Application

​Understand Event Types

Property-Type Events

Payload Events

​Method 1: HTML Attributes (No-Code)

​Method 2: JavaScript (For Developers)

​Best Practices

Understand Event Types

Method 1: HTML Attributes (No-Code)

Method 2: JavaScript (For Developers)

Best Practices