[PA-4600] feat(heap): update browser destination code to load heap js v5 script

packages/browser-destinations/destinations/heap/src/index.ts

@@ -1,15 +1,17 @@
 import type { Settings } from './generated-types'
 import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
 import { browserDestination } from '@segment/browser-destination-runtime/shim'
-import { HeapApi, UserConfig } from './types'
+import type { HeapApi, HeapMethods, UserConfig } from './types'
 import { defaultValues } from '@segment/actions-core'
 import trackEvent from './trackEvent'
 import identifyUser from './identifyUser'
+import { initScript } from './init-script'
 import { isDefined } from './utils'
 
 declare global {
   interface Window {
-    heap: HeapApi
+    heapReadyCb: Array<{ name: HeapMethods; fn: () => void }>
+    heap: Record<HeapMethods, (...args: any[]) => void> & HeapApi
   }
 }
 
@@ -58,9 +60,16 @@ export const destination: BrowserDestinationDefinition<Settings, HeapApi> = {
       required: false
     },
     trackingServer: {
-      label: 'Tracking Server',
+      label: 'Tracking Server (deprecated)',
       description:
-        'This is an optional setting. This is used to set up first-party data collection. For most cased this should not be set. For more information visit the heap [docs page](https://developers.heap.io/docs/set-up-first-party-data-collection-in-heap).',
+        'This is an optional setting. This is used to set up first-party data collection. For most cased this should not be set. For more information visit the heap [docs page](https://developers.heap.io/docs/set-up-first-party-data-collection-in-heap). This field is deprecated in favor of "ingestServer".',
+      type: 'string',
+      required: false
+    },
+    ingestServer: {
+      label: 'Ingest Server',
+      description:
+        'This is an optional setting. This is used to set up first-party data collection. For most cased this should not be set. For more information visit the heap [docs page](https://developers.heap.io/docs/web#ingestserver).',
       type: 'string',
       required: false
     },
@@ -89,24 +98,20 @@ export const destination: BrowserDestinationDefinition<Settings, HeapApi> = {
       disableTextCapture: settings.disableTextCapture || false,
       secureCookie: settings.secureCookie || false
     }
-
-    if (settings.trackingServer) {
-      config.trackingServer = settings.trackingServer
+    if (settings.ingestServer) {
+      config.ingestServer = settings.ingestServer
     }
 
-    // heap.appid and heap.config must be set before loading heap.js.
-    window.heap = window.heap || []
-    window.heap.appid = settings.appId
-    window.heap.config = config
+    initScript(settings.appId, config)
 
     if (isDefined(settings.hostname)) {
-      await deps.loadScript(`https://${settings.hostname}/js/heap-${settings.appId}.js`)
+      await deps.loadScript(`https://${settings.hostname}/config/${settings.appId}/heap_config.js`)
     } else {
-      await deps.loadScript(`https://cdn.heapanalytics.com/js/heap-${settings.appId}.js`)
+      await deps.loadScript(`https://cdn.us.heap-api.com/config/${settings.appId}/heap_config.js`)
     }
 
     // Explained here: https://stackoverflow.com/questions/14859058/why-does-the-segment-io-loader-script-push-method-names-args-onto-a-queue-which
-    await deps.resolveWhen(() => Object.prototype.hasOwnProperty.call(window, 'heap'), 100)
+    await deps.resolveWhen(() => window.heap.loaded === true, 300)
 
     return window.heap
   },

packages/browser-destinations/destinations/heap/src/init-script.ts

@@ -0,0 +1,69 @@
+import type { HeapMethods, UserConfig } from './types'
+
+/**
+ * Initialize the Heap script with the provided environment ID and configuration.
+ */
+export const initScript = (envId: string, config: UserConfig) => {
+  // Ensure heapReadyCb exists on the window object
+  window.heapReadyCb = window.heapReadyCb || []
+
+  // Ensure heap exists on the window object
+  window.heap = window.heap || ({} as any)
+
+  window.heap.load = function (
+    envId: string,
+    clientConfig: UserConfig = { disableTextCapture: false, secureCookie: false }
+  ): void {
+    window.heap.envId = envId
+    window.heap.clientConfig = clientConfig
+    window.heap.clientConfig.shouldFetchServerConfig = false
+
+    // Define all Heap API methods and add them to the heap object
+    const methods: HeapMethods[] = [
+      'init',
+      'startTracking',
+      'stopTracking',
+      'track',
+      'resetIdentity',
+      'identify',
+      'identifyHashed',
+      'getSessionId',
+      'getUserId',
+      'getIdentity',
+      'addUserProperties',
+      'addEventProperties',
+      'removeEventProperty',
+      'clearEventProperties',
+      'addAccountProperties',
+      'addAdapter',
+      'addTransformer',
+      'addTransformerFn',
+      'onReady',
+      'addPageviewProperties',
+      'removePageviewProperty',
+      'clearPageviewProperties',
+      'trackPageview'
+    ]
+
+    const createMethodProxy = (methodName: HeapMethods) => {
+      return function (...args: any[]) {
+        // Push method calls to heapReadyCb until the script is fully loaded
+        window.heapReadyCb.push({
+          name: methodName,
+          fn: () => {
+            if (window.heap[methodName]) {
+              window.heap[methodName](...args)
+            }
+          }
+        })
+      }
+    }
+
+    // Proxy all methods to heap
+    for (const method of methods) {
+      window.heap[method] = createMethodProxy(method)
+    }
+  }
+
+  window.heap.load(envId, config)
+}

packages/browser-destinations/destinations/heap/src/test-utilities.ts

@@ -7,6 +7,7 @@ export const HEAP_TEST_ENV_ID = '1'
 export const createMockedHeapJsSdk = (): HeapApi => {
   return {
     appid: HEAP_TEST_ENV_ID,
+    envId: HEAP_TEST_ENV_ID,
     config: {
       disableTextCapture: true,
       secureCookie: true

packages/browser-destinations/destinations/heap/src/types.ts

@@ -1,5 +1,6 @@
 export type UserConfig = {
   trackingServer?: string
+  ingestServer?: string
   disableTextCapture: boolean
   secureCookie: boolean
 }
@@ -14,9 +15,38 @@ type EventProperties = {
 
 export type HeapApi = {
   appid: string
+  envId: string
   track: (eventName: string, eventProperties: EventProperties, library?: string) => void
-  load: () => void
+  load: (envId: string, clientConfig?: UserConfig) => void
+  loaded?: boolean
   config: UserConfig
+  clientConfig?: Partial<UserConfig> & { shouldFetchServerConfig?: boolean }
   identify: (identity: string) => void
   addUserProperties: (properties: UserProperties) => void
 }
+
+// Define types for Heap methods
+export type HeapMethods =
+  | 'init'
+  | 'startTracking'
+  | 'stopTracking'
+  | 'track'
+  | 'resetIdentity'
+  | 'identify'
+  | 'identifyHashed'
+  | 'getSessionId'
+  | 'getUserId'
+  | 'getIdentity'
+  | 'addUserProperties'
+  | 'addEventProperties'
+  | 'removeEventProperty'
+  | 'clearEventProperties'
+  | 'addAccountProperties'
+  | 'addAdapter'
+  | 'addTransformer'
+  | 'addTransformerFn'
+  | 'onReady'
+  | 'addPageviewProperties'
+  | 'removePageviewProperty'
+  | 'clearPageviewProperties'
+  | 'trackPageview'