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()