Appearance

Installation ​

The hubtel event publisher package generally works with any frontend framework. The package is published on the Hubtel NPM registry and can be installed using npm or yarn. The instructions below show how to install the package in your project specifically for Nuxt.js and Next.js applications.

  1. Copy the snippet below and paste into the .npmrc file in your project's root folder. If your project doesn't have a .npmrc file, create one. This is to authenticate your project with the Hubtel NPM registry.

    txt
    @hubtel:registry=https://pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/registry/

always-auth=true

; begin auth token
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/registry/:username=hubtel
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/registry/:_password=YmFibzJ5dHZ4bGRvbWZ0ZHZ5NzZ3czczdG1ueTVqanJnYW0ycTdkeWhpbXRoajNobGxhcQ==
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/registry/:email=npm requires email to be set but doesn't use the value
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/:username=hubtel
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/:_password=YmFibzJ5dHZ4bGRvbWZ0ZHZ5NzZ3czczdG1ueTVqanJnYW0ycTdkeWhpbXRoajNobGxhcQ==
//pkgs.dev.azure.com/hubtel/_packaging/hubtel/npm/:email=npm requires email to be set but doesn't use the value
; end auth token

  1. Install Event Publisher:

    b
    npm i @hubtel/event-publisher

Setting up Event Publisher ​

Create a new instance of the HubtelEventPub class and pass in the necessary configuration options. The HubtelEventPub class is the main class that provides the methods for logging events. The instructions below show how to set up the event publisher in a Nuxt or Next.js application.

Nuxt ​

  1. Create a composable file in your project /composables folder with the name useEventPublisher.ts. In the file, copy the code below and replace the placeholders with the appropriate values.
ts
//composables/useEventPublisher.ts
import pkg from "~/package.json";
import { HubtelEventPub } from "@hubtel/event-publisher";

const { version } = pkg || {};
export const useEventPublisher = () => {
  const eventPublisher = new HubtelEventPub({
    appId: "application-id", 
    clientToken: "your-client-token",
    appName: "application-name", 
    appVersion: version, 
    sectionName: "application-id", 
    eventAnalyticsApiToken: "your-event-analytics-api-token", 
    sendToEventAnalytics: false,
    sendToEventsPortal: false,
  });
  return eventPublisher;
};
  1. Create a plugin file in you project /plugins folder with the name event-publisher.ts. This will initialize to automatically collect events in your application.
ts
//plugins/event-publisher.ts
import { useEventPublisher } from "~/composables/useEventPublisher";

export default defineNuxtPlugin(() => {
   useEventPublisher()
        .initObservability();
});

Next.js ​

  1. In your utils folder, create a file event-publisher.ts
ts
import pkg from "~/package.json";
import { HubtelEventPub } from "@hubtel/event-publisher";

const { version } = pkg || {};
export const eventPublisher = new HubtelEventPub({
  appId: "application-id", 
  clientToken: "your-client-token",
  appName: "application-name", 
  appVersion: version, 
  sectionName: "application-id", 
  eventAnalyticsApiToken: "your-event-analytics-api-token", 
  sendToEventAnalytics: false,
  sendToEventsPortal: false,
  rumConfig: {
    // override default config when necessary
  },
  logsConfig: {
    // override the default logging config
  },
});
  1. Create a client component in your project /components folder with the name Observability.tsx.
tsx
//components/Observability.tsx
"use client";
import { eventPublisher } from "./eventPublisher";

eventPublisher.initObservability();

export default function ObservabilityInit() {
  return null;
}
  1. Modify your root layout located under the app directory(usually app/layout.tsx) to include the ObservabilityInit component.
tsx
import Observability from "./components/Observability"; 


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        {/* Initialize event publisher  */}
        <Observability />
        {children}
      </body>
    </html>
  );
}

Usage ​

The event publisher provides methods for logging product event and developer logs. These methods are categorized into two main groups: Logging Product Events and Developer Logs.

  1. Logging Product Events ​

Product events are user interactions, custom events, and performance metrics that are logged with the aim of providing insights into user behavior and application performance. The method follows a predefined structure that needs to be adhered to for consistency. To log a product event, use the logAnalyticsEvent method on the HubtelEventPub instance. See usage example below:

js
eventPub.logAnalyticsEvent({
  eventType: "Regular",
  actionName: "user_registration",
  // additional properties
});

For more on information on the parameters that can be passed to the logAnalyticsEvent method, see the documentation.

  1. Developer Logs ​

Developer logs are used to log general information, errors, warnings, and debugging information. The method follows a predefined structure that needs to be adhered to for consistency. To log a developer event, use the info, error, warn, or debug method on the HubtelEventPub instance. See usage examples below:

js
eventPub.info({
  eventType: "Regular",
  actionName: "user_logged_in",
  // additional properties
});

For detail instruction on developer logs, see the documentation.