npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

grip-cdp-tracker

v0.1.14

Published

Grip CDP Tracker

Downloads

108

Readme

Grip CDP Tracker

If you're hosting events with Grip, you can get further insights into exhibitors' and visitors' use of your own event site by using this Customer Data Platform package.

Installation

with NPM/Yarn

npm install @grip/cdp-tracker

yarn install @grip/cdp-tracker

Old-School JS Snippet

In HTML <head>:

<script src="https://cdn.jsdelivr.net/npm/@grip/cdp-tracker/..."></script>
<script>
  gripCdpTracker.init({
    /* ... */
  });
  gripCdpTracker.trackPageView();
  // ...etc.
</script>

Usage

import * as GripCDP from '@grip/cdp-tracker';

Initialization

GripCDP.init({
  app_id: 123,
  container_id: 123,
  registration_id: "N1408",
});

init() takes one object parameter with various properties.

You'll need to let us know the app_id and container_id. (Note that the container_id may also be called Event ID in some places.)

You can also set the registration_id if known. The from_id is actually preferred, but it's unlikely to be known unless the user is logged into a Grip app or website.

Tracking Page Views

GripCDP.trackPageView();

trackPageView() takes the following parameters

  • meta (optional)
    • an object with any additional data which needs to be tracked
  • URL (optional)
    • The document.URL value will be used unless you pass in an alternative string

Tracking Page Visibility

GripCDP.trackPageVisibility();

As the page is shown/hidden, the document.URL will be recorded along with page-shown/page-hidden. The document unload event is unreliable so we watch visibility instead, with the assumption that when it's invisible it has been closed.

GripCDP.startHeartbeat();

Every second that the page is visible, we'll record the fact. You can optionally pass a number of milliseconds between each "heartbeat". Every time this is called it will stop any existing heartbeat (using stopHeartbeat()) and start a new one.

Tracking Link Clicks

GripCDP.trackLinkClicks({
  content_title: "",
  content_type: "",
  track: "",
  session_id: 0,
  source: "",
});

This will find all regular <a href="... tags on the page and track when they've been clicked, automatically noting the href value. You can optionally add any meta (applied to all links on the page). You will probably need to rerun this after each navigation event if you're using a Single Page App or any other dynamic content loading approach.

Tracking custom events

GripCDP.trackEvent("start", "stream", 123, {
  title: "Never Gonna Give You Up!",
});

trackEvent() takes the following parameters

  • event
    • a string (verb) describing what's happened
  • to_type
    • a string naming the event subject's type, e.g. session / advert etc
  • to_id
    • a number/string identifying whatever is being acted upon
  • meta (optional)
    • an object with any further information