@ht-sdks/events-sdk-js-browser 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ht-sdks/events-sdk-js-browser",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/ht-sdks/events-sdk-js-mono",
@@ -24,28 +24,24 @@
   ],
   "sideEffects": false,
   "scripts": {
-    ".": "yarn run -T turbo run --filter=@ht-sdks/events-sdk-js-browser...",
     "build-prep": "sh scripts/build-prep.sh",
-    "version": "yarn run build-prep && git add src/generated/version.ts",
+    "version": "npm run build-prep && git add src/generated/version.ts",
     "umd": "webpack",
-    "eslint": "yarn run -T eslint",
-    "tsc": "yarn run -T tsc",
-    "jest": "yarn run -T jest",
-    "concurrently": "yarn run -T concurrently",
-    "watch": "yarn concurrently 'NODE_ENV=production WATCH=true yarn umd --watch' 'yarn pkg --watch'",
-    "build": "yarn clean && yarn build-prep && yarn concurrently 'NODE_ENV=production yarn umd' 'yarn pkg' 'yarn cjs'",
-    "candidate:cdn": "yarn . build && NODE_ENV=production PATH_PREFIX=browser/candidate bash scripts/release.sh",
-    "release:cdn": "yarn . build && NODE_ENV=production PATH_PREFIX=browser/release bash scripts/release.sh",
-    "pkg": "yarn tsc -p tsconfig.build.json",
-    "cjs": "yarn tsc -p tsconfig.build.json --outDir ./dist/cjs --module commonjs",
+    "watch": "concurrently 'NODE_ENV=production WATCH=true npm run umd -- --watch' 'npm run pkg -- --watch'",
+    "build": "npm run clean && npm run build-prep && concurrently 'NODE_ENV=production npm run umd' 'npm:pkg' 'npm:cjs'",
+    "candidate:cdn": "turbo run build && NODE_ENV=production PATH_PREFIX=browser/candidate bash scripts/release.sh",
+    "release:cdn": "turbo run build && NODE_ENV=production PATH_PREFIX=browser/release bash scripts/release.sh",
+    "pkg": "tsc -p tsconfig.build.json",
+    "cjs": "tsc -p tsconfig.build.json --outDir ./dist/cjs --module commonjs",
     "clean": "rm -rf dist",
-    "lint": "yarn concurrently 'yarn:eslint .' 'yarn:tsc --noEmit'",
-    "test": "yarn jest"
+    "lint": "concurrently 'eslint .' 'tsc --noEmit'",
+    "test": "jest",
+    "size-limit": "size-limit"
   },
   "size-limit": [
     {
       "path": "dist/umd/index.js",
-      "limit": "28.9 KB"
+      "limit": "37 KB"
     }
   ],
   "dependencies": {
@@ -101,6 +97,5 @@
     "webpack": "^5.76.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.8.0"
-  },
-  "packageManager": "yarn@3.4.1"
+  }
 }

package/src/browser/index.ts

@@ -30,6 +30,7 @@ import {
 import { ClassicIntegrationSource } from '../plugins/ajs-destination/types'
 import { attachInspector } from '../core/inspector'
 import { setGlobalAnalyticsKey } from '../lib/global-analytics-helper'
+import { createDestination } from '../plugins/destinations'
 
 export interface LegacyIntegrationConfiguration {
   /* @deprecated - This does not indicate browser types anymore */
@@ -270,6 +271,18 @@ async function registerPlugins(
     )
   }
 
+  // destination plugins
+  await Promise.allSettled(
+    Object.entries(options.destinations ?? {}).map(async ([name, settings]) => {
+      const plugin = await createDestination(name, settings)
+      if (plugin) {
+        toRegister.push(plugin)
+      } else {
+        console.warn(`failed to load destination plugin: ${name}`)
+      }
+    })
+  )
+
   const ctx = await analytics.register(...toRegister)
 
   if (
@@ -363,7 +376,7 @@ async function loadAnalytics(
   if (!options.disableClientPersistence && options.httpCookieServiceOptions) {
     options.httpCookieService = await HTTPCookieService.load(
       options.httpCookieServiceOptions
-    )
+    ).catch((err): undefined => console.error(err) as undefined)
   }
 
   const opts: InitOptions = { retryQueue, ...options }

package/src/core/analytics/index.ts

@@ -59,6 +59,7 @@ import type {
   HTTPCookieService,
   HTTPCookieServiceOptions,
 } from '../http-cookies'
+import type { DestinationSettings } from '../../plugins/destinations'
 
 const deprecationWarning =
   'This is being deprecated and will be not be available in future releases of Analytics JS'
@@ -133,6 +134,11 @@ export interface InitOptions {
    */
   globalAnalyticsKey?: string
 
+  /**
+   * Allows specifying plugins as configuration. Used to load plugins in `plugins/destinations/*`.
+   */
+  destinations?: Record<string, DestinationSettings>
+
   /**
    * When setting httpCookieServiceOptions, an HTTPCookieService is automatically created
    */

package/src/core/http-cookies/README.md

@@ -45,8 +45,8 @@ const htevents = HtEventsBrowser.load(
   { 
     apiHost: "us-east-1.hightouch-events.com", // HtEvents API remains the same
     httpCookieServiceOptions: {
-      clearUrl: 'ht/clear', // route hosted on *your* domain and infra
-      renewUrl: 'ht/renew', // route hosted on *your* domain and infra
+      clearUrl: '/ht/clear', // route hosted on *your* domain and infra
+      renewUrl: '/ht/renew', // route hosted on *your* domain and infra
     }
   },
 )
@@ -79,116 +79,19 @@ If there are no browser cookies found, return any server cookies as browser cook
 ### An API for **clearing** server cookies
 
 This route should look for **server** cookies and clean them:
-* `res.cookie("htjs_anonymous_id_srvr", "", {maxAge: 0, httpOnly:true});`
-* `res.cookie("htjs_user_id_srvr", "", {maxAge: 0, httpOnly:true});`
+* `res.cookie("htjs_anonymous_id_srvr", "", {maxAge: 0, httpOnly:true, ...});`
+* `res.cookie("htjs_user_id_srvr", "", {maxAge: 0, httpOnly:true, ...});`
 
 ### API Spec
 The spec of the actual `request` and `response` payloads are kept intentionally vague. The spec should fit a variety of server environments.
 
-The Events SDK only requires that the server: A) handles cookies and B) returns a `200` statuscode.
-
-## Server Example
-
-A simplified Node.js/Express server:
-
-```Javascript
-const express = require("express");
-const cookieParser = require('cookie-parser');
-const cors = require('cors');
-
-const USER_COOKIE = "htjs_user_id";
-const ANON_COOKIE = "htjs_anonymous_id";
-
-function getDomain(req) {
-  let domain = process.env.DOMAIN || req.headers["x-forwarded-for"] || req.get("host");
-  if (domain.startsWith("localhost")) return "localhost";
-  return domain;
-}
-
-function renewCookies(req, res, browserName, serverName) {
-  const cookie = req.cookies[browserName] || req.cookies[serverName];
-  if (!cookie) return "";
-  const cookieParams = {maxAge:31536000*1000, domain: getDomain(req), sameSite: "lax"};
-  res.cookie(browserName, cookie, {...cookieParams});
-  res.cookie(serverName, cookie, {...cookieParams, httpOnly:true});
-  return cookie;
-}
-
-function clearServerCookie(req, res, serverName) {
-  const cookie = "";
-  const cookieParams = {maxAge:0, domain: getDomain(req), sameSite: "lax"};
-  res.cookie(serverName, "", {...cookieParams, httpOnly:true});
-  return cookie;
-}
-
-const app = express();
-app.use(cookieParser());
-app.use(cors())
-
-app.post("/ht/renew", (req, res) => {
-  // recreate a browser cookie from an existing server cookie, OR
-  // create a new server cookie that can later be used to recreate from.
-  return res.json({
-    userId: renewCookies(req, res, USER_COOKIE, `${USER_COOKIE}_srvr`),
-    anonymousId: renewCookies(req, res, ANON_COOKIE, `${ANON_COOKIE}_srvr`),
-  })
-});
-
-app.post("/ht/clear", (req, res) => {
-  // clear server cookies, e.g. if the user asks to clear all cookies.
-  return res.json({
-    userId: clearServerCookie(req, res, `${USER_COOKIE}_srvr`),
-    anonymousId: clearServerCookie(req, res, `${ANON_COOKIE}_srvr`),
-  })
-});
-
-app.listen(3000, () => {
-  console.log("Listening on port 3000...");
-});
-```
+The Events SDK only requires that the server: A) handles cookies and B) returns a `200` status code.
 
-A **very** simplified NGINX reverse proxy serving your document and API from the same domain:
-```
-worker_processes  1;
-
-events {
-    worker_connections  1024;
-}
-
-http {
-    default_type  application/octet-stream;
-    sendfile        on;
-    keepalive_timeout  65;
-
-    server {
-        listen       8080;
-        server_name  localhost;
-
-        location / {
-            root   /Users/name/src/website/html;
-            index  index.html index.htm;
-        }
-
-        location /cdn {
-            #autoindex on;
-            alias  /Users/name/src/website/cdn;
-            try_files $uri /index.html =404;
-        }
-
-        location /ht {
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header Host $host;
-            proxy_pass http://127.0.0.1:3000;
-        }
+## Server Examples
 
-    }
-
-    include servers/*;
-}
-```
-
-**These server examples should not be used as is.** They should be adapted to your setup and "productionized". The general concepts remain the same though.
+- [Express.js and NGINX](./server-examples/node-express-js.md)
+- [Next.js and Vercel](./server-examples/node-next-js.md)
+- [AWS Lambda and API Gateway](./server-examples/node-aws-lambda.md)
 
 ## More information
 - Safari: https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/
-

package/src/core/http-cookies/index.ts

@@ -35,14 +35,27 @@ export class HTTPCookieService {
   private flushIntervalId?: NodeJS.Timer
 
   private constructor(options: HTTPCookieServiceOptions) {
-    this.renewUrl = options.renewUrl
-    this.clearUrl = options.clearUrl
+    const urls = HTTPCookieService.urlHelper(options)
+    this.renewUrl = urls.renewUrl
+    this.clearUrl = urls.clearUrl
+
     this.backoff = options.backoff ?? 300
     this.retries = options.retries ?? 3
     this.flushInterval = options.flushInterval ?? 1000
     this.queue = []
   }
 
+  static urlHelper(options: HTTPCookieServiceOptions): {
+    renewUrl: string
+    clearUrl: string
+  } {
+    const origin = window.location.origin
+    return {
+      renewUrl: new URL(options.renewUrl, origin).href,
+      clearUrl: new URL(options.clearUrl, origin).href,
+    }
+  }
+
   static async load(
     options: HTTPCookieServiceOptions
   ): Promise<HTTPCookieService> {
@@ -50,7 +63,7 @@ export class HTTPCookieService {
 
     // renew any existing HTTPCookies already on the device
     // we want `load()` to block on this, so await directly instead of calling dispatch
-    const req = cookieService.sendHTTPCookies(options.renewUrl)
+    const req = cookieService.sendHTTPCookies(cookieService.renewUrl)
     await retry(req, cookieService.retries, cookieService.backoff).catch(
       console.error
     )

package/src/core/http-cookies/server-examples/node-aws-lambda.md

@@ -0,0 +1,167 @@
+**These server examples should not be used as is. They should be adapted to your setup and "productionized".**
+
+An example HTTPCookieService written as an AWS Lambda Function:
+
+```Javascript
+const USER_COOKIE = "htjs_user_id";
+const ANON_COOKIE = "htjs_anonymous_id";
+const DOMAIN = "CHANGEME.example.com";
+
+function renewCookies(request, response, browserName, serverName) {
+  let cookie = request.cookies[browserName] ?? request.cookies[serverName];
+  if (!cookie) return "";
+  const maxAge = 31_536_000; // 1 year in seconds
+  response.cookies= (response.cookies ?? []).concat([
+    `${browserName}=${cookie}; Max-Age=${maxAge}; Domain=${DOMAIN}; Path=/; SameSite=Lax;`,
+    `${serverName}=${cookie}; Max-Age=${maxAge}; Domain=${DOMAIN}; Path=/; SameSite=Lax; httpOnly=true;`,
+  ]);
+  return cookie;
+}
+
+function clearServerCookie(request, response, serverName) {
+  const cookie = "";
+  const maxAge = 0;
+  response.cookies = (response.cookies ?? []).concat([
+    `${serverName}=${cookie}; Max-Age=${maxAge}; Domain=${DOMAIN}; Path=/; SameSite=Lax; httpOnly;`,
+  ]);
+  return cookie;
+}
+
+function getCookies(reqCookies) {
+  const cookies = {};
+  if (!reqCookies) return cookies;
+  for (const cookieStr of reqCookies) {
+    const cookieArr = cookieStr.split("=");
+    if (cookieArr.length == 1) {
+      cookies[cookieArr[0]] = "";
+    } else if (cookieArr.length == 2) {
+      cookies[cookieArr[0]] = cookieArr[1]; 
+    } else {
+      console.log("cookieArr", cookieArr);
+    }
+  }
+  return cookies;
+}
+
+export const handler = async (event, context) => {
+  const request = {
+    method: event.requestContext.http.method,
+    path: event.pathParameters.proxy,
+    headers: event.headers,
+    cookies: getCookies(event.cookies),
+  }
+  const response = {
+    statusCode: '200',
+    headers: {
+      "Content-Type": "application/json"
+    },
+    isBase64Encoded: false,
+    multiValueHeaders: {},
+    body: "{}",
+  };
+    
+  if (request.method?.toUpperCase() !== "POST") {
+    response.statusCode = 404;
+    return response;
+  }
+
+  if (request.path === "renew") {
+    const userId = renewCookies(request, response, USER_COOKIE, `${USER_COOKIE}_srvr`);
+    const anonymousId = renewCookies(request, response, ANON_COOKIE, `${ANON_COOKIE}_srvr`);
+    response.body = JSON.stringify({
+      userId,
+      anonymousId,
+    })
+  } else if (request.path === "clear") {
+    const userId = clearServerCookie(request, response, `${USER_COOKIE}_srvr`);
+    const anonymousId = clearServerCookie(request, response, `${ANON_COOKIE}_srvr`);
+    response.body = JSON.stringify({
+      userId,
+      anonymousId,
+    })
+  } else {
+    response.statusCode = 404;
+  }
+  return response;
+};
+```
+
+After creating the above Lambda Function, you'll need to setup an [API Gateway](https://aws.amazon.com/api-gateway/). Specifically, create a new `Route` and input the value of `/ht/{proxy}`. Then attach an `integration` for this route, and select your Lambda. Be sure to select the "version 2" payload format. Your HTTPCookieService lambda will now be reachable via HTTP at `${ApiGatewayURL}.com/default/ht/renew`.
+
+However, the HTTPCookieService must live on the same domain and IP address as your website's HTML document.
+
+As one way to accomplish this, you could use a CDN to front both your HTML document and your API Gateway. To do this, create a Cloudfront Distribution. Then create multiple origin configurations. One will have a `customOriginSource`, and a `pathPattern` of `/ht/*` pointing at your API Gateway's URL. The other origin configuration will point at an `s3OriginSource` if your HTML website is being hosted on S3. You would then configure your Web SDK to point at `/ht/renew` and `/ht/clear` for the HTTPCookieService routes.
+
+---
+
+Alternatively, if you simply want a "Hello World" example for a fully functioning HTTPCookieService, you can create two lambdas (one for HTML and another for HTTPCookieService), and put them both on the same API Gateway. You can then test against the API Gateway domain.
+
+Example "Lambda for HTML". This is only intended for testing and "Hello World" purposes:
+
+```Javascript
+const cdnDomain = "https://cdn.hightouch-events.com/browser/release/v1-latest/events.min.js";
+
+const writeKey = "WRITE KEY";
+
+const html = `
+<head>
+<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="${cdnDomain}";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('${writeKey}',{
+  apiHost:'us-east-1.hightouch-events.com',
+  httpCookieServiceOptions: {clearUrl: 'default/ht/clear', renewUrl: 'default/ht/renew', backoff: 5000},
+}),
+e.page()}}();
+</script>
+
+</head>
+<body>
+  Hightouch
+  <a href="#" onClick="(function(){
+    htevents.identify(
+      '123', {
+        email: 'bob@hightouch.io'
+      }, {},
+      () => {
+        console.log('identify call');
+      }
+    );
+    })();return false;">identify
+  </a>
+  <br>
+  <br>
+  <a href="#" onClick="(function(){
+    htevents.track(
+      'clickEvent', {
+        revenue: 30,
+        currency: 'USD',
+        user_actual_id: 123
+      }, {},
+      () => {
+        console.log('track call');
+      }
+    );
+    })();return false;">track
+  </a>
+  <br>
+  <br>
+    <a href="#" onClick="(function(){
+    htevents.reset();
+    htevents.identify('456', { email: 'george@hightouch.com'})
+    })();return false;">reset
+  </a>
+</body>
+`;
+
+export const handler = async () => {
+    const response = {
+        statusCode: 200,
+        headers: {
+            'Content-Type': 'text/html',
+        },
+        body: html,
+    };
+    return response;
+};
+
+```

package/src/core/http-cookies/server-examples/node-express-js.md

@@ -0,0 +1,103 @@
+**These server examples should not be used as is. They should be adapted to your setup and "productionized".**
+
+An example HTTPCookieService written in Node.js/Express.js:
+
+```Javascript
+const express = require("express");
+const cookieParser = require('cookie-parser');
+const cors = require('cors');
+
+const USER_COOKIE = "htjs_user_id";
+const ANON_COOKIE = "htjs_anonymous_id";
+
+function getDomain(req) {
+  let domain = process.env.DOMAIN || req.headers["x-forwarded-for"] || req.get("host");
+  if (domain.startsWith("localhost")) return "localhost";
+  return domain;
+}
+
+function renewCookies(req, res, browserName, serverName) {
+  const cookie = req.cookies[browserName] || req.cookies[serverName];
+  if (!cookie) return "";
+  const cookieParams = {maxAge:31536000*1000, domain: getDomain(req), sameSite: "lax"};
+  res.cookie(browserName, cookie, {...cookieParams});
+  res.cookie(serverName, cookie, {...cookieParams, httpOnly:true});
+  return cookie;
+}
+
+function clearServerCookie(req, res, serverName) {
+  const cookie = "";
+  const cookieParams = {maxAge:0, domain: getDomain(req), sameSite: "lax"};
+  res.cookie(serverName, "", {...cookieParams, httpOnly:true});
+  return cookie;
+}
+
+const app = express();
+app.use(cookieParser());
+app.use(cors())
+
+app.post("/ht/renew", (req, res) => {
+  // recreate a browser cookie from an existing server cookie, OR
+  // create a new server cookie that can later be used to recreate from.
+  return res.json({
+    userId: renewCookies(req, res, USER_COOKIE, `${USER_COOKIE}_srvr`),
+    anonymousId: renewCookies(req, res, ANON_COOKIE, `${ANON_COOKIE}_srvr`),
+  })
+});
+
+app.post("/ht/clear", (req, res) => {
+  // clear server cookies, e.g. if the user asks to clear all cookies.
+  return res.json({
+    userId: clearServerCookie(req, res, `${USER_COOKIE}_srvr`),
+    anonymousId: clearServerCookie(req, res, `${ANON_COOKIE}_srvr`),
+  })
+});
+
+app.listen(process.env.PORT || 3000, () => {
+  console.log(`Listening on port ${process.env.PORT}...`);
+});
+```
+
+The HTTPCookieService must live on the same domain and IP address as your website's HTML document.
+
+As one way to accomplish this, you could have NGINX both serve your HTML document and forward requests to the Node.js/Express server.
+
+An **overly simplified** NGINX reverse proxy:
+```
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  65;
+
+    server {
+        listen       8080;
+        server_name  localhost;
+
+        location / {
+            root   /Users/name/src/website/html;
+            index  index.html index.htm;
+        }
+
+        location /cdn {
+            #autoindex on;
+            alias  /Users/name/src/website/cdn;
+            try_files $uri /index.html =404;
+        }
+
+        location /ht {
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header Host $host;
+            proxy_pass http://127.0.0.1:3000;
+        }
+
+    }
+
+    include servers/*;
+}
+```

package/src/core/http-cookies/server-examples/node-next-js.md

@@ -0,0 +1,75 @@
+**These server examples should not be used as is. They should be adapted to your setup and "productionized".**
+
+An example HTTPCookieService written as a Next.js API Route.
+
+```Javascript
+import type { NextApiRequest, NextApiResponse } from "next";
+
+const USER_COOKIE = "htjs_user_id";
+const ANON_COOKIE = "htjs_anonymous_id";
+
+function getDomain(request: NextApiRequest) {
+  const domain = request.headers.host?.toString() ?? "";
+  if (domain.startsWith("localhost")) return "localhost";
+  return domain;
+}
+
+function renewCookies(request: NextApiRequest, response: NextApiResponse, browserName: string, serverName: string) {
+  const cookie = request.cookies[browserName] ?? request.cookies[serverName];
+  if (!cookie) return "";
+  const maxAge = 31_536_000; // 1 year in seconds
+  const domain = getDomain(request);
+  response.setHeader("Set-Cookie", [
+    ...((response.getHeader("Set-Cookie") as string[]) ?? []),
+    `${browserName}=${cookie}; Max-Age=${maxAge}; Domain=${domain}; Path=/; SameSite=Lax;`,
+    `${serverName}=${cookie}; Max-Age=${maxAge}; Domain=${domain}; Path=/; SameSite=Lax; httpOnly=true;`,
+  ]);
+  return cookie;
+}
+
+function clearServerCookie(request: NextApiRequest, response: NextApiResponse, serverName: string) {
+  const cookie = "";
+  const maxAge = 0;
+  const domain = getDomain(request);
+  response.setHeader("Set-Cookie", [
+    ...((response.getHeader("Set-Cookie") as string[]) ?? []),
+    `${serverName}=${cookie}; Max-Age=${maxAge}; Domain=${domain}; Path=/; SameSite=Lax; httpOnly;`,
+  ]);
+  return cookie;
+}
+
+export default function handler(request: NextApiRequest, response: NextApiResponse) {
+  if (request.method?.toUpperCase() !== "POST") {
+    response.status(404);
+    response.end();
+    return;
+  }
+
+  const slug = (request.query.slug as string).toLowerCase();
+
+  if (slug === "renew") {
+    response.status(200);
+    response.json({
+      userId: renewCookies(request, response, USER_COOKIE, `${USER_COOKIE}_srvr`),
+      anonymousId: renewCookies(request, response, ANON_COOKIE, `${ANON_COOKIE}_srvr`),
+    });
+  } else if (slug === "clear") {
+    response.status(200);
+    response.json({
+      userId: clearServerCookie(request, response, `${USER_COOKIE}_srvr`),
+      anonymousId: clearServerCookie(request, response, `${ANON_COOKIE}_srvr`),
+    });
+  } else {
+    response.status(404);
+    response.end();
+  }
+}
+```
+
+The HTTPCookieService must live on the same domain and IP address as your website's HTML document.
+
+As one way to accomplish this, you could create one Next.js project to serve both your HTML site and your API.
+
+The above example code might live at `src/pages/api/ht/[slug].ts`, while your other non-API pages might live somewhere like `src/pages/blog/index.tsx`.
+
+See [Next.js](https://nextjs.org/docs) for more information.

package/src/core/user/index.ts

@@ -140,6 +140,14 @@ export class User {
       legacyUser.id && this.id(legacyUser.id)
       legacyUser.traits && this.traits(legacyUser.traits)
     }
+
+    // HTTPCookies require that localStorage values be synced to cookies
+    if (this.options.httpCookieService) {
+      this.identityStore.getAndSync(this.anonKey)
+      this.identityStore.getAndSync(this.idKey)
+      this.options.httpCookieService?.dispatchCreate()
+    }
+
     autoBind(this)
   }
 

package/src/core/user/tld.ts

@@ -1,4 +1,4 @@
-import cookie from 'js-cookie'
+import cookie, { CookieAttributes } from 'js-cookie'
 
 /**
  * Levels returns all levels of the given url.
@@ -45,11 +45,15 @@ export function tld(url: string): string | undefined {
 
   const lvls = levels(parsedUrl)
 
-  // Lookup the real top level one.
+  // Test for the top most domain that the browser allows
   for (let i = 0; i < lvls.length; ++i) {
-    const cname = '__tld__'
+    const cname = Math.round(Math.random() * 10_000).toString()
     const domain = lvls[i]
-    const opts = { domain: '.' + domain }
+    const opts = {
+      domain: '.' + domain,
+      path: '/',
+      sameSite: 'Lax',
+    } as CookieAttributes
 
     try {
       // cookie access throw an error if the library is ran inside a sandboxed environment (e.g. sandboxed iframe)

package/src/generated/version.ts

@@ -1,2 +1,2 @@
 // This file is generated.
-export const version = '1.2.0'
+export const version = '1.3.1'