Tracking

HDS provides support to track web analytics (page views) and custom events using OpenPanel.

Initalization

To enable tracking, add the following:

import { track } from '@hyvor/design/marketing';

// usually within a onMount lifecycle at the root
track.init({
	// set global context for all events
	context: {
		component: 'post',
		// ... 
	}
});

This will start tracking page views only on production (on hyvor.com domains). forceTrack can be set to true for testing in development.

Tracking Custom Events

To track custom events, use the following code:

import { track } from '@hyvor/design/marketing';
track.event('signup', { method: 'google' });

Use event tracking for feature usage analytics, conversion tracking, experiments, and more.

Identify User

The identify method can be used to associate user information with the current profile:

import { track } from '@hyvor/design/marketing';
track.identify('USER_ID', {
    name: 'John Doe',
    email: '[email protected]',
    avatar: 'https://example.com/avatar.jpg'
});

Note that the HyvorBar automatically calls identify when it is initialized and when the user logs in. Therefore, in most cases, you don't need to call it manually.