@comparaonline/event-tracker
    TypeScript icon, indicating that this package has built-in type declarations

    5.7.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

    148

    Version

    5.7.1

    License

    MIT

    Unpacked Size

    67.2 kB

    Total Files

    123

    Last publish

    Collaborators

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