Tracking custom events

Track meaningful user actions by sending custom events with Vemetric.

If you integrate Vemetric via the HTML script or the NPM Package, it 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.

On the backend, it’s only possible to track events for identified users, checkout the Docs for User Identification for more infos.

At the moment, Vemetric only offers you a Node.js SDK to track custom events on the backend. I’m planning to add many more SDKs in the future, so please reach out if you need a specific SDK for your language / framework.

Node.js SDK

The Node.js SDK offers you a trackEvent function, which you can use to track custom events from your Node.js application.

You have to pass the userIdentifier of your user, so that the event can be associated with the correct user. Additionally you can also pass eventData which will be saved as the metadata for the event.

With the userData you can pass additional meta data for the user. Checkout the User Identification docs for more information.

try {
  await vemetricClient.trackEvent('OrganizationCreated', {
    userIdentifier: user.id,
    eventData: { organizationId: String(organization.id) },
    userData: { setOnce: { createdOrganization: true } },
  });
} catch (err) {
  logger.error({ err }, 'Track event error');
}

Take a look at the Node.js SDK docs for more information on how to initialize and integrate the SDK into your backend.

Rest API

Coming soon

The docs for the Rest API will follow soon, if you want to be an early adopter please reach out.

Tracking events on the frontend

Of course you also have the option to track custom events on the frontend, so you can track events as soon as the user interacts with your UI. Below you can see how to send custom events depending on if you integrated Vemetric via the HTML script or the NPM Package.

HTML script

Since you’ve added Vemetric via the script tag, you can interact with the vmtrc object on the window object.

Below you can see an example of how to track a custom event. The third parameter with the eventData object is optional, so you can also track an event without any additional data.

You can also pass a userData object to save additional meta data for the user. Checkout the User Identification docs for more information.

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

NPM Package

By using the Vemetric NPM Package, you can import the vemetric object and use the trackEvent function to track custom events.

The second parameter with the eventData object is optional, so you can also track an event without any additional data.

You can also pass a userData object to save additional meta data for the user. Checkout the User Identification docs for more information.

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

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

Data Attributes

Both the HTML Script and the Web Browser SDK, offer you the ability 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>