Tracking custom events

Track meaningful user actions by sending custom events with Vemetric.

Per default Vemetric automatically helps you to track pageviews and outbound link clicks without any additional setup.

But to gain better insights into your users’ behavior, Vemetric enables you to send custom events, to track basically any meaningful user action. For example you could track a CheckoutStarted event, or a CTAClicked event, too see how users interact with your product.

You can also send additional meta data for your custom events, like the Subscription Plan when the user sends a SubscriptionCreated event. Later on you can use this meta data to filter and group your events in Vemetric.

Vemetric offers you several ways to track custom events, let’s take a look at the different options.

Tracking events on the backend

Most of the time it’s best to track custom events on the backend, to gain reliable insights. For example when you get the information from your payment provider that a subscription was created, that’s the best time to also track the SubscriptionCreated event in Vemetric.

When tracking an event for a user that hasn’t been identified on the frontend yet, Vemetric will automatically create a new user. Just make sure that you always use the same identifier for a user, in the frontend, as well as in the backend - Vemetric will take care of assigning all events and sessions to that user accordingly.

To track events with the Node.js SDK, you can call the trackEvent function like this:

import { vemetric } from '../vemetric-client.ts';

await vemetric.trackEvent('MyCustomEvent', {
  userIdentifier: 'user-id',
  userDisplayName: 'John Doe',
  eventData: { key: 'value' },
});

Look at the Node.js SDK docs for a detailed explanation of the available parameters and how to initialize the Vemetric client.

To track events with the PHP SDK, you can call the trackEvent function like this:

$vemetric->trackEvent('SignupCompleted', [
  'userIdentifier'  => 'user-id',
  'userDisplayName' => 'John Doe',
  'eventData'       => ['key' => 'value'],
]);

Look at the PHP SDK docs for a detailed explanation of the available parameters and how to initialize the Vemetric client.

To track events with the Python SDK, you can call the track_event function like this:

vemetricClient.track_event(
  event_name="SignupCompleted",
  user_identifier="user-id",
  user_display_name="John Doe",
  event_data={"key": "value"},
)

Look at the Python SDK docs for a detailed explanation of the available parameters and how to initialize the Vemetric client.

To track events with the Go SDK, you can call the TrackEvent function like this:

err = client.TrackEvent(&vemetric.TrackEventOpts{
  EventName: "SignupCompleted",
  UserIdentifier: "user-id",
  UserDisplayName: "John Doe",
  EventData: map[string]any{
    "key": "value",
  },
})

Look at the Go SDK docs for a detailed explanation of the available parameters and how to initialize the Vemetric client.

Tracking events on the frontend

Of course you also have the option to track custom events on the frontend via the trackEvent function from one of our Frontend SDKs.

To track events with the HTML script, you can call the trackEvent function like this:

await window.vmtrc('trackEvent', 'MyCustomEvent', {
  eventData: { key: 'value' },
}

Look at the HTML script docs for a detailed explanation of the available parameters.

To track events with the JavaScript SDK, you can call the trackEvent function like this:

import { vemetric } from '@vemetric/web';

await vemetric.trackEvent('MyCustomEvent', {
  eventData: { key: 'value' },
}

Look at the JavaScript SDK docs for a detailed explanation of the available parameters.

To track events in React, you can call the trackEvent function like this:

import { vemetric } from '@vemetric/react';

await vemetric.trackEvent('MyCustomEvent', {
  eventData: { key: 'value' },
}

Look at the React SDK docs for a detailed explanation of the available parameters.

To track events in Astro, you can call the trackEvent function like this:

import { vemetric } from '@vemetric/astro';

await vemetric.trackEvent('MyCustomEvent', {
  eventData: { key: 'value' },
}

Look at the Astro SDK docs for a detailed explanation of the available parameters.

Data Attributes

No matter which SDK you’re using on the frontend, you’re able to track custom events by using specific data attributes on your HTML elements.

Below you can see an example of a button that tracks a custom event when clicked. You can use these attributes on any HTML element.

<button data-vmtrc="MyCustomEvent">Click me</button>

If you want to send additional metadata for the event, you can do it like this:

<button data-vmtrc="MyCustomEvent" data-vmtrc-key1="value1" data-vmtrc-key2="value2">Click me</button>

Getting started

Learn how to get started with Vemetric for tracking your product’s user interactions.

User Identification

Identify users to connect anonymous sessions with known profiles for deeper insights.