# cptn-browser > Browser JS library for sending events to cptn.io ingestion API Latest version **1.0.7** (published 2023-06-08) · MIT license · 0 weekly downloads ## Install ```sh npm install cptn-browser pnpm add cptn-browser yarn add cptn-browser bun add cptn-browser ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.7 | | Published | 2023-06-08 | | First published | 2023-06-08 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=18.0.0 | | Dependencies | 1 | | Unpacked size | 31.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Krishna Thota | | Maintainers | kcthota | | Keywords | cptn, integrations, data-pipelines | ## Links - npm: https://www.npmjs.com/package/cptn-browser - Repository: https://github.com/cptn-io/cptn-browser - Homepage: https://github.com/cptn-io/cptn-browser#readme - Issues: https://github.com/cptn-io/cptn-browser/issues - npm.io page: https://npm.io/package/cptn-browser ## Dependencies (1) - [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.5 ## Alternatives - [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads - [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads - [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads - [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads - [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads ## Recent versions - 1.0.7 (latest) — 2023-06-08 - 1.0.6 — 2023-06-08 ## README ![GitHub](https://img.shields.io/github/license/cptn-io/cptn-browser) # cptn-browser JS library for sending tracking events from browser clients to cptn.io instance's Source end point. This library is not intended to be used with NodeJS applications. ## Usage ### Embed into web pages Add the following code snippet to web pages. Change the `` and `` values to appropriate values for your Source end point. ```js ``` ### Use as a NPM module: ``` npm install cptn-browser ``` Use as ES module ```js import Cptn from 'cptn-browser'; const cptn = new Cptn({url:"", key:""}); cptn.capture({ "type": "click", "element": "add_to_cart" }); //key is optional if the source url is unsecured ``` Use as CommonJS module ```js const Cptn = require('cptn-browser'); const cptn = new Cptn({url:"", key:""}); cptn.capture({ "type": "click", "element": "add_to_cart" }); //key is optional if the source url is unsecured ``` ## Supported methods: ### capture Send custom captured events ```js cptn.capture(type, properties); //Following payload will be sent along with common attributes { type, properties } ``` ### page Track page load events ```js cptn.page(category, name, properties); //Following payload will be sent along with common attributes { type:"page", category, name, properties } ``` ### screen Track screen view events ```js cptn.screen(name, properties); //Following payload will be sent along with common attributes { type:"screen", name, properties } ``` ### identify Send identify event and associate userId for all subsequent events ```js cptn.identify(userId, properties); //Following payload will be sent along with common attributes. UserId will be part of common attributes { type:"identify", properties } ``` Note: userId value will also be persisted to cookies and will be automatically associated for subsequent events until clearIdentity is invoked. ### group Send group event and associate groupId for all subsequent events ```js cptn.group(groupId, properties); //Following payload will be sent along with common attributes. UserId will be part of common attributes { type:"group", groupId, properties } ``` ### track Send track event with custom details ```js cptn.track(event, properties); //Following payload will be sent along with common attributes. { type:"track", event, properties } ``` ### clearIdentity clears the currently set userId, groupId and removes userId cookie ```js cptn.clearIdentity() ``` ## AnonymousId All events sent will have an anonymousId value. This value is generated if not present and will be persisted to cookies. All subsequent events will use the same anonymousId until the cookies are cleared. ## Common Attributes: Following are the common attributes part of the events captured: ```js { ...event, anonymousId, timestamp: new Date().toISOString(), userId, context: { userAgent: window?.navigator?.userAgent, page: { url: window?.location?.href, referrer: window?.document?.referrer, title: window?.document?.title, path: window?.location?.pathname, search: window?.location?.search, hash: window?.location?.hash, }, screen: { width: window?.screen?.width, height: window?.screen?.height, }, locale: window?.navigator?.language, timezone: Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone, tzOffset: new Date().getTimezoneOffset(), groupId } } ``` ## IP tracking cptn.io supports capturing user ip address starting with Cupertino release (coming up soon). When enabled, the inbound event will be enriched with the remote IP address as below. ```js { ...event, cptn { remote_ip } } ``` ## User privacy and GDPR compliance This library uses cookies to persist anonymousId and passed userId information. Obtaining consent from the user is not in scope for this project and it must be determined by your application. You application must make the determination to ask for user consent and then instantiate or load the library into your web page after user consent. --- _Source: https://npm.io/package/cptn-browser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._