castled-js-sdk 0.0.1 → 0.0.3

package/package.json

@@ -1,50 +1,209 @@
 {
   "name": "castled-js-sdk",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Castled Javascript Events SDK",
-  "main": "index.js",
-  "module": "index.es.js",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.es.js",
-      "require": "./index.js"
-    },
-    "./service-worker": {
-      "types": "./service-worker/index.d.ts",
-      "import": "./service-worker/index.es.js",
-      "require": "./service-worker/index.js"
-    },
-    "./service-worker/index.es": {
-      "types": "./service-worker/index.d.ts",
-      "import": "./service-worker/index.es.js"
-    }
-  },
-  "typesVersions": {
-    "*": {
-      ".": [
-        "index.d.ts"
-      ],
-      "service-worker": [
-        "service-worker/index.d.ts"
-      ],
-      "service-worker/index.es": [
-        "service-worker/index.d.ts"
-      ]
-    }
-  },
+  "main": "./dist/browser.min.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "setup": "npm i && cd sanity-suite && npm i",
+    "test": "npm run build:browser && sed 's/var hightouchevents/hightouchevents/g' dist/legacy/events.min.js > __tests__/prodsdk.js && jest --watchAll=false --maxWorkers=50% --coverage",
+    "test:ci": "npm run build:browser && sed 's/var hightouchevents/hightouchevents/g' dist/legacy/events.min.js > __tests__/prodsdk.js && jest --watchAll=false --maxWorkers=2 --coverage",
+    "start": "rollup --config rollup-configs/rollup.sdk.browser.js --watch --environment DEV_SERVER,PROD_DEBUG:inline",
+    "start:all": "npm run build:integration:all && rollup --config rollup-configs/rollup.sdk.browser.js --watch --environment DEV_SERVER,PROD_DEBUG:inline",
+    "build:browser:dev": "rollup --config rollup-configs/rollup.sdk.browser.js",
+    "build:browser": "rollup --config rollup-configs/rollup.sdk.browser.js --environment VERSION:$npm_package_version,UGLIFY,PROD_DEBUG,STAGING:$npm_config_staging,ENV:prod",
+    "build:browser:modern": "BROWSERSLIST_ENV=modern rollup --config rollup-configs/rollup.sdk.browser.js --environment VERSION:$npm_package_version,UGLIFY,PROD_DEBUG,STAGING:$npm_config_staging,ENV:prod",
+    "build:browser:debug": "rollup --config rollup-configs/rollup.sdk.browser.js --environment VERSION:$npm_package_version,UGLIFY,PROD_DEBUG:inline,ENV:prod",
+    "build:browser:bundle-size": "VISUALIZER=true npm run build:browser",
+    "build:browser:modern:bundle-size": "VISUALIZER=true npm run build:browser:modern",
+    "build:node:dev": "rollup --config rollup-configs/rollup.sdk.npm.js --environment VERSION:$npm_package_version,NPM",
+    "build:node": "rollup --config rollup-configs/rollup.sdk.npm.js --environment VERSION:$npm_package_version,UGLIFY,ENV:prod,NPM",
+    "build:worker": "rollup --config rollup-configs/rollup.worker.config.js --environment VERSION:$npm_package_version,NPM",
+    "build:npm": "npm run build:node && npm run build:worker",
+    "build:integration:dev": "rollup --config rollup-configs/rollup.integrations.config.js --environment PROD_DEBUG,INTG_NAME:AdobeAnalytics",
+    "build:integration:dev:cli": "rollup --config rollup-configs/rollup.integrations.config.js --environment PROD_DEBUG,INTG_NAME:$npm_config_intg",
+    "build:integration": "rollup --config rollup-configs/rollup.integrations.config.js --environment PROD_DEBUG,ENV:prod,UGLIFY,INTG_NAME:AdobeAnalytics",
+    "build:integration:cli": "rollup --config rollup-configs/rollup.integrations.config.js --environment PROD_DEBUG,ENV:prod,UGLIFY,INTG_NAME:$npm_config_intg",
+    "build:integration:all": "VISUALIZER=false STAGING=$npm_config_staging node -r esm scripts/integrationBuildScript.js",
+    "build:integration:all:bundle-size": "VISUALIZER=true STAGING=$npm_config_staging node -r esm scripts/integrationBuildScript.js",
+    "build:integration:all:modern": "VISUALIZER=false BROWSERSLIST_ENV=modern STAGING=$npm_config_staging node -r esm scripts/integrationBuildScript.js",
+    "build:integration:all:modern:bundle-size": "VISUALIZER=true BROWSERSLIST_ENV=modern STAGING=$npm_config_staging node -r esm scripts/integrationBuildScript.js",
+    "build:integration:bundle-size": "VISUALIZER=true npm run build:integration",
+    "build:integration:bundle-size:cli": "VISUALIZER=true npm run build:integration:cli",
+    "clean": "rm -rf dist",
+    "check:lint": "eslint \"src/**/*.js\" -f json -o reports/eslint.json || exit 0",
+    "check:size:build": "npm run clean && npm run build:browser && npm run build:integration:all && npm run build:npm",
+    "check:size": "npm run check:size:build && size-limit",
+    "check:circular": "madge --circular --extensions js ./src || exit 0",
+    "check:support": "NODE_ENV=production npx browserslist --mobile-to-desktop",
+    "check:support:modern": "NODE_ENV=modern npx browserslist --mobile-to-desktop",
+    "check:duplicates": "jscpd src --threshold 5",
+    "check:security": "npm audit --recursive --audit-level=high",
+    "format": "prettier --write .",
+    "lint:fix": "eslint . --fix",
+    "prepare": "husky install",
+    "pre-commit": "npm run test && npm run check:size && npx lint-staged",
+    "commit-msg": "commitlint --edit",
+    "commit": "git-cz",
+    "release": "npx standard-version",
+    "release:github": "DEBUG=conventional-github-releaser npx conventional-github-releaser -p angular --config github-release.config.js",
+    "sanity": "npm run build:browser && cd sanity-suite && npm run start:local",
+    "sanity:cdn": "cd sanity-suite && npm run start:cdn",
+    "sanity:npm": "cd sanity-suite && npm run start:npm",
+    "build:sanity": "rm -rf sanity-suite/dist && cd sanity-suite && npm run build:all && npm run build:all:staging",
+    "postinstall": "npx patch-package"
   },
-  "keywords": [],
-  "author": "Castled Data",
+  "author": "CastledData",
   "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/castledio/castled-js-sdk/issues"
+  },
+  "homepage": "https://github.com/castledio/castled-js-sdk#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/castledio/castled-js-sdk.git"
+    "url": "https://github.com/castledio/castled-js-sdk.git"
   },
-  "bugs": {
-    "url": "https://github.com/castledio/castled-js-sdk/issues"
+  "dependencies": {
+    "@lukeed/uuid": "2.0.1",
+    "@ndhoule/defaults": "2.0.1",
+    "@ndhoule/each": "2.0.1",
+    "@ndhoule/extend": "2.0.0",
+    "@segment/localstorage-retry": "1.3.0",
+    "@segment/loosely-validate-event": "2.0.0",
+    "@segment/top-domain": "3.0.1",
+    "@vespaiach/axios-fetch-adapter": "0.3.1",
+    "assert": "2.0.0",
+    "axios": "0.27.2",
+    "axios-retry": "3.5.1",
+    "component-each": "0.2.6",
+    "component-emitter": "1.3.0",
+    "component-querystring": "2.0.1",
+    "component-url": "0.2.1",
+    "crypto-js": "4.1.1",
+    "get-value": "3.0.1",
+    "is": "3.3.0",
+    "lodash.clonedeep": "4.5.0",
+    "lodash.difference": "4.5.0",
+    "lodash.get": "4.4.2",
+    "lodash.isempty": "4.4.0",
+    "lodash.isequal": "4.5.0",
+    "lodash.isstring": "4.0.1",
+    "lodash.isundefined": "3.0.1",
+    "lodash.merge": "4.6.2",
+    "lodash.pick": "4.4.0",
+    "lodash.pickby": "4.6.0",
+    "lodash.tostring": "4.1.4",
+    "md5": "2.3.0",
+    "ms": "2.1.3",
+    "obj-case": "0.2.1",
+    "on-body": "0.0.1",
+    "ramda": "0.29.0",
+    "rudder-component-cookie": "0.0.1",
+    "serialize-javascript": "6.0.1",
+    "storejs": "2.0.5",
+    "uuid": "8.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "7.22.9",
+    "@babel/eslint-parser": "7.22.9",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-private-methods": "7.18.6",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@babel/plugin-transform-arrow-functions": "7.22.5",
+    "@babel/plugin-transform-object-assign": "7.22.5",
+    "@babel/preset-env": "7.22.9",
+    "@commitlint/config-conventional": "17.6.6",
+    "@digitalroute/cz-conventional-changelog-for-jira": "8.0.1",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "25.0.2",
+    "@rollup/plugin-json": "6.0.0",
+    "@rollup/plugin-node-resolve": "15.1.0",
+    "@rollup/plugin-replace": "5.0.2",
+    "@size-limit/file": "8.2.6",
+    "@size-limit/webpack": "8.2.6",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "29.6.1",
+    "babel-plugin-transform-object-hasown": "1.1.0",
+    "commitizen": "4.3.0",
+    "commitlint": "17.6.6",
+    "conventional-changelog-cli": "2.2.2",
+    "conventional-github-releaser": "3.1.5",
+    "dotenv": "16.3.1",
+    "eslint": "8.44.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-base": "15.0.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-compat": "4.1.4",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-sonarjs": "0.19.0",
+    "eslint-plugin-unicorn": "47.0.0",
+    "esm": "3.2.25",
+    "husky": "8.0.3",
+    "isomorphic-fetch": "3.0.0",
+    "jest": "29.6.1",
+    "jest-date-mock": "1.0.8",
+    "jest-environment-jsdom": "29.6.1",
+    "jest-sonar": "0.2.16",
+    "jscpd": "3.5.9",
+    "lint-staged": "13.2.3",
+    "madge": "6.1.0",
+    "msw": "1.2.2",
+    "prettier": "2.8.8",
+    "rollup": "2.79.1",
+    "rollup-plugin-copy": "3.4.0",
+    "rollup-plugin-filesize": "10.0.0",
+    "rollup-plugin-generate-html-template": "1.7.0",
+    "rollup-plugin-livereload": "2.0.5",
+    "rollup-plugin-polyfill-node": "0.12.0",
+    "rollup-plugin-serve": "2.0.2",
+    "rollup-plugin-terser": "7.0.2",
+    "rollup-plugin-visualizer": "5.9.2",
+    "size-limit": "8.2.6",
+    "standard-version": "9.5.0"
+  },
+  "overrides": {
+    "@xmldom/xmldom": "0.8.5",
+    "debug": "4.3.4",
+    "decode-uri-component": "0.4.1",
+    "dot-prop": "5.3.0",
+    "json5": "2.2.2",
+    "http-cache-semantics": "4.1.1",
+    "semver": "7.3.8",
+    "semver-regex": "3.1.4",
+    "trim-newlines": "3.0.1",
+    "webpack": "5.76.0",
+    "xml2js": "0.5.0"
   },
-  "homepage": "https://github.com/castledio/castled-js-sdk/blob/master/README.md"
+  "browserslist": {
+    "production": [
+      "defaults",
+      "Edge >= 15",
+      "Firefox >= 40",
+      "IE >= 10",
+      "Chrome >= 37",
+      "Safari >= 7",
+      "Opera >= 23"
+    ],
+    "modern": [
+      "defaults"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 edge version",
+      "last 1 safari version"
+    ]
+  },
+  "lint-staged": {
+    "*.js": "eslint --cache --fix",
+    "*.{json,js,md,ts}": "prettier --write"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/@digitalroute/cz-conventional-changelog-for-jira",
+      "jiraMode": false,
+      "jiraOptional": true,
+      "skipScope": true,
+      "defaultType": "feat"
+    }
+  }
 }

package/packages/npm/README.md

@@ -0,0 +1,125 @@
+# Castled Javascript Events SDK
+
+## Installation
+
+```bash
+npm install castled-js-sdk --save
+```
+
+**Note that this NPM module is only meant to be used for a browser installation**. If you want to integrate with your Node.js application, refer to the [**Node.js repository**](https://github.com/ht-sdks/events-sdk-node).
+<br><br>
+
+**IMPORTANT**: You should run the following code snippet only once and use the exported object throughout your project (e.g. Node module caching):
+
+```javascript
+import * as analytics from "castled-js-sdk";
+analytics.ready(() => {
+  console.log("we are all set!!!");
+});
+analytics.load(<WRITE_KEY>, <DATA_PLANE_URL>, {configUrl: <CONTROL_PLANE_URL> });
+export { analytics };
+```
+
+You can also do this with **ES5** using the `require` method, as shown:
+
+```javascript
+var analytics = require("castled-js-sdk");
+analytics.load(<WRITE_KEY>, <DATA_PLANE_URL>, {config:Url: <CONTROL_PLANE_URL>});
+exports.analytics = analytics;
+```
+
+### Exported APIs
+
+The APIs exported by the module are:
+
+- `load`
+- `ready`
+- `identify`
+- `alias`
+- `page`
+- `track`
+- `group`
+- `reset`
+- `getAnonymousId`
+- `setAnonymousId`
+
+### Supported browser versions
+
+| **Browser**     | **Supported Versions** |
+| :-------------- | :--------------------- |
+| Safari          | v7 or later            |
+| IE              | v10 or later           |
+| Edge            | v15 or later           |
+| Mozilla Firefox | v40 or later           |
+| Chrome          | v37 or later           |
+| Opera           | v23 or later           |
+| Yandex          | v14.12 or later        |
+
+> If the SDK does not work on the browser versions that you are targeting, verify if adding the browser polyfills to your application solves the issue.
+
+## Identifying users
+
+The `identify` call lets you identify a visiting user and associate them to their actions. It also lets you record the traits about them like their name, email address, etc.
+
+A sample `identify()` call is shown below:
+
+```javascript
+analytics.identify(
+  '12345',
+  {
+    email: 'name@domain.com',
+  },
+  {
+    page: {
+      path: '',
+      referrer: '',
+      search: '',
+      title: '',
+      url: '',
+    },
+  },
+  () => {
+    console.log('in identify call');
+  },
+);
+```
+
+In the above example, the user-related information like the `userId` and `email` (and other contextual info) is captured.
+
+> There is no need to call `identify()` for anonymous visitors to your website. Such visitors are automatically assigned an `anonymousId`.
+
+## Tracking user actions
+
+The `track` call lets you record the customer events, i.e. the actions that they perform, along with any associated properties.
+
+A sample `track` call is shown below:
+
+```javascript
+analytics.track(
+  'test track event GA3',
+  {
+    revenue: 30,
+    currency: 'USD',
+    user_actual_id: 12345,
+  },
+  () => {
+    console.log('in track call');
+  },
+);
+```
+
+In the above example, the `track` method tracks the user event ‘**test track event GA3**’ and information such as the `revenue`, `currency`, `anonymousId`.
+
+> You can use the `track` method to track various success metrics for your website like user signups, item purchases, article bookmarks, and more.
+
+## The `ready` API
+
+There are cases when you may want to tap into the features provided by the end-destination SDKs to enhance tracking and other functionalities. The JavaScript SDK exposes a `ready` API with a `callback` parameter that fires when the SDK is done initializing itself and the other third-party native SDK destinations.
+
+An example is shown in the following snippet:
+
+```javascript
+analytics.ready(() => {
+  console.log('we are all set!!!');
+});
+```

package/packages/npm/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "castled-js-sdk",
+  "version": "0.0.3",
+  "description": "Castled Javascript Events SDK",
+  "main": "index.js",
+  "module": "index.es.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.es.js",
+      "require": "./index.js"
+    },
+    "./service-worker": {
+      "types": "./service-worker/index.d.ts",
+      "import": "./service-worker/index.es.js",
+      "require": "./service-worker/index.js"
+    },
+    "./service-worker/index.es": {
+      "types": "./service-worker/index.d.ts",
+      "import": "./service-worker/index.es.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "index.d.ts"
+      ],
+      "service-worker": [
+        "service-worker/index.d.ts"
+      ],
+      "service-worker/index.es": [
+        "service-worker/index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "Castled Data",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/castledio/castled-js-sdk.git"
+  },
+  "bugs": {
+    "url": "https://github.com/castledio/castled-js-sdk/issues"
+  },
+  "homepage": "https://github.com/castledio/castled-js-sdk/blob/master/README.md"
+}

package/patches/@segment+localstorage-retry+1.3.0.patch

@@ -0,0 +1,73 @@
+diff --git a/node_modules/@segment/localstorage-retry/lib/engine.js b/node_modules/@segment/localstorage-retry/lib/engine.js
+index 5e3fffe..656a774 100644
+--- a/node_modules/@segment/localstorage-retry/lib/engine.js
++++ b/node_modules/@segment/localstorage-retry/lib/engine.js
+@@ -1,7 +1,7 @@
+ 'use strict';
+ 
+ var keys = require('@ndhoule/keys');
+-var uuid = require('uuid').v4;
++var uuid = require('@lukeed/uuid').v4;
+ 
+ var inMemoryStore = {
+   _data: {},
+diff --git a/node_modules/@segment/localstorage-retry/lib/index.js b/node_modules/@segment/localstorage-retry/lib/index.js
+index 34220e8..f946ede 100644
+--- a/node_modules/@segment/localstorage-retry/lib/index.js
++++ b/node_modules/@segment/localstorage-retry/lib/index.js
+@@ -283,6 +283,7 @@ Queue.prototype._checkReclaim = function() {
+     var storage = self._store.getOriginalEngine();
+     for (var i = 0; i < storage.length; i++) {
+       var k = storage.key(i);
++      if (k === null) continue;
+       var parts = k.split('.');
+       if (parts.length !== 3) continue;
+       if (parts[0] !== name) continue;
+@@ -345,15 +346,41 @@ Queue.prototype._reclaim = function(id) {
+ 
+   this._store.set(this.keys.QUEUE, our.queue);
+ 
+-  // remove all keys
+-  other.remove(this.keys.IN_PROGRESS);
+-  other.remove(this.keys.QUEUE);
+-  other.remove(this.keys.RECLAIM_START);
+-  other.remove(this.keys.RECLAIM_END);
+-  other.remove(this.keys.ACK);
++  // remove all keys one by one, on next tick to avoid NS_ERROR_STORAGE_BUSY error
++  try {
++    this._clearOtherQueue(other, 1);
++  } catch(e) {
++    if(e.name === "NS_ERROR_STORAGE_BUSY" || e.code === "NS_ERROR_STORAGE_BUSY" || e.code === 0x80630001) {
++      try {
++        this._clearOtherQueue(other, 40);
++      } catch(retryError) {
++        console.error(retryError);
++      }
++    } else {
++      console.error(e);
++    }
++  }
+ 
+   // process the new items we claimed
+   this._processHead();
+ };
+ 
++Queue.prototype._clearOtherQueue = function(other, localStorageBackoff) {
++    setTimeout(() => {
++      other.remove(this.keys.IN_PROGRESS);
++      setTimeout(() => {
++        other.remove(this.keys.QUEUE);
++        setTimeout(() => {
++          other.remove(this.keys.RECLAIM_START);
++          setTimeout(() => {
++            other.remove(this.keys.RECLAIM_END);
++            setTimeout(() => {
++              other.remove(this.keys.ACK);
++            }, localStorageBackoff);
++          }, localStorageBackoff);
++        }, localStorageBackoff);
++      }, localStorageBackoff);
++    }, localStorageBackoff);
++}
++
+ module.exports = Queue;

package/patches/@segment+top-domain+3.0.1.patch

@@ -0,0 +1,34 @@
+diff --git a/node_modules/@segment/top-domain/lib/index.js b/node_modules/@segment/top-domain/lib/index.js
+index ae67f2e..1913b53 100644
+--- a/node_modules/@segment/top-domain/lib/index.js
++++ b/node_modules/@segment/top-domain/lib/index.js
+@@ -4,7 +4,6 @@
+  * Module dependencies.
+  */
+ 
+-var parse = require('component-url').parse;
+ var cookie = require('component-cookie');
+ 
+ /**
+@@ -55,6 +54,12 @@ function domain(url) {
+   return '';
+ }
+ 
++function legacyGetHostname(href) {
++  const l = document.createElement("a");
++  l.href = href;
++  return l.hostname;
++};
++
+ /**
+  * Levels returns all levels of the given url.
+  *
+@@ -63,7 +68,7 @@ function domain(url) {
+  * @api public
+  */
+ domain.levels = function(url) {
+-  var host = parse(url).hostname;
++  var host = typeof window.URL !== 'function' ? legacyGetHostname(url) : new URL(url).hostname;
+   var parts = host.split('.');
+   var last = parts[parts.length - 1];
+   var levels = [];

package/public/index.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Smoke test</title>
+
+    <script>
+      hightouchevents = window.hightouchevents = [];
+      var methods = [
+        'load',
+        'page',
+        'track',
+        'identify',
+        'alias',
+        'group',
+        'ready',
+        'reset',
+        'getAnonymousId',
+        'setAnonymousId',
+        'getUserId',
+        'getUserTraits',
+        'getGroupId',
+        'getGroupTraits',
+        'endSession',
+        'startSession',
+      ];
+
+      for (var i = 0; i < methods.length; i++) {
+        var method = methods[i];
+        hightouchevents[method] = (function (methodName) {
+          return function () {
+            hightouchevents.push([methodName].concat(Array.prototype.slice.call(arguments)));
+          };
+        })(method);
+      }
+
+      hightouchevents.load('__WRITE_KEY__', '__DATAPLANE_URL__', {
+        logLevel: 'DEBUG',
+        configUrl: '__CONFIG_SERVER_HOST__',
+        destSDKBaseURL: '__DEST_SDK_BASE_URL__',
+        // useBeacon: true,
+        // beaconQueueOptions: {
+        //   flushQueueInterval: 60 * 1000,
+        // }
+      });
+
+      hightouchevents.page();
+    </script>
+  </head>
+
+  <body>
+    <h1>Test HTML file</h1>
+    <br />
+
+    <button data-testid="page-btn" onclick="page()">Page</button>
+    <button data-testid="identify-btn" onclick="identify()">identify</button>
+    <button data-testid="track-btn" onclick="track()">Track</button>
+    <button data-testid="alias-btn" onclick="alias()">Alias</button>
+    <button data-testid="group-btn" onclick="group()">Group</button>
+
+    <p data-testid="action" id="action"></p>
+    <p data-testid="payload" id="htElement"></p>
+
+    <script>
+      function page() {
+        hightouchevents.page('Cart viewed', function (htElement) {
+          console.log('in page call');
+          document.getElementById('action').innerHTML = 'Page called';
+          document.getElementById('htElement').innerHTML = JSON.stringify(htElement);
+        });
+      }
+
+      function identify() {
+        hightouchevents.identify(
+          'Sample-User-id',
+          {
+            firstName: 'Tintin',
+            city: 'Brussels',
+            country: 'Belgium',
+            phone: '1234567890',
+            email: 'tintin@twentiethcentury.com',
+            custom_flavor: 'chocolate',
+            custom_date: Date.now(),
+          },
+          {},
+          function (htElement) {
+            console.log('in identify call');
+            document.getElementById('action').innerHTML = 'Identify called';
+            document.getElementById('htElement').innerHTML = JSON.stringify(htElement);
+          },
+        );
+      }
+
+      function track() {
+        hightouchevents.track(
+          'Sample Track event',
+          {
+            revenue: 30,
+            currency: 'USD',
+            user_actual_id: 12345,
+          },
+          function (htElement) {
+            console.log('in track call');
+            document.getElementById('action').innerHTML = 'Track called';
+            document.getElementById('htElement').innerHTML = JSON.stringify(htElement);
+          },
+        );
+      }
+
+      function alias() {
+        hightouchevents.alias('alias-user-id', function (htElement) {
+          console.log('alias call');
+          document.getElementById('action').innerHTML = 'Alias called';
+          document.getElementById('htElement').innerHTML = JSON.stringify(htElement);
+        });
+      }
+
+      function group() {
+        hightouchevents.group(
+          'sample_group_id',
+          {
+            name: 'Apple Inc.',
+            location: 'USA',
+          },
+          function (htElement) {
+            console.log('group call');
+            document.getElementById('action').innerHTML = 'Group called';
+            document.getElementById('htElement').innerHTML = JSON.stringify(htElement);
+          },
+        );
+      }
+    </script>
+  </body>
+</html>