Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@comparaonline/event-tracker

5.4.1 • Public • Published

@comparaonline/event-tracker

npm code style: prettier

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

To read about what applications are currently using this library and what events are currently being sent check this project's wiki page

Installation

To install the library in your application use

yarn add @comparaonline/event-tracker

Usage example

After installing the package you can send an event using the function sendEvent. For example, to send an event to snowplow (assuming it was already initialized), you could do it with the following code:

import {
  sendEvent,
  endpoints,
  EventTypes,
  EventInterfaces
} from "@comparaonline/event-tracker";
 
const event: EventInterfaces.Capture = {
  eventName: EventTypes.capture,
  appName: "example_app_name",
  appVersion: "example_app_version",
  countryCode: "cl",
  businessUnit: "example_business_unit",
  division: "example_division",
  product: "example_product",
  userEmail: "example_email",
  userName: "example_user"
};
 
sendEvent(endpoints.SNOWPLOW_APP, eventData);

Or alternatively:

import {
  sendEvent,
  endpoints,
  EventTypes,
  EventInterfaces
} from "@comparaonline/event-tracker";
 
const event = {
  eventName: EventTypes.capture,
  appName: "example_app_name",
  appVersion: "example_app_version",
  countryCode: "cl",
  businessUnit: "example_business_unit",
  division: "example_division",
  product: "example_product",
  userEmail: "example_email",
  userName: "example_user"
};
 
sendEvent(endpoints.SNOWPLOW_APP, <EventInterfaces.Capture>eventData);

To do the same for tag manager you would need to change the last line of the code to:

sendEvent(endpoints.TAG_MANAGER_APP, eventData);

Event requirements

Events of this library require:

  • Endpoint: an endpoint name that signals where the event is going to be sent
  • Event name: the name of the event that is being sent
  • Event properties: properties of the event. *Each event type has its own required properties, so it's recommended to use the interfaces provided in EventInterfaces

All of these are explained in the following sections.

Endpoints

The endpoints supported by the library are in the object endpoints of the library. The ones currently supported are:

  • SNOWPLOW_APP: the library can initialize snowplow with the functions initializeSnowplow and initializeTracker located in snowplowInitializer. initializeTracker needs an app id as input. The ones supported by the library are in snowplowAppIds and are separated by environment (development or production) and country code (cl,br, co, ar). An example of this would be:
import {
  snowplowInitializer,
  snowplowAppIds
} from "@comparaonline/event-tracker";
 
initializeSnowplow = (environment, countryCode) => {
  snowplowInitializer.initializeSnowplow();
  snowplowInitializer.initializeTracker(
    snowplowAppIds[countryCode],
    environment
  );
};
  • TAG_MANAGER_APP: currently the library doesn't come with a way to initialize tag manager and it assumes that it exists in the browser.

Event names

All the events that are currently supported by the library are in the enum EventTypes. Here are the explanations of each one:

  • capture : The user's email is succesfully captured. Should be triggered after the user submits the capture form
  • captureForm: The user clicks on a link that gets him to a capture form
  • cardImpression: The card of a specific product is loaded in the user's screen
  • clickFooterLink: The user clicks on a link in the footer of the website
  • clickHeaderLink: The user clicks on a link in the header of the website
  • clickTip: The user clicks on a tip that explains something about the business unit
  • formFieldError: There's any kind of error in a form's field
  • formStep: The user completes a step of a form
  • formStepRender: A form's step is rendered on the user's screen
  • makeReview: The user writes a review for a product
  • openChat: The user opens Whatsapp chat
  • simulation: The user performes a simulation
  • useFlter: The user clicks on a filter
  • viewDetails: The user clicks on view details on a product card

see each event properties for more details

Event Properties

Each event of this library requires some event properties. Some of these properties are common to all events

Property Mandatory Property data type Property category Property description
countryCode yes string event-property Site's domain country
businessUnit yes string event-property Business unit where the user is browsing
appName yes string event-property Name of the app that is sending events with the library
appVersion yes string event-property Version of the appthat is sending events with the library

The other properties are specific to each event and it's recommended to use the interfaces provided in EventInterfaces.

Publishing a new version

Important: The content to be uploaded is the build from the dist directory. You shouldn't try to publish the root directory.

We use np as part of the publishing process. The recommended way to publish a new version is:

$ npm run np -- [version]

Example

$ npm run np -- 4.0.2

This will test, build, update the package version and commit it. Then, the content of the dist directory will be published to the npm registry.

Install

npm i @comparaonline/event-tracker

DownloadsWeekly Downloads

98

Version

5.4.1

License

MIT

Unpacked Size

49.1 kB

Total Files

90

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar