gb-tracker-client
v5.4.0
Published
GroupBy client-side event tracker
Downloads
8,895
Readme
GroupBy Tracker Client
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
andb.example.com
a.example.com
andexample.com
example.com
anda.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 toabc
. - 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 tobcd
. - 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
withabc
), 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