The Browser SDK makes it easy to track events in webpages.
Installation
The Browser SDK can be installed by loading the Javascript via a script tag, or directly bundled via a npm package.
To install using a script tag, add the following snippet to your site, replacing WRITE_KEY with the write key from your Event Source:
<script type="text/javascript">
!function(){var e=window.htevents=window.htevents||[];if(!e.initialize)if(e.invoked)window.console&&console.error&&console.error("Hightouch snippet included twice.");else{e.invoked=!0,e.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"],e.factory=function(t){return function(){var n=Array.prototype.slice.call(arguments);return n.unshift(t),e.push(n),e}};for(var t=0;t<e.methods.length;t++){var n=e.methods[t];e[n]=e.factory(n)}e.load=function(t,n){var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src="https://cdn.hightouch-events.com/browser/release/v1-latest/events.min.js";var r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(o,r),e._loadOptions=n,e._writeKey=t},e.SNIPPET_VERSION="0.0.1",
e.load('WRITE_KEY',{apiHost:'us-east-1.hightouch-events.com'}),
e.page()}}();
</script>
To install using npm:
- Install the SDK by running
npm install @ht-sdks/events-sdk-js-browser - Import and initialize the SDK with the following:
import { HtEventsBrowser } from "@ht-sdks/events-sdk-js-browser";
export const htevents = HtEventsBrowser.load(
{ writeKey: "WRITE_KEY" },
{ apiHost: "us-east-1.hightouch-events.com" }
);
API
Identify
The identify method is used to send an identify event.
If identify is called multiple times for the same user, the traits are
merged together.
Method signature:
htevents.identify(userId, [traits], [context], [callback])
Method parameters:
| Parameter | Type | Description |
|---|---|---|
userId | String | The user's persistent ID |
traits | Object | Additional traits about the user, such as email and name. |
context | Object | Overrides to values in the event context. By default, context contains information autocollected by the SDK. |
callback | Function | A callback that's invoked after the event is sent. |
Track
The track method is used to send a track event.
Method signature:
htevents.track(event, [properties], [context], [callback])
Method parameters:
| Parameter | Type | Description |
|---|---|---|
event | String | The event name (for example "Checked Out"). |
properties | Object | Additional properties about the event, such as product_id. |
context | Object | Overrides to values in the event context. By default, context contains information autocollected by the SDK. |
callback | Function | A callback that's invoked after the event is sent. |
Page
The page method is used to send a page event.
Method signature:
htevents.page(category, name, [properties], [context], [callback])
Method parameters:
| Parameter | Type | Description |
|---|---|---|
category | String | The page's category. For example "Docs" |
name | String | The page's name. For example "Getting started" |
properties | Object | Additional properties about the event, such as url. By default, the Hightouch SDK autocollects properties such as page referrer. |
context | Object | Overrides to values in the event context. By default, context contains information autocollected by the SDK. |
callback | Function | A callback that's invoked after the event is sent. |
Group
The group method sends a group event.
Method signature:
htevents.group(groupId, [traits], [context], [callback])
Method parameters:
| Parameter | Type | Description |
|---|---|---|
groupId | String | The id for the group. |
traits | Object | Additional traits about the group, such as company_name. |
context | Object | Overrides to values in the event context. By default, context contains information autocollected by the SDK. |
callback | Function | A callback that's invoked after the event is sent. |
Reset
The reset method resets the identify and group for the local session.
Specifically, it resets the anonymousId, userId, groupId, and traits.
The reset method should be called when users log out. This way, if the user
logs back in with another account, the userIds and traits from the different
sessions remain separate.
Method signature:
htevents.reset()