cdp-events-tracker is a lightweight TypeScript library that collects and sends user interaction data to your Customer Data Platform (CDP). It supports event queuing, batching, and Beacon API for optimal delivery
npm install cdp-events-trackerA 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).
---
``bash`
npm install cdp-events-tracker
`ts
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,
});
`
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:
`HTML
data-cdp-role="navbar_subscribe-btn"
data-cdp-event="navbar_subscribe_btn_click"
<-- Below is an example -->
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
`
Below is a sample of the attributes you should impelement in the target elements within the website
`bash``
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"