@comparaonline/event-tracker

@comparaonline/event-tracker

This library is an interface between any frontend application and event tracking platforms.

There's more documentation available for the library in compara's notion

Documentation

• Coding Conventions: Coding conventions and patterns used in this project
• Contributing Guidelines: Guidelines for contributing to the project
• Project Structure: Explanation of the project's directory structure

Installation

To install the library in your application use

yarn add @comparaonline/event-tracker

or

npm install @comparaonline/event-tracker

Usage example

After installing the package you can send an event using the function track. For example:

import { track, BUSINESS_UNIT, COUNTRY_CODE } from '@comparaonline/event-tracker';

// Example of form step render event
track({
  name: 'form_step_render',
  data: {
    app_name: 'my-app',
    app_version: '1.0.0',
    country_code: COUNTRY_CODE.CL,
    business_unit: BUSINESS_UNIT.CAR_INSURANCE,
    user_type: 'anonymous',
    quote_id: '12345',
    accordion_index: '0',
    accordion_name: 'personal-information'
  }
});

// Example of transaction event
track({
  name: 'transaction',
  data: {
    app_name: 'my-app',
    app_version: '1.0.0',
    country_code: COUNTRY_CODE.CL,
    business_unit: BUSINESS_UNIT.CAR_INSURANCE,
    user_type: 'registered',
    user_id: 'user-123',
    transaction_id: 'trans-456',
    amount: 15000,
    currency: 'CLP'
  }
});

// Example of one-click checkout modal open event
track({
  name: 'one_click_checkout_modal_open',
  data: {
    app_name: 'my-app',
    app_version: '1.0.0',
    country_code: COUNTRY_CODE.CL,
    business_unit: BUSINESS_UNIT.CAR_INSURANCE,
    user_type: 'registered',
    user_id: 'user-123',
    offer_id: 'offer-789',
    quote_id: 'quote-456'
  }
});

The library will automatically send the event to all enabled trackers (currently ABTasty and Heap).

Trackers

The trackers currently supported by the library are:

• ABTasty: Used for A/B testing and analytics.
• Heap: Used for user behavior analytics.

The library is configured to use both trackers by default. The events are automatically sent to both trackers when you use the track function.

Event Types

The library supports various event types:

• attached_policy_to_user: Track when a policy is attached to a user
• cancel_policy_requested: Track when a user requests a policy cancellation
• cep_autocompleted: Track when a postal code is autocompleted
• form_step_render: Track when a form step is rendered
• one_click_checkout_completed: Track when a one-click checkout is completed
• one_click_checkout_modal_open: Track when a one-click checkout modal is opened
• otp_error: Track when an OTP error occurs
• payment_method_updated: Track when a payment method is updated
• person_autocompleted: Track when person information is autocompleted
• transaction: Track a transaction
• tutorial_begin: Track when a tutorial begins
• tutorial_complete: Track when a tutorial is completed
• user_account_onboarding_completed: Track when user onboarding is completed
• user_multi_travel_selected: Track when user selects multi-travel
• vehicle_autocompleted: Track when vehicle information is autocompleted
• profile_updated: Track when user profile information is updated
• travel_companion_upserted: Track when a user's travel companion information is upserted
• travel_companion_removed: Track when a user's travel companion information is removed
• emergency_contact_upserted: Track when a user's emergency contact information is upserted
• emergency_contact_removed: Track when a user's emergency contact information is removed
• successful_payment: Track when user payment is completed

Each event type requires specific data. You can import the type definitions to ensure you're providing the correct data:

import { track, BUSINESS_UNIT, COUNTRY_CODE } from '@comparaonline/event-tracker';
import type { FormStepRenderData } from '@comparaonline/event-tracker';

const eventData: FormStepRenderData = {
  app_name: 'my-app',
  app_version: '1.0.0',
  country_code: COUNTRY_CODE.CL,
  business_unit: BUSINESS_UNIT.CAR_INSURANCE,
  user_type: 'anonymous',
  quote_id: '12345',
  accordion_index: '0',
  accordion_name: 'personal-information'
};

track({
  name: 'form_step_render',
  data: eventData
});

Migrating from previous versions

If you're migrating from version 6.x or earlier, there are significant changes to the API. The main changes are:

• The sendEvent function has been replaced with track
• Event types and constants are now exported directly from the main module
• There are no longer separate endpoints like SNOWPLOW_APP or TAG_MANAGER_APP
• Event tracking is handled automatically to all enabled trackers

To migrate, update your imports and replace your event sending code:

Old code:

import { endpoints, sendEvent, types } from '@comparaonline/event-tracker/';
import {
  carInsuranceGenerators,
  FormSubmitParams,
} from '@comparaonline/event-tracker/eventGenerators/carInsurance';

const rawFormSubmit: FormSubmitParams = {
  appVersion: '1.0',
  appName: 'test-module',
  countryCode: types.CountryCodeTypes.chile,
  formId: 'asdf',
  formType: types.FormTypes.wizard,
  formSubmitStatus: types.FormStatusTypes.successful,
  funnelType: types.FormRelatedTypes.FunnelTypes.quote,
  formValues: { a: 'asdf', b: 'sdf' },
};
const formSubmit = carInsuranceGenerators.generateFormSubmit(rawFormSubmit);
sendEvent(endpoints.SNOWPLOW_APP, formSubmit);

New code:

import { track, BUSINESS_UNIT, COUNTRY_CODE } from '@comparaonline/event-tracker';

track({
  name: 'form_step_render',
  data: {
    app_name: 'test-module',
    app_version: '1.0',
    country_code: COUNTRY_CODE.CL,
    business_unit: BUSINESS_UNIT.CAR_INSURANCE,
    user_type: 'anonymous',
    quote_id: 'asdf',
    accordion_index: '0',
    accordion_name: 'form-step'
  }
});