CDP Events Tracker

A lightweight, extensible client-side library for tracking custom user events (such as signups, purchases, and newsletter interactions) and sending them to Customer Data Platform (CDP).

📦 Installation

npm install cdp-events-tracker

import { 
  CDPEventsTracker, 
  EnvironmentType,
  PageActionPoint,
  CustomEvents,
  EventType, 
  PageMetadata,
} from "cdp-events-tracker";

const sessionManager = new CDPEventsTracker(
  "NATION_AFRICA",
  EnvironmentType.production,
  "https://example.com/",
  "api-key",
  {
    articleId: '5095576',
    articleTitle: 'Uniting Kenya through sport: Faith Kipyegon chases history in Nike-backed record bid',
    articleTags: 'Prime, Sports, Divert Me, Inspire Me',
    authors: 'Elias Makori',
    articlePublishDate: '2025-06-26T06:40:37Z',
    articleThumbNail: 'https://example.com/resource/image/4737986/landscape_ratio3x2/1200/800/5c291d8180f5b8831d9609197bcecd01/GM/kipyegon.jpg',
    site: 'Nation',
    rootTitle: 'Kenya',
    premium: true,
    isPuzzlesPage: false,
    pageTitle: 'Athletics',
}
);

tracker.dispatchEvent(PageActionPoint.newSubscriptionPurchase, {
  purchase_id: "c1aab9d7-9b14-48da-9ff3-89cdffc6f47a",
  purchase_date: "2025-06-26T06:40:37Z",
  expiry_date: "2025-06-30T06:40:37Z",
  amount_paid: 1500,
  package_type: "ANNUAL",
  payment_option: "dpo",
  recurrent: true,
});

Supported Events via HTML attributes

The event tracker captures additional events through custom data attributes applied to target elements. To enable tracking, add attributes like the following to the relevant elements:

data-cdp-role="navbar_subscribe-btn"  
data-cdp-event="navbar_subscribe_btn_click"

<-- Below is an example -->
  <a
    href="https://example.com/subscribe"
    type="button"
    class="default-btn sm color-set-color-2 hidden"
    id="account-menu_subscribe-btn"
    data-cdp-role="navbar_subscribe-btn"
    data-cdp-event="navbar_subscribe_btn_click"
  >
    Subscribe
  </a>

Below is a sample of the attributes you should impelement in the target elements within the website

  data-cdp-role="article_author-profile-link"
  data-cdp-role="paywall_subscribe-btn"
  data-cdp-role="navbar_search-btn"
  data-cdp-role="navbar_signin-btn"
  data-cdp-role="navbar_subscribe-btn"
  data-cdp-role="article_newsletter-subscribe-form"
  data-cdp-role="universal_ad-wrapper"
  data-cdp-role="universal_ad-script"