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 🙏

© 2024 – Pkg Stats / Ryan Hefner

gb-tracker-client

v5.4.0

Published

GroupBy client-side event tracker

Downloads

8,895

Readme

GroupBy Tracker Client

Node.js CI badge CodeQL static code analytics badge

This is the JavaScript SDK used to send beacons to GroupBy. It can only run in the browser. A bundled UMD build is available from our CDN (see GroupBy docs for CDN link) and a CommonJS build is available for linking into NPM build processes with a bundler. E.g. React, Angular.

Usage from CDN

Add the CDN <script> to each page, above where the tracker is instantiated and used:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://cdn.groupbycloud.com/gb-tracker-client-<major_version>.min.js"></script>
    <script>
        var tracker = new GbTracker('customer_id', 'area');
        tracker.autoSetVisitor();

        tracker.sendAddToCartEvent({ ... });
    </script>
</head>
<body>
</body>
</html>

Usage with NPM

To import and use the tracker:

import GbTracker from 'gb-tracker-client';

const tracker = new GbTracker('customer_id', 'area');
tracker.autoSetVisitor();

tracker.sendAddToCartEvent({ ... });

If you're using TypeScript, you can also use the types for each event type. Each function has a corresponding TypeScript type that can be imported:

import GbTracker from 'gb-tracker-client';
import { AddToCartEvent } from 'gb-tracker-client/models';

const tracker = new GbTracker('customer_id', 'area');
tracker.autoSetVisitor();

const a: AddToCartEvent = { ... };
tracker.sendAddToCartEvent(a);

Options

The constructor for the tracker client has a third, optional parameter for providing options:

const tracker = new GbTracker('customer_id', 'area', {
    overrideUrl: '<some_url>' // Optional, overrides the URL the beacon is sent to. Useful for testing.
});

Supported event types

List of supported event types with code examples available in event-types.md file

SiteFilter support since version 5.1.1

This new functionality allows you to indicate which specific site or banner the tracker is running in.

const tracker = new GbTracker('customer_id', 'area');
tracker.setSite('siteName');

The setSite function will apply the given site to all beacons fired after that point. Whenever a Search, Home page view, View product, Add to cart, Order, or Impression beacon is fired, the site value, if it exists, will be added as part of the metadata in the request.

Shopper tracking

The first party cookie gbi_visitorId is set with an empiry time of 1 year that is extended each time the shopper visits again. This is used to anonymously track the shopper.

5.0.0 changes

IMPORTANT

As of version 5.0.0, the way shopper tracking works has changed and includes cross-domain support. Shoppers will be tracked across your domains if cross-domain rules are met (see next section). Tracking on domains whose apex domain has a two-level suffix is supported from version 5.1.2. Examples:

  • .com - You can use version 5.0.0 or higher.
  • .co.uk - You can use version 5.1.2 or higher.

Cross-domain rules

For shoppers to be tracked across your domains, the domains must share the same apex domain. Examples:

  • a.example.com and b.example.com
  • a.example.com and example.com
  • example.com and a.example.com

Starting with version 5.1.2, many two-level domain suffixes such as .co.uk are also supported. If your domain has a multi-level suffix that is not in the list of supported domain suffixes, please contact [email protected] for assistance.

Upgrading from versions 3 or 4 and visitor ID re-use

If you upgrade from 3 or 4 to 5, the visitor ID values generated by version 3 or 4 of the tracker client will be re-used. Whichever domain the shopper visits next once you start using version 5, the visitor ID generated for that domain will be re-used as the visitor ID for the apex domain, thereafter shared between each of your domains.

For example, if a shopper performed the following events, the visitor ID abc would be re-used:

  • Visits www.example.com, at which point version 3 or 4 sets the visitor ID to abc.
  • Performs a search.
  • Views a product and adds it to their cart (where they're brought to checkout.example.com), at which point version 3 or 4 sets the visitor ID to bcd.
  • Decides not to follow through with purchasing the product.
  • Waits a while, but less than a year, during which time you upgrade to version 5.
  • Visits the site again, clicks their cart (at which point version 5 replaces the visitor ID bcd with abc), and completes the purchase.

More Usage Details

See the docs for more detailed information about implementing beacons:

https://docs.groupbycloud.com/gb-docs/gb-implementation/beacons/overview