@workleap/mixpanel 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @workleap/mixpanel
 
+## 2.0.2
+
+### Patch Changes
+
+- [#50](https://github.com/workleap/wl-telemetry/pull/50) [`e53857a`](https://github.com/workleap/wl-telemetry/commit/e53857a6c1ba13894f643076f3675dc2b61a9cc5) Thanks [@alexasselin008](https://github.com/alexasselin008)! - Add the trackingEndpoint options to the initializeMixpanel function to allow specifying a custom endpoint for tracking events.
+
+## 2.0.1
+
+### Patch Changes
+
+- [#36](https://github.com/workleap/wl-telemetry/pull/36) [`85f432b`](https://github.com/workleap/wl-telemetry/commit/85f432bb1c45433d24a765da7249fef4abb949d4) Thanks [@patricklafrance](https://github.com/patricklafrance)! - Minor fixes to the API.
+
 ## 2.0.0
 
 ### Major Changes

package/dist/js/context.d.ts

@@ -0,0 +1,10 @@
+import type { SuperProperties } from "./properties.ts";
+export declare const ContextVariableName = "__WLP_MIXPANEL_CONTEXT__";
+export interface MixpanelContext {
+    productId: string;
+    endpoint: string;
+    superProperties: SuperProperties;
+    verbose: boolean;
+}
+export declare function setMixpanelContext(context: MixpanelContext): void;
+export declare function getMixpanelContext(): MixpanelContext;

package/dist/js/context.js

@@ -0,0 +1,25 @@
+
+;// CONCATENATED MODULE: ./src/js/context.ts
+const ContextVariableName = "__WLP_MIXPANEL_CONTEXT__";
+function setMixpanelContext(context) {
+    // Will be used by the "track" function.
+    // It's important to share the context with a global DOM object rather than
+    // a singleton because projects like the platform widgets will use a distinct instance
+    // of this package than the host application.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    globalThis[ContextVariableName] = context;
+}
+function getMixpanelContext() {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const context = globalThis[ContextVariableName];
+    if (!context) {
+        throw new Error("[mixpanel] The Mixpanel context is not available. Did you initialize Mixpanel with the \"initializeMixpanel\" function?");
+    }
+    return context;
+}
+
+export { ContextVariableName, getMixpanelContext, setMixpanelContext };
+
+//# sourceMappingURL=context.js.map

package/dist/js/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"js/context.js","sources":["webpack://@workleap/mixpanel/./src/js/context.ts"],"sourcesContent":["import type { SuperProperties } from \"./properties.ts\";\n\nexport const ContextVariableName = \"__WLP_MIXPANEL_CONTEXT__\";\n\nexport interface MixpanelContext {\n    productId: string;\n    endpoint: string;\n    superProperties: SuperProperties;\n    verbose: boolean;\n}\n\nexport function setMixpanelContext(context: MixpanelContext) {\n    // Will be used by the \"track\" function.\n    // It's important to share the context with a global DOM object rather than\n    // a singleton because projects like the platform widgets will use a distinct instance\n    // of this package than the host application.\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    globalThis[ContextVariableName] = context;\n}\n\nexport function getMixpanelContext() {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    const context = globalThis[ContextVariableName] as MixpanelContext;\n\n    if (!context) {\n        throw new Error(\"[mixpanel] The Mixpanel context is not available. Did you initialize Mixpanel with the \\\"initializeMixpanel\\\" function?\");\n    }\n\n    return context;\n}\n\n\n"],"names":["ContextVariableName","setMixpanelContext","context","globalThis","getMixpanelContext","Error"],"mappings":";;AAEO,MAAMA,sBAAsB,2BAA2B;AASvD,SAASC,mBAAmBC,OAAwB;IACvD,wCAAwC;IACxC,2EAA2E;IAC3E,sFAAsF;IACtF,6CAA6C;IAC7C,6DAA6D;IAC7D,aAAa;IACbC,UAAU,CAACH,oBAAoB,GAAGE;AACtC;AAEO,SAASE;IACZ,6DAA6D;IAC7D,aAAa;IACb,MAAMF,UAAUC,UAAU,CAACH,oBAAoB;IAE/C,IAAI,CAACE,SAAS;QACV,MAAM,IAAIG,MAAM;IACpB;IAEA,OAAOH;AACX"}

package/dist/js/createTrackingFunction.d.ts

@@ -0,0 +1,35 @@
+import { type MixpanelEventProperties } from "./properties.ts";
+/**
+ * @see https://workleap.github.io/wl-telemetry
+ */
+export interface CreateTrackingFunctionOptions {
+    /**
+     * The product identifier of the target product.
+     */
+    targetProductId?: string;
+}
+/**
+ * @see https://workleap.github.io/wl-telemetry
+ */
+export interface TrackingFunctionOptions {
+    /**
+   * Whether to keep the connection alive for the tracking request.
+   * It is mostly used for tracking links where the user might navigate away before the request is completed.
+   *
+   * Caution! The body size for keepalive requests is limited to 64 kibibytes.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#keepalive
+   *
+   * @default false
+   */
+    keepAlive?: boolean;
+}
+/**
+ * A function that sends tracking events to the tracking API.
+ * @param eventName The name of the event to track.
+ * @param properties The properties to send with the event.
+ * @param options Options for tracking the event.
+ * @see https://workleap.github.io/wl-telemetry
+ */
+export type TrackingFunction = (eventName: string, properties: MixpanelEventProperties, options?: TrackingFunctionOptions) => Promise<void>;
+export declare function createTrackingFunction(options?: CreateTrackingFunctionOptions): TrackingFunction;

package/dist/js/createTrackingFunction.js

@@ -0,0 +1,49 @@
+import { getMixpanelContext } from "./context.js";
+import { getBaseProperties } from "./properties.js";
+
+;// CONCATENATED MODULE: external "./context.js"
+
+;// CONCATENATED MODULE: external "./properties.js"
+
+;// CONCATENATED MODULE: ./src/js/createTrackingFunction.ts
+
+
+function createTrackingFunction(options = {}) {
+    const { targetProductId } = options;
+    const { productId, endpoint, superProperties } = getMixpanelContext();
+    const trackFunction = async (eventName, properties, _options = {})=>{
+        try {
+            const { keepAlive = false } = _options;
+            const baseProperties = getBaseProperties();
+            const allProperties = {
+                ...baseProperties,
+                ...Object.fromEntries(superProperties),
+                ...properties
+            };
+            await fetch(endpoint, {
+                method: "POST",
+                credentials: "include",
+                keepalive: keepAlive,
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    eventName,
+                    productIdentifier: productId,
+                    // Not sure why, but it seems important to send "null" if not target product identifier
+                    // are provided.
+                    targetProductIdentifier: targetProductId ?? null,
+                    properties: allProperties
+                })
+            });
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (error) {
+        // Do nothing...
+        }
+    };
+    return trackFunction;
+}
+
+export { createTrackingFunction };
+
+//# sourceMappingURL=createTrackingFunction.js.map

package/dist/js/createTrackingFunction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"js/createTrackingFunction.js","sources":["webpack://@workleap/mixpanel/./src/js/createTrackingFunction.ts"],"sourcesContent":["import { getMixpanelContext } from \"./context.ts\";\nimport { getBaseProperties, type MixpanelEventProperties } from \"./properties.ts\";\n\n/**\n * @see https://workleap.github.io/wl-telemetry\n */\nexport interface CreateTrackingFunctionOptions {\n    /**\n     * The product identifier of the target product.\n     */\n    targetProductId?: string;\n}\n\n/**\n * @see https://workleap.github.io/wl-telemetry\n */\nexport interface TrackingFunctionOptions {\n    /**\n   * Whether to keep the connection alive for the tracking request.\n   * It is mostly used for tracking links where the user might navigate away before the request is completed.\n   *\n   * Caution! The body size for keepalive requests is limited to 64 kibibytes.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#keepalive\n   *\n   * @default false\n   */\n    keepAlive?: boolean;\n}\n\n/**\n * A function that sends tracking events to the tracking API.\n * @param eventName The name of the event to track.\n * @param properties The properties to send with the event.\n * @param options Options for tracking the event.\n * @see https://workleap.github.io/wl-telemetry\n */\nexport type TrackingFunction = (eventName: string, properties: MixpanelEventProperties, options?: TrackingFunctionOptions) => Promise<void>;\n\nexport function createTrackingFunction(options: CreateTrackingFunctionOptions = {}) {\n    const {\n        targetProductId\n    } = options;\n\n    const {\n        productId,\n        endpoint,\n        superProperties\n    } = getMixpanelContext();\n\n    const trackFunction: TrackingFunction = async (eventName, properties, _options = {}) => {\n        try {\n            const {\n                keepAlive = false\n            } = _options;\n\n            const baseProperties = getBaseProperties();\n\n            const allProperties = {\n                ...baseProperties,\n                ...Object.fromEntries(superProperties),\n                ...properties\n            };\n\n            await fetch(endpoint, {\n                method: \"POST\",\n                credentials: \"include\",\n                keepalive: keepAlive,\n                headers: { \"Content-Type\": \"application/json\" },\n                body: JSON.stringify({\n                    eventName,\n                    productIdentifier: productId,\n                    // Not sure why, but it seems important to send \"null\" if not target product identifier\n                    // are provided.\n                    targetProductIdentifier : targetProductId ?? null,\n                    properties: allProperties\n                })\n            });\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        } catch (error: unknown) {\n            // Do nothing...\n        }\n    };\n\n    return trackFunction;\n}\n"],"names":["getMixpanelContext","getBaseProperties","createTrackingFunction","options","targetProductId","productId","endpoint","superProperties","trackFunction","eventName","properties","_options","keepAlive","baseProperties","allProperties","Object","fetch","JSON","error"],"mappings":";;;;;;;;AAAkD;AACgC;AAsC3E,SAASE,uBAAuBC,UAAyC,CAAC,CAAC;IAC9E,MAAM,EACFC,eAAe,EAClB,GAAGD;IAEJ,MAAM,EACFE,SAAS,EACTC,QAAQ,EACRC,eAAe,EAClB,GAAGP,kBAAkBA;IAEtB,MAAMQ,gBAAkC,OAAOC,WAAWC,YAAYC,WAAW,CAAC,CAAC;QAC/E,IAAI;YACA,MAAM,EACFC,YAAY,KAAK,EACpB,GAAGD;YAEJ,MAAME,iBAAiBZ,iBAAiBA;YAExC,MAAMa,gBAAgB;gBAClB,GAAGD,cAAc;gBACjB,GAAGE,OAAO,WAAW,CAACR,gBAAgB;gBACtC,GAAGG,UAAU;YACjB;YAEA,MAAMM,MAAMV,UAAU;gBAClB,QAAQ;gBACR,aAAa;gBACb,WAAWM;gBACX,SAAS;oBAAE,gBAAgB;gBAAmB;gBAC9C,MAAMK,KAAK,SAAS,CAAC;oBACjBR;oBACA,mBAAmBJ;oBACnB,uFAAuF;oBACvF,gBAAgB;oBAChB,yBAA0BD,mBAAmB;oBAC7C,YAAYU;gBAChB;YACJ;QACJ,6DAA6D;QAC7D,EAAE,OAAOI,OAAgB;QACrB,gBAAgB;QACpB;IACJ;IAEA,OAAOV;AACX"}

package/dist/js/env.d.ts

@@ -1,4 +1,4 @@
 declare const EnvironmentList: readonly ["development", "staging", "production", "local", "msw"];
 export type Environment = typeof EnvironmentList[number];
-export declare function getTrackingEndpoint(envOrTrackingApiBaseUrl: Environment | (string & {})): string;
+export declare function getTrackingEndpoint(envOrTrackingApiBaseUrl: Environment | (string & {}), trackingEndpoint?: string): string;
 export {};

package/dist/js/env.js

@@ -18,14 +18,14 @@ const NavigationApiBaseUrl = {
 function resolveApiUrl(path, baseUrl) {
     return `${baseUrl}${baseUrl.endsWith("/") ? "" : "/"}${path.startsWith("/") ? path.substring(1) : path}`;
 }
-function getTrackingEndpoint(envOrTrackingApiBaseUrl) {
+function getTrackingEndpoint(envOrTrackingApiBaseUrl, trackingEndpoint = "tracking/track") {
     let baseUrl;
     if (EnvironmentList.includes(envOrTrackingApiBaseUrl)) {
         baseUrl = NavigationApiBaseUrl[envOrTrackingApiBaseUrl];
     } else {
         baseUrl = envOrTrackingApiBaseUrl;
     }
-    return resolveApiUrl("tracking/track", baseUrl);
+    return resolveApiUrl(trackingEndpoint, baseUrl);
 }
 
 export { getTrackingEndpoint };

package/dist/js/env.js.map

@@ -1 +1 @@
-{"version":3,"file":"js/env.js","sources":["webpack://@workleap/mixpanel/./src/js/env.ts"],"sourcesContent":["\nconst EnvironmentList = [\"development\", \"staging\", \"production\", \"local\", \"msw\"] as const;\n\nexport type Environment = typeof EnvironmentList[number];\n\nconst NavigationApiBaseUrl: Record<Environment, string> = {\n    \"production\": \"https://api.platform.workleap.com/shell/navigation/\",\n    \"staging\": \"https://api.platform.workleap-stg.com/shell/navigation/\",\n    \"development\": \"https://api.platform.workleap-dev.com/shell/navigation/\",\n    \"local\": \"https://api.platform.workleap-dev.com/shell/navigation/\",\n    \"msw\": \"/api/shell/navigation/\"\n};\n\n// Cannot use URL() because it doesn't support relative base url: https://github.com/whatwg/url/issues/531.\nfunction resolveApiUrl(path: string, baseUrl: string | undefined) : string {\n    return `${baseUrl}${baseUrl!.endsWith(\"/\") ? \"\" : \"/\"}${path.startsWith(\"/\") ? path.substring(1) : path}`;\n}\n\nexport function getTrackingEndpoint(envOrTrackingApiBaseUrl: Environment | (string & {})) {\n    let baseUrl: string;\n\n    if (EnvironmentList.includes(envOrTrackingApiBaseUrl as Environment)) {\n        baseUrl = NavigationApiBaseUrl[envOrTrackingApiBaseUrl as Environment];\n    } else {\n        baseUrl = envOrTrackingApiBaseUrl;\n    }\n\n    return resolveApiUrl(\"tracking/track\", baseUrl);\n}\n"],"names":["EnvironmentList","NavigationApiBaseUrl","resolveApiUrl","path","baseUrl","getTrackingEndpoint","envOrTrackingApiBaseUrl"],"mappings":";;AACA,MAAMA,kBAAkB;IAAC;IAAe;IAAW;IAAc;IAAS;CAAM;AAIhF,MAAMC,uBAAoD;IACtD,cAAc;IACd,WAAW;IACX,eAAe;IACf,SAAS;IACT,OAAO;AACX;AAEA,2GAA2G;AAC3G,SAASC,cAAcC,IAAY,EAAEC,OAA2B;IAC5D,OAAO,GAAGA,UAAUA,QAAS,QAAQ,CAAC,OAAO,KAAK,MAAMD,KAAK,UAAU,CAAC,OAAOA,KAAK,SAAS,CAAC,KAAKA,MAAM;AAC7G;AAEO,SAASE,oBAAoBC,uBAAoD;IACpF,IAAIF;IAEJ,IAAIJ,gBAAgB,QAAQ,CAACM,0BAAyC;QAClEF,UAAUH,oBAAoB,CAACK,wBAAuC;IAC1E,OAAO;QACHF,UAAUE;IACd;IAEA,OAAOJ,cAAc,kBAAkBE;AAC3C"}
+{"version":3,"file":"js/env.js","sources":["webpack://@workleap/mixpanel/./src/js/env.ts"],"sourcesContent":["\nconst EnvironmentList = [\"development\", \"staging\", \"production\", \"local\", \"msw\"] as const;\n\nexport type Environment = typeof EnvironmentList[number];\n\nconst NavigationApiBaseUrl: Record<Environment, string> = {\n    \"production\": \"https://api.platform.workleap.com/shell/navigation/\",\n    \"staging\": \"https://api.platform.workleap-stg.com/shell/navigation/\",\n    \"development\": \"https://api.platform.workleap-dev.com/shell/navigation/\",\n    \"local\": \"https://api.platform.workleap-dev.com/shell/navigation/\",\n    \"msw\": \"/api/shell/navigation/\"\n};\n\n// Cannot use URL() because it doesn't support relative base url: https://github.com/whatwg/url/issues/531.\nfunction resolveApiUrl(path: string, baseUrl: string | undefined) : string {\n    return `${baseUrl}${baseUrl!.endsWith(\"/\") ? \"\" : \"/\"}${path.startsWith(\"/\") ? path.substring(1) : path}`;\n}\n\nexport function getTrackingEndpoint(envOrTrackingApiBaseUrl: Environment | (string & {}), trackingEndpoint = \"tracking/track\"): string {\n    let baseUrl: string;\n\n    if (EnvironmentList.includes(envOrTrackingApiBaseUrl as Environment)) {\n        baseUrl = NavigationApiBaseUrl[envOrTrackingApiBaseUrl as Environment];\n    } else {\n        baseUrl = envOrTrackingApiBaseUrl;\n    }\n\n    return resolveApiUrl(trackingEndpoint, baseUrl);\n}\n"],"names":["EnvironmentList","NavigationApiBaseUrl","resolveApiUrl","path","baseUrl","getTrackingEndpoint","envOrTrackingApiBaseUrl","trackingEndpoint"],"mappings":";;AACA,MAAMA,kBAAkB;IAAC;IAAe;IAAW;IAAc;IAAS;CAAM;AAIhF,MAAMC,uBAAoD;IACtD,cAAc;IACd,WAAW;IACX,eAAe;IACf,SAAS;IACT,OAAO;AACX;AAEA,2GAA2G;AAC3G,SAASC,cAAcC,IAAY,EAAEC,OAA2B;IAC5D,OAAO,GAAGA,UAAUA,QAAS,QAAQ,CAAC,OAAO,KAAK,MAAMD,KAAK,UAAU,CAAC,OAAOA,KAAK,SAAS,CAAC,KAAKA,MAAM;AAC7G;AAEO,SAASE,oBAAoBC,uBAAoD,EAAEC,mBAAmB,gBAAgB;IACzH,IAAIH;IAEJ,IAAIJ,gBAAgB,QAAQ,CAACM,0BAAyC;QAClEF,UAAUH,oBAAoB,CAACK,wBAAuC;IAC1E,OAAO;QACHF,UAAUE;IACd;IAEA,OAAOJ,cAAcK,kBAAkBH;AAC3C"}

package/dist/js/index.d.ts

@@ -1,4 +1,4 @@
+export { createTrackingFunction, type CreateTrackingFunctionOptions, type TrackingFunction, type TrackingFunctionOptions } from "./createTrackingFunction.ts";
 export type { Environment } from "./env.ts";
-export { getMixpanelTrackingFunction } from "./getMixpanelTrackingFunction.ts";
-export { initializeMixpanel, type InitializeMixpanelOptions, type MixpanelTrackingFunction, type MixpanelTrackingOptions } from "./initializeMixpanel.ts";
-export type { MixpanelTrackEventProperties } from "./properties.ts";
+export { initializeMixpanel, type InitializeMixpanelOptions } from "./initializeMixpanel.ts";
+export { setSuperProperties, setSuperProperty, type MixpanelEventProperties } from "./properties.ts";

package/dist/js/index.js

@@ -1,14 +1,18 @@
-import { getMixpanelTrackingFunction } from "./getMixpanelTrackingFunction.js";
+import { createTrackingFunction } from "./createTrackingFunction.js";
 import { initializeMixpanel } from "./initializeMixpanel.js";
+import { setSuperProperties, setSuperProperty } from "./properties.js";
 
-;// CONCATENATED MODULE: external "./getMixpanelTrackingFunction.js"
+;// CONCATENATED MODULE: external "./createTrackingFunction.js"
 
 ;// CONCATENATED MODULE: external "./initializeMixpanel.js"
 
+;// CONCATENATED MODULE: external "./properties.js"
+
 ;// CONCATENATED MODULE: ./src/js/index.ts
 
 
 
-export { getMixpanelTrackingFunction, initializeMixpanel };
+
+export { createTrackingFunction, initializeMixpanel, setSuperProperties, setSuperProperty };
 
 //# sourceMappingURL=index.js.map

package/dist/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"js/index.js","sources":["webpack://@workleap/mixpanel/./src/js/index.ts"],"sourcesContent":["export type { Environment } from \"./env.ts\";\nexport { getMixpanelTrackingFunction } from \"./getMixpanelTrackingFunction.ts\";\nexport { initializeMixpanel, type InitializeMixpanelOptions, type MixpanelTrackingFunction, type MixpanelTrackingOptions } from \"./initializeMixpanel.ts\";\nexport type { MixpanelTrackEventProperties } from \"./properties.ts\";\n\n"],"names":["getMixpanelTrackingFunction","initializeMixpanel"],"mappings":";;;;;;;;AAC+E;AAC2E"}
+{"version":3,"file":"js/index.js","sources":["webpack://@workleap/mixpanel/./src/js/index.ts"],"sourcesContent":["export { createTrackingFunction, type CreateTrackingFunctionOptions, type TrackingFunction, type TrackingFunctionOptions } from \"./createTrackingFunction.ts\";\nexport type { Environment } from \"./env.ts\";\nexport { initializeMixpanel, type InitializeMixpanelOptions } from \"./initializeMixpanel.ts\";\nexport { setSuperProperties, setSuperProperty, type MixpanelEventProperties } from \"./properties.ts\";\n\n"],"names":["createTrackingFunction","initializeMixpanel","setSuperProperties","setSuperProperty"],"mappings":";;;;;;;;;;;AAA8J;AAEjE;AACQ"}

package/dist/js/initializeMixpanel.d.ts

@@ -1,37 +1,14 @@
 import { type Environment } from "./env.ts";
-import { type MixpanelTrackEventProperties } from "./properties.ts";
 /**
  * @see https://workleap.github.io/wl-telemetry
  */
-export interface MixpanelTrackingOptions {
+export interface InitializeMixpanelOptions {
     /**
-     * The product identifier of the target product.
+     * The endpoint to use for tracking events.
+     * If not provided, the default endpoint for the environment will be used.
+     * @default "tracking/track"
      */
-    targetProductId?: string;
-    /**
-   * Whether to keep the connection alive for the tracking request.
-   * It is mostly used for tracking links where the user might navigate away before the request is completed.
-   *
-   * Caution! The body size for keepalive requests is limited to 64 kibibytes.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#keepalive
-   *
-   * @default false
-   */
-    keepAlive?: boolean;
-}
-/**
- * A function that sends tracking events to the tracking API.
- * @param eventName The name of the event to track.
- * @param properties The properties to send with the event.
- * @param options Options for tracking the event.
- * @see https://workleap.github.io/wl-telemetry
- */
-export type MixpanelTrackingFunction = (eventName: string, properties: MixpanelTrackEventProperties, options?: MixpanelTrackingOptions) => Promise<void>;
-/**
- * @see https://workleap.github.io/wl-telemetry
- */
-export interface InitializeMixpanelOptions {
+    trackingEndpoint?: string;
     verbose?: boolean;
 }
 export declare function __resetInitializationGuard(): void;
@@ -43,4 +20,4 @@ export declare function __resetInitializationGuard(): void;
  * @returns A function that sends tracking events to the tracking API.
  * @see https://workleap.github.io/wl-telemetry
  */
-export declare function initializeMixpanel(productId: string, envOrTrackingApiBaseUrl: Environment | (string & {}), options?: InitializeMixpanelOptions): MixpanelTrackingFunction;
+export declare function initializeMixpanel(productId: string, envOrTrackingApiBaseUrl: Environment | (string & {}), options?: InitializeMixpanelOptions): void;

package/dist/js/initializeMixpanel.js

@@ -1,14 +1,14 @@
 import { getBootstrappingStore, getTelemetryContext } from "@workleap/telemetry";
+import { setMixpanelContext } from "./context.js";
 import { getTrackingEndpoint } from "./env.js";
-import { TrackingFunctionName } from "./getMixpanelTrackingFunction.js";
 import { HasExecutedGuard } from "./HasExecutedGuard.js";
-import { TelemetryProperties, getBaseProperties } from "./properties.js";
+import { OtherProperties, getSuperProperties, getTelemetryProperties, setSuperProperties, setSuperProperty } from "./properties.js";
 
 ;// CONCATENATED MODULE: external "@workleap/telemetry"
 
-;// CONCATENATED MODULE: external "./env.js"
+;// CONCATENATED MODULE: external "./context.js"
 
-;// CONCATENATED MODULE: external "./getMixpanelTrackingFunction.js"
+;// CONCATENATED MODULE: external "./env.js"
 
 ;// CONCATENATED MODULE: external "./HasExecutedGuard.js"
 
@@ -20,7 +20,7 @@ import { TelemetryProperties, getBaseProperties } from "./properties.js";
 
 
 
-function registerLogRocketSessionUrlListener(superProperties, verbose = false) {
+function registerLogRocketSessionUrlListener(verbose = false) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     if (globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__) {
@@ -31,7 +31,7 @@ function registerLogRocketSessionUrlListener(superProperties, verbose = false) {
             if (verbose) {
                 console.log("[mixpanel] Received LogRocket session replay URL:", sessionUrl);
             }
-            superProperties.set(TelemetryProperties.LogRocketSessionUrl, sessionUrl);
+            setSuperProperty(OtherProperties.LogRocketSessionUrl, sessionUrl);
         });
     } else if (verbose) {
         console.log("[mixpanel] Cannot integrate with LogRocket because \"globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__\" is not available.");
@@ -50,61 +50,35 @@ function __resetInitializationGuard() {
  * @returns A function that sends tracking events to the tracking API.
  * @see https://workleap.github.io/wl-telemetry
  */ function initializeMixpanel(productId, envOrTrackingApiBaseUrl, options = {}) {
-    const { verbose } = options;
+    const { verbose = false, trackingEndpoint } = options;
     initializationGuard.throw("[mixpanel] Mixpanel has already been initialized. Did you call the \"initializeMixpanel\" function twice?");
-    // Equivalent to: https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#setting-super-properties.
-    const superProperties = new Map();
-    const fullUrl = getTrackingEndpoint(envOrTrackingApiBaseUrl);
+    const endpoint = getTrackingEndpoint(envOrTrackingApiBaseUrl, trackingEndpoint);
     const telemetryContext = getTelemetryContext({
         verbose
     });
-    superProperties.set(TelemetryProperties.TelemetryId, telemetryContext.telemetryId);
-    superProperties.set(TelemetryProperties.DeviceId, telemetryContext.deviceId);
+    setSuperProperties(getTelemetryProperties(telemetryContext));
     const bootstrappingStore = getBootstrappingStore();
     // If LogRocket is already available, register the listener. Otherwise, subscribe to the bootstrapping store
     // and register the listener once a notification is received that LogRocket is registered.
     if (bootstrappingStore.state.isLogRocketReady) {
-        registerLogRocketSessionUrlListener(superProperties, verbose);
+        registerLogRocketSessionUrlListener(verbose);
     } else {
         bootstrappingStore.subscribe((action, store, unsubscribe)=>{
             if (store.state.isLogRocketReady) {
                 unsubscribe();
-                registerLogRocketSessionUrlListener(superProperties, verbose);
+                registerLogRocketSessionUrlListener(verbose);
             }
         });
     }
-    const trackFunction = async (eventName, properties, _options = {})=>{
-        try {
-            const { targetProductId = null, keepAlive = false } = _options;
-            const baseProperties = getBaseProperties();
-            const allProperties = {
-                ...baseProperties,
-                ...Object.fromEntries(superProperties),
-                ...properties
-            };
-            await fetch(fullUrl, {
-                method: "POST",
-                credentials: "include",
-                keepalive: keepAlive,
-                headers: {
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify({
-                    eventName,
-                    productIdentifier: productId,
-                    targetProductIdentifier: targetProductId,
-                    properties: allProperties
-                })
-            });
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (error) {
-        // Do nothing...
-        }
-    };
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    globalThis[TrackingFunctionName] = trackFunction;
-    return trackFunction;
+    setMixpanelContext({
+        productId,
+        endpoint,
+        superProperties: getSuperProperties(),
+        verbose
+    });
+    if (verbose) {
+        console.log("[mixpanel] Mixpanel is initialized.");
+    }
 }
 
 export { __resetInitializationGuard, initializeMixpanel };

package/dist/js/initializeMixpanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"js/initializeMixpanel.js","sources":["webpack://@workleap/mixpanel/./src/js/initializeMixpanel.ts"],"sourcesContent":["import { getBootstrappingStore, getTelemetryContext } from \"@workleap/telemetry\";\nimport { getTrackingEndpoint, type Environment } from \"./env.ts\";\nimport { TrackingFunctionName } from \"./getMixpanelTrackingFunction.ts\";\nimport { HasExecutedGuard } from \"./HasExecutedGuard.ts\";\nimport { getBaseProperties, TelemetryProperties, type MixpanelTrackEventProperties } from \"./properties.ts\";\n\n/**\n * @see https://workleap.github.io/wl-telemetry\n */\nexport interface MixpanelTrackingOptions {\n    /**\n     * The product identifier of the target product.\n     */\n    targetProductId?: string;\n    /**\n   * Whether to keep the connection alive for the tracking request.\n   * It is mostly used for tracking links where the user might navigate away before the request is completed.\n   *\n   * Caution! The body size for keepalive requests is limited to 64 kibibytes.\n   *\n   * https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#keepalive\n   *\n   * @default false\n   */\n    keepAlive?: boolean;\n}\n\n/**\n * A function that sends tracking events to the tracking API.\n * @param eventName The name of the event to track.\n * @param properties The properties to send with the event.\n * @param options Options for tracking the event.\n * @see https://workleap.github.io/wl-telemetry\n */\nexport type MixpanelTrackingFunction = (eventName: string, properties: MixpanelTrackEventProperties, options?: MixpanelTrackingOptions) => Promise<void>;\n\n/**\n * @see https://workleap.github.io/wl-telemetry\n */\nexport interface InitializeMixpanelOptions {\n    verbose?: boolean;\n}\n\nfunction registerLogRocketSessionUrlListener(superProperties: Map<string, string>, verbose = false) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    if (globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__) {\n        // Automatically add the LogRocket session URL to all Honeycomb traces as an attribute.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__((sessionUrl: string) => {\n            if (verbose) {\n                console.log(\"[mixpanel] Received LogRocket session replay URL:\", sessionUrl);\n            }\n\n            superProperties.set(TelemetryProperties.LogRocketSessionUrl, sessionUrl);\n        });\n    } else if (verbose) {\n        console.log(\"[mixpanel] Cannot integrate with LogRocket because \\\"globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__\\\" is not available.\");\n    }\n}\n\nconst initializationGuard = new HasExecutedGuard();\n\n// This function should only be used by tests.\nexport function __resetInitializationGuard() {\n    initializationGuard.reset();\n}\n\n/**\n * Creates a function that sends tracking events to the tracking API.\n * @param productId Your product identifier.\n * @param envOrTrackingApiBaseUrl The environment to get the navigation url from or a base URL.\n * @param options Options for creating the tracking function.\n * @returns A function that sends tracking events to the tracking API.\n * @see https://workleap.github.io/wl-telemetry\n */\nexport function initializeMixpanel(productId: string, envOrTrackingApiBaseUrl: Environment | (string & {}), options: InitializeMixpanelOptions = {}) : MixpanelTrackingFunction {\n    const {\n        verbose\n    } = options;\n\n    initializationGuard.throw(\"[mixpanel] Mixpanel has already been initialized. Did you call the \\\"initializeMixpanel\\\" function twice?\");\n\n    // Equivalent to: https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#setting-super-properties.\n    const superProperties = new Map<string, string>();\n\n    const fullUrl = getTrackingEndpoint(envOrTrackingApiBaseUrl);\n    const telemetryContext = getTelemetryContext({ verbose });\n\n    superProperties.set(TelemetryProperties.TelemetryId, telemetryContext.telemetryId);\n    superProperties.set(TelemetryProperties.DeviceId, telemetryContext.deviceId);\n\n    const bootstrappingStore = getBootstrappingStore();\n\n    // If LogRocket is already available, register the listener. Otherwise, subscribe to the bootstrapping store\n    // and register the listener once a notification is received that LogRocket is registered.\n    if (bootstrappingStore.state.isLogRocketReady) {\n        registerLogRocketSessionUrlListener(superProperties, verbose);\n    } else {\n        bootstrappingStore.subscribe((action, store, unsubscribe) => {\n            if (store.state.isLogRocketReady) {\n                unsubscribe();\n                registerLogRocketSessionUrlListener(superProperties, verbose);\n            }\n        });\n    }\n\n    const trackFunction: MixpanelTrackingFunction = async (eventName, properties, _options = {}) => {\n        try {\n            const {\n                targetProductId = null,\n                keepAlive = false\n            } = _options;\n\n            const baseProperties = getBaseProperties();\n\n            const allProperties = {\n                ...baseProperties,\n                ...Object.fromEntries(superProperties),\n                ...properties\n            };\n\n            await fetch(fullUrl, {\n                method: \"POST\",\n                credentials: \"include\",\n                keepalive: keepAlive,\n                headers: { \"Content-Type\": \"application/json\" },\n                body: JSON.stringify({\n                    eventName,\n                    productIdentifier: productId,\n                    targetProductIdentifier : targetProductId,\n                    properties: allProperties\n                })\n            });\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        } catch (error: unknown) {\n            // Do nothing...\n        }\n    };\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    globalThis[TrackingFunctionName] = trackFunction;\n\n    return trackFunction;\n}\n"],"names":["getBootstrappingStore","getTelemetryContext","getTrackingEndpoint","TrackingFunctionName","HasExecutedGuard","getBaseProperties","TelemetryProperties","registerLogRocketSessionUrlListener","superProperties","verbose","globalThis","sessionUrl","console","initializationGuard","__resetInitializationGuard","initializeMixpanel","productId","envOrTrackingApiBaseUrl","options","Map","fullUrl","telemetryContext","bootstrappingStore","action","store","unsubscribe","trackFunction","eventName","properties","_options","targetProductId","keepAlive","baseProperties","allProperties","Object","fetch","JSON","error"],"mappings":";;;;;;;;;;;;;;;;;AAAiF;AAChB;AACO;AACf;AACmD;AAuC5G,SAASO,oCAAoCC,eAAoC,EAAEC,UAAU,KAAK;IAC9F,6DAA6D;IAC7D,aAAa;IACb,IAAIC,WAAW,mEAAmE,EAAE;QAChF,uFAAuF;QACvF,6DAA6D;QAC7D,aAAa;QACbA,WAAW,mEAAmE,CAAC,CAACC;YAC5E,IAAIF,SAAS;gBACTG,QAAQ,GAAG,CAAC,qDAAqDD;YACrE;YAEAH,gBAAgB,GAAG,CAACF,uCAAuC,EAAEK;QACjE;IACJ,OAAO,IAAIF,SAAS;QAChBG,QAAQ,GAAG,CAAC;IAChB;AACJ;AAEA,MAAMC,sBAAsB,IAAIT,gBAAgBA;AAEhD,8CAA8C;AACvC,SAASU;IACZD,oBAAoB,KAAK;AAC7B;AAEA;;;;;;;CAOC,GACM,SAASE,mBAAmBC,SAAiB,EAAEC,uBAAoD,EAAEC,UAAqC,CAAC,CAAC;IAC/I,MAAM,EACFT,OAAO,EACV,GAAGS;IAEJL,oBAAoB,KAAK,CAAC;IAE1B,2GAA2G;IAC3G,MAAML,kBAAkB,IAAIW;IAE5B,MAAMC,UAAUlB,mBAAmBA,CAACe;IACpC,MAAMI,mBAAmBpB,mBAAmBA,CAAC;QAAEQ;IAAQ;IAEvDD,gBAAgB,GAAG,CAACF,+BAA+B,EAAEe,iBAAiB,WAAW;IACjFb,gBAAgB,GAAG,CAACF,4BAA4B,EAAEe,iBAAiB,QAAQ;IAE3E,MAAMC,qBAAqBtB,qBAAqBA;IAEhD,4GAA4G;IAC5G,0FAA0F;IAC1F,IAAIsB,mBAAmB,KAAK,CAAC,gBAAgB,EAAE;QAC3Cf,oCAAoCC,iBAAiBC;IACzD,OAAO;QACHa,mBAAmB,SAAS,CAAC,CAACC,QAAQC,OAAOC;YACzC,IAAID,MAAM,KAAK,CAAC,gBAAgB,EAAE;gBAC9BC;gBACAlB,oCAAoCC,iBAAiBC;YACzD;QACJ;IACJ;IAEA,MAAMiB,gBAA0C,OAAOC,WAAWC,YAAYC,WAAW,CAAC,CAAC;QACvF,IAAI;YACA,MAAM,EACFC,kBAAkB,IAAI,EACtBC,YAAY,KAAK,EACpB,GAAGF;YAEJ,MAAMG,iBAAiB3B,iBAAiBA;YAExC,MAAM4B,gBAAgB;gBAClB,GAAGD,cAAc;gBACjB,GAAGE,OAAO,WAAW,CAAC1B,gBAAgB;gBACtC,GAAGoB,UAAU;YACjB;YAEA,MAAMO,MAAMf,SAAS;gBACjB,QAAQ;gBACR,aAAa;gBACb,WAAWW;gBACX,SAAS;oBAAE,gBAAgB;gBAAmB;gBAC9C,MAAMK,KAAK,SAAS,CAAC;oBACjBT;oBACA,mBAAmBX;oBACnB,yBAA0Bc;oBAC1B,YAAYG;gBAChB;YACJ;QACJ,6DAA6D;QAC7D,EAAE,OAAOI,OAAgB;QACrB,gBAAgB;QACpB;IACJ;IAEA,6DAA6D;IAC7D,aAAa;IACb3B,UAAU,CAACP,oBAAoBA,CAAC,GAAGuB;IAEnC,OAAOA;AACX"}
+{"version":3,"file":"js/initializeMixpanel.js","sources":["webpack://@workleap/mixpanel/./src/js/initializeMixpanel.ts"],"sourcesContent":["import { getBootstrappingStore, getTelemetryContext } from \"@workleap/telemetry\";\nimport { setMixpanelContext } from \"./context.ts\";\nimport { getTrackingEndpoint, type Environment } from \"./env.ts\";\nimport { HasExecutedGuard } from \"./HasExecutedGuard.ts\";\nimport { getSuperProperties, getTelemetryProperties, OtherProperties, setSuperProperties, setSuperProperty } from \"./properties.ts\";\n\n/**\n * @see https://workleap.github.io/wl-telemetry\n */\nexport interface InitializeMixpanelOptions {\n    /**\n     * The endpoint to use for tracking events.\n     * If not provided, the default endpoint for the environment will be used.\n     * @default \"tracking/track\"\n     */\n    trackingEndpoint?: string;\n    verbose?: boolean;\n}\nfunction registerLogRocketSessionUrlListener(verbose = false) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    if (globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__) {\n        // Automatically add the LogRocket session URL to all Honeycomb traces as an attribute.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__((sessionUrl: string) => {\n            if (verbose) {\n                console.log(\"[mixpanel] Received LogRocket session replay URL:\", sessionUrl);\n            }\n\n            setSuperProperty(OtherProperties.LogRocketSessionUrl, sessionUrl);\n        });\n    } else if (verbose) {\n        console.log(\"[mixpanel] Cannot integrate with LogRocket because \\\"globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__\\\" is not available.\");\n    }\n}\n\nconst initializationGuard = new HasExecutedGuard();\n\n// This function should only be used by tests.\nexport function __resetInitializationGuard() {\n    initializationGuard.reset();\n}\n\n/**\n * Creates a function that sends tracking events to the tracking API.\n * @param productId Your product identifier.\n * @param envOrTrackingApiBaseUrl The environment to get the navigation url from or a base URL.\n * @param options Options for creating the tracking function.\n * @returns A function that sends tracking events to the tracking API.\n * @see https://workleap.github.io/wl-telemetry\n */\nexport function initializeMixpanel(productId: string, envOrTrackingApiBaseUrl: Environment | (string & {}), options: InitializeMixpanelOptions = {}) {\n    const {\n        verbose = false,\n        trackingEndpoint\n    } = options;\n\n    initializationGuard.throw(\"[mixpanel] Mixpanel has already been initialized. Did you call the \\\"initializeMixpanel\\\" function twice?\");\n\n    const endpoint = getTrackingEndpoint(envOrTrackingApiBaseUrl, trackingEndpoint);\n    const telemetryContext = getTelemetryContext({ verbose });\n\n    setSuperProperties(getTelemetryProperties(telemetryContext));\n\n    const bootstrappingStore = getBootstrappingStore();\n\n    // If LogRocket is already available, register the listener. Otherwise, subscribe to the bootstrapping store\n    // and register the listener once a notification is received that LogRocket is registered.\n    if (bootstrappingStore.state.isLogRocketReady) {\n        registerLogRocketSessionUrlListener(verbose);\n    } else {\n        bootstrappingStore.subscribe((action, store, unsubscribe) => {\n            if (store.state.isLogRocketReady) {\n                unsubscribe();\n                registerLogRocketSessionUrlListener(verbose);\n            }\n        });\n    }\n\n    setMixpanelContext({\n        productId,\n        endpoint,\n        superProperties: getSuperProperties(),\n        verbose\n    });\n\n    if (verbose) {\n        console.log(\"[mixpanel] Mixpanel is initialized.\");\n    }\n}\n"],"names":["getBootstrappingStore","getTelemetryContext","setMixpanelContext","getTrackingEndpoint","HasExecutedGuard","getSuperProperties","getTelemetryProperties","OtherProperties","setSuperProperties","setSuperProperty","registerLogRocketSessionUrlListener","verbose","globalThis","sessionUrl","console","initializationGuard","__resetInitializationGuard","initializeMixpanel","productId","envOrTrackingApiBaseUrl","options","trackingEndpoint","endpoint","telemetryContext","bootstrappingStore","action","store","unsubscribe"],"mappings":";;;;;;;;;;;;;;;;;AAAiF;AAC/B;AACe;AACR;AAC2E;AAcpI,SAASU,oCAAoCC,UAAU,KAAK;IACxD,6DAA6D;IAC7D,aAAa;IACb,IAAIC,WAAW,mEAAmE,EAAE;QAChF,uFAAuF;QACvF,6DAA6D;QAC7D,aAAa;QACbA,WAAW,mEAAmE,CAAC,CAACC;YAC5E,IAAIF,SAAS;gBACTG,QAAQ,GAAG,CAAC,qDAAqDD;YACrE;YAEAJ,gBAAgBA,CAACF,mCAAmC,EAAEM;QAC1D;IACJ,OAAO,IAAIF,SAAS;QAChBG,QAAQ,GAAG,CAAC;IAChB;AACJ;AAEA,MAAMC,sBAAsB,IAAIX,gBAAgBA;AAEhD,8CAA8C;AACvC,SAASY;IACZD,oBAAoB,KAAK;AAC7B;AAEA;;;;;;;CAOC,GACM,SAASE,mBAAmBC,SAAiB,EAAEC,uBAAoD,EAAEC,UAAqC,CAAC,CAAC;IAC/I,MAAM,EACFT,UAAU,KAAK,EACfU,gBAAgB,EACnB,GAAGD;IAEJL,oBAAoB,KAAK,CAAC;IAE1B,MAAMO,WAAWnB,mBAAmBA,CAACgB,yBAAyBE;IAC9D,MAAME,mBAAmBtB,mBAAmBA,CAAC;QAAEU;IAAQ;IAEvDH,kBAAkBA,CAACF,sBAAsBA,CAACiB;IAE1C,MAAMC,qBAAqBxB,qBAAqBA;IAEhD,4GAA4G;IAC5G,0FAA0F;IAC1F,IAAIwB,mBAAmB,KAAK,CAAC,gBAAgB,EAAE;QAC3Cd,oCAAoCC;IACxC,OAAO;QACHa,mBAAmB,SAAS,CAAC,CAACC,QAAQC,OAAOC;YACzC,IAAID,MAAM,KAAK,CAAC,gBAAgB,EAAE;gBAC9BC;gBACAjB,oCAAoCC;YACxC;QACJ;IACJ;IAEAT,kBAAkBA,CAAC;QACfgB;QACAI;QACA,iBAAiBjB,kBAAkBA;QACnCM;IACJ;IAEA,IAAIA,SAAS;QACTG,QAAQ,GAAG,CAAC;IAChB;AACJ"}

package/dist/js/properties.d.ts

@@ -1,4 +1,5 @@
-export type MixpanelTrackEventProperties = Record<string, unknown>;
+import type { TelemetryContext } from "@workleap/telemetry";
+export type MixpanelEventProperties = Record<string, unknown>;
 export declare const BaseProperties: {
     readonly Browser: "$browser";
     readonly BrowserVersion: "$browser_version";
@@ -11,11 +12,6 @@ export declare const BaseProperties: {
     readonly ScreenHeight: "$screen_height";
     readonly ScreenWidth: "$screen_width";
 };
-export declare const TelemetryProperties: {
-    readonly DeviceId: "Device Id";
-    readonly LogRocketSessionUrl: "LogRocket Session Url";
-    readonly TelemetryId: "Telemetry Id";
-};
 export declare function getBaseProperties(): {
     $os: string;
     $browser: string;
@@ -28,3 +24,19 @@ export declare function getBaseProperties(): {
     $screen_width: number;
     "Is Mobile": boolean;
 };
+export declare const TelemetryProperties: {
+    readonly DeviceId: "Device Id";
+    readonly TelemetryId: "Telemetry Id";
+};
+export declare function getTelemetryProperties(context: TelemetryContext): {
+    "Telemetry Id": string;
+    "Device Id": string;
+};
+export declare const OtherProperties: {
+    LogRocketSessionUrl: string;
+};
+export type SuperProperties = Map<string, unknown>;
+export declare function setSuperProperty(key: string, value: unknown): void;
+export declare function setSuperProperties(values: Record<string, unknown>): void;
+export declare function getSuperProperties(): SuperProperties;
+export declare function __clearSuperProperties(): void;

package/dist/js/properties.js

@@ -16,11 +16,6 @@ const BaseProperties = {
     ScreenHeight: "$screen_height",
     ScreenWidth: "$screen_width"
 };
-const TelemetryProperties = {
-    DeviceId: "Device Id",
-    LogRocketSessionUrl: "LogRocket Session Url",
-    TelemetryId: "Telemetry Id"
-};
 function getBaseProperties() {
     const userAgent = navigator.userAgent;
     const device = deviceType(userAgent);
@@ -37,7 +32,38 @@ function getBaseProperties() {
         [BaseProperties.IsMobile]: device.length > 0
     };
 }
+const TelemetryProperties = {
+    DeviceId: "Device Id",
+    TelemetryId: "Telemetry Id"
+};
+function getTelemetryProperties(context) {
+    return {
+        [TelemetryProperties.TelemetryId]: context.telemetryId,
+        [TelemetryProperties.DeviceId]: context.deviceId
+    };
+}
+const OtherProperties = {
+    LogRocketSessionUrl: "LogRocket Session Url"
+};
+// Equivalent to: https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#setting-super-properties.
+const superProperties = new Map();
+function setSuperProperty(key, value) {
+    superProperties.set(key, value);
+}
+function setSuperProperties(values) {
+    Object.keys(values).forEach((x)=>{
+        superProperties.set(x, values[x]);
+    });
+}
+// Must always return the actual reference to the super properties, not a copy
+// because it will breaks the global context.
+function getSuperProperties() {
+    return superProperties;
+}
+function __clearSuperProperties() {
+    superProperties.clear();
+}
 
-export { BaseProperties, TelemetryProperties, getBaseProperties };
+export { BaseProperties, OtherProperties, TelemetryProperties, __clearSuperProperties, getBaseProperties, getSuperProperties, getTelemetryProperties, setSuperProperties, setSuperProperty };
 
 //# sourceMappingURL=properties.js.map

package/dist/js/properties.js.map

@@ -1 +1 @@
-{"version":3,"file":"js/properties.js","sources":["webpack://@workleap/mixpanel/./src/js/properties.ts"],"sourcesContent":["\nimport { browserName, browserVersion, deviceType, osName, referringDomain } from \"./utils.ts\";\n\nexport type MixpanelTrackEventProperties = Record<string, unknown>;\n\nexport const BaseProperties = {\n    Browser: \"$browser\",\n    BrowserVersion: \"$browser_version\",\n    CurrentUrl: \"$current_url\",\n    Device: \"$device\",\n    IsMobile: \"Is Mobile\",\n    Os: \"$os\",\n    Referrer: \"$referrer\",\n    ReferringDomain: \"$referring_domain\",\n    ScreenHeight: \"$screen_height\",\n    ScreenWidth: \"$screen_width\"\n} as const;\n\nexport const TelemetryProperties = {\n    DeviceId: \"Device Id\",\n    LogRocketSessionUrl: \"LogRocket Session Url\",\n    TelemetryId: \"Telemetry Id\"\n} as const;\n\nexport function getBaseProperties() {\n    const userAgent = navigator.userAgent;\n    const device = deviceType(userAgent);\n\n    return {\n        [BaseProperties.Os]: osName(userAgent),\n        [BaseProperties.Browser]: browserName(userAgent, navigator.vendor),\n        [BaseProperties.Referrer]: document.referrer,\n        [BaseProperties.ReferringDomain]: referringDomain(document.referrer),\n        [BaseProperties.Device]: device,\n        [BaseProperties.CurrentUrl]: window.location.href,\n        [BaseProperties.BrowserVersion]: browserVersion(userAgent, navigator.vendor),\n        [BaseProperties.ScreenHeight]: window.screen.height,\n        [BaseProperties.ScreenWidth]: window.screen.width,\n        [BaseProperties.IsMobile]: device.length > 0\n    } satisfies MixpanelTrackEventProperties;\n}\n"],"names":["browserName","browserVersion","deviceType","osName","referringDomain","BaseProperties","TelemetryProperties","getBaseProperties","userAgent","navigator","device","document","window"],"mappings":";;;;;AAC8F;AAIvF,MAAMK,iBAAiB;IAC1B,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,UAAU;IACV,iBAAiB;IACjB,cAAc;IACd,aAAa;AACjB,EAAW;AAEJ,MAAMC,sBAAsB;IAC/B,UAAU;IACV,qBAAqB;IACrB,aAAa;AACjB,EAAW;AAEJ,SAASC;IACZ,MAAMC,YAAYC,UAAU,SAAS;IACrC,MAAMC,SAASR,UAAUA,CAACM;IAE1B,OAAO;QACH,CAACH,eAAe,EAAE,CAAC,EAAEF,MAAMA,CAACK;QAC5B,CAACH,eAAe,OAAO,CAAC,EAAEL,WAAWA,CAACQ,WAAWC,UAAU,MAAM;QACjE,CAACJ,eAAe,QAAQ,CAAC,EAAEM,SAAS,QAAQ;QAC5C,CAACN,eAAe,eAAe,CAAC,EAAED,eAAeA,CAACO,SAAS,QAAQ;QACnE,CAACN,eAAe,MAAM,CAAC,EAAEK;QACzB,CAACL,eAAe,UAAU,CAAC,EAAEO,OAAO,QAAQ,CAAC,IAAI;QACjD,CAACP,eAAe,cAAc,CAAC,EAAEJ,cAAcA,CAACO,WAAWC,UAAU,MAAM;QAC3E,CAACJ,eAAe,YAAY,CAAC,EAAEO,OAAO,MAAM,CAAC,MAAM;QACnD,CAACP,eAAe,WAAW,CAAC,EAAEO,OAAO,MAAM,CAAC,KAAK;QACjD,CAACP,eAAe,QAAQ,CAAC,EAAEK,OAAO,MAAM,GAAG;IAC/C;AACJ"}
+{"version":3,"file":"js/properties.js","sources":["webpack://@workleap/mixpanel/./src/js/properties.ts"],"sourcesContent":["\nimport type { TelemetryContext } from \"@workleap/telemetry\";\nimport { browserName, browserVersion, deviceType, osName, referringDomain } from \"./utils.ts\";\n\nexport type MixpanelEventProperties = Record<string, unknown>;\n\nexport const BaseProperties = {\n    Browser: \"$browser\",\n    BrowserVersion: \"$browser_version\",\n    CurrentUrl: \"$current_url\",\n    Device: \"$device\",\n    IsMobile: \"Is Mobile\",\n    Os: \"$os\",\n    Referrer: \"$referrer\",\n    ReferringDomain: \"$referring_domain\",\n    ScreenHeight: \"$screen_height\",\n    ScreenWidth: \"$screen_width\"\n} as const;\n\nexport function getBaseProperties() {\n    const userAgent = navigator.userAgent;\n    const device = deviceType(userAgent);\n\n    return {\n        [BaseProperties.Os]: osName(userAgent),\n        [BaseProperties.Browser]: browserName(userAgent, navigator.vendor),\n        [BaseProperties.Referrer]: document.referrer,\n        [BaseProperties.ReferringDomain]: referringDomain(document.referrer),\n        [BaseProperties.Device]: device,\n        [BaseProperties.CurrentUrl]: window.location.href,\n        [BaseProperties.BrowserVersion]: browserVersion(userAgent, navigator.vendor),\n        [BaseProperties.ScreenHeight]: window.screen.height,\n        [BaseProperties.ScreenWidth]: window.screen.width,\n        [BaseProperties.IsMobile]: device.length > 0\n    } satisfies MixpanelEventProperties;\n}\n\nexport const TelemetryProperties = {\n    DeviceId: \"Device Id\",\n    TelemetryId: \"Telemetry Id\"\n} as const;\n\nexport function getTelemetryProperties(context: TelemetryContext) {\n    return {\n        [TelemetryProperties.TelemetryId]: context.telemetryId,\n        [TelemetryProperties.DeviceId]: context.deviceId\n    } satisfies MixpanelEventProperties;\n}\n\nexport const OtherProperties = {\n    LogRocketSessionUrl: \"LogRocket Session Url\"\n};\n\n//////////////////////\n\nexport type SuperProperties = Map<string, unknown>;\n\n// Equivalent to: https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#setting-super-properties.\nconst superProperties: SuperProperties = new Map<string, unknown>();\n\nexport function setSuperProperty(key: string, value: unknown) {\n    superProperties.set(key, value);\n}\n\nexport function setSuperProperties(values: Record<string, unknown>) {\n    Object.keys(values).forEach(x => {\n        superProperties.set(x, values[x]);\n    });\n}\n\n// Must always return the actual reference to the super properties, not a copy\n// because it will breaks the global context.\nexport function getSuperProperties() {\n    return superProperties;\n}\n\nexport function __clearSuperProperties() {\n    superProperties.clear();\n}\n"],"names":["browserName","browserVersion","deviceType","osName","referringDomain","BaseProperties","getBaseProperties","userAgent","navigator","device","document","window","TelemetryProperties","getTelemetryProperties","context","OtherProperties","superProperties","Map","setSuperProperty","key","value","setSuperProperties","values","Object","x","getSuperProperties","__clearSuperProperties"],"mappings":";;;;;AAE8F;AAIvF,MAAMK,iBAAiB;IAC1B,SAAS;IACT,gBAAgB;IAChB,YAAY;IACZ,QAAQ;IACR,UAAU;IACV,IAAI;IACJ,UAAU;IACV,iBAAiB;IACjB,cAAc;IACd,aAAa;AACjB,EAAW;AAEJ,SAASC;IACZ,MAAMC,YAAYC,UAAU,SAAS;IACrC,MAAMC,SAASP,UAAUA,CAACK;IAE1B,OAAO;QACH,CAACF,eAAe,EAAE,CAAC,EAAEF,MAAMA,CAACI;QAC5B,CAACF,eAAe,OAAO,CAAC,EAAEL,WAAWA,CAACO,WAAWC,UAAU,MAAM;QACjE,CAACH,eAAe,QAAQ,CAAC,EAAEK,SAAS,QAAQ;QAC5C,CAACL,eAAe,eAAe,CAAC,EAAED,eAAeA,CAACM,SAAS,QAAQ;QACnE,CAACL,eAAe,MAAM,CAAC,EAAEI;QACzB,CAACJ,eAAe,UAAU,CAAC,EAAEM,OAAO,QAAQ,CAAC,IAAI;QACjD,CAACN,eAAe,cAAc,CAAC,EAAEJ,cAAcA,CAACM,WAAWC,UAAU,MAAM;QAC3E,CAACH,eAAe,YAAY,CAAC,EAAEM,OAAO,MAAM,CAAC,MAAM;QACnD,CAACN,eAAe,WAAW,CAAC,EAAEM,OAAO,MAAM,CAAC,KAAK;QACjD,CAACN,eAAe,QAAQ,CAAC,EAAEI,OAAO,MAAM,GAAG;IAC/C;AACJ;AAEO,MAAMG,sBAAsB;IAC/B,UAAU;IACV,aAAa;AACjB,EAAW;AAEJ,SAASC,uBAAuBC,OAAyB;IAC5D,OAAO;QACH,CAACF,oBAAoB,WAAW,CAAC,EAAEE,QAAQ,WAAW;QACtD,CAACF,oBAAoB,QAAQ,CAAC,EAAEE,QAAQ,QAAQ;IACpD;AACJ;AAEO,MAAMC,kBAAkB;IAC3B,qBAAqB;AACzB,EAAE;AAMF,2GAA2G;AAC3G,MAAMC,kBAAmC,IAAIC;AAEtC,SAASC,iBAAiBC,GAAW,EAAEC,KAAc;IACxDJ,gBAAgB,GAAG,CAACG,KAAKC;AAC7B;AAEO,SAASC,mBAAmBC,MAA+B;IAC9DC,OAAO,IAAI,CAACD,QAAQ,OAAO,CAACE,CAAAA;QACxBR,gBAAgB,GAAG,CAACQ,GAAGF,MAAM,CAACE,EAAE;IACpC;AACJ;AAEA,8EAA8E;AAC9E,6CAA6C;AACtC,SAASC;IACZ,OAAOT;AACX;AAEO,SAASU;IACZV,gBAAgB,KAAK;AACzB"}

package/dist/react/index.d.ts

@@ -1 +1 @@
-export { useMixpanelTracking } from "./useMixpanelTracking.ts";
+export { useTrackingFunction, type UseTrackingFunctionOptions } from "./useTrackingFunction.ts";

package/dist/react/index.js

@@ -1,10 +1,10 @@
-import { useMixpanelTracking } from "./useMixpanelTracking.js";
+import { useTrackingFunction } from "./useTrackingFunction.js";
 
-;// CONCATENATED MODULE: external "./useMixpanelTracking.js"
+;// CONCATENATED MODULE: external "./useTrackingFunction.js"
 
 ;// CONCATENATED MODULE: ./src/react/index.ts
 
 
-export { useMixpanelTracking };
+export { useTrackingFunction };
 
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"react/index.js","sources":["webpack://@workleap/mixpanel/./src/react/index.ts"],"sourcesContent":["export { useMixpanelTracking } from \"./useMixpanelTracking.ts\";\n\n"],"names":["useMixpanelTracking"],"mappings":";;;;;AAA+D"}
+{"version":3,"file":"react/index.js","sources":["webpack://@workleap/mixpanel/./src/react/index.ts"],"sourcesContent":["export { useTrackingFunction, type UseTrackingFunctionOptions } from \"./useTrackingFunction.ts\";\n\n"],"names":["useTrackingFunction"],"mappings":";;;;;AAAgG"}

package/dist/react/useTrackingFunction.d.ts

@@ -0,0 +1,3 @@
+import { type CreateTrackingFunctionOptions } from "../js/createTrackingFunction.ts";
+export type UseTrackingFunctionOptions = CreateTrackingFunctionOptions;
+export declare function useTrackingFunction(options?: UseTrackingFunctionOptions): import("../js/createTrackingFunction.ts").TrackingFunction;

package/dist/react/useTrackingFunction.js

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import { createTrackingFunction } from "../js/createTrackingFunction.js";
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "../js/createTrackingFunction.js"
+
+;// CONCATENATED MODULE: ./src/react/useTrackingFunction.ts
+
+
+function useTrackingFunction(options = {}) {
+    const { targetProductId } = options;
+    return useMemo(()=>{
+        return createTrackingFunction({
+            targetProductId
+        });
+    }, [
+        targetProductId
+    ]);
+}
+
+export { useTrackingFunction };
+
+//# sourceMappingURL=useTrackingFunction.js.map

package/dist/react/useTrackingFunction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react/useTrackingFunction.js","sources":["webpack://@workleap/mixpanel/./src/react/useTrackingFunction.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { createTrackingFunction, type CreateTrackingFunctionOptions } from \"../js/createTrackingFunction.ts\";\n\nexport type UseTrackingFunctionOptions = CreateTrackingFunctionOptions;\n\nexport function useTrackingFunction(options: UseTrackingFunctionOptions = {}) {\n    const {\n        targetProductId\n    } = options;\n\n    return useMemo(() => {\n        return createTrackingFunction({ targetProductId });\n    }, [targetProductId]);\n}\n"],"names":["useMemo","createTrackingFunction","useTrackingFunction","options","targetProductId"],"mappings":";;;;;;;;AAAgC;AAC6E;AAItG,SAASE,oBAAoBC,UAAsC,CAAC,CAAC;IACxE,MAAM,EACFC,eAAe,EAClB,GAAGD;IAEJ,OAAOH,OAAOA,CAAC;QACX,OAAOC,sBAAsBA,CAAC;YAAEG;QAAgB;IACpD,GAAG;QAACA;KAAgB;AACxB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workleap/mixpanel",
   "author": "Workleap",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A package containing utilities for Mixpanel telemetry.",
   "license": "Apache-2.0",
   "repository": {

package/src/js/context.ts

@@ -0,0 +1,34 @@
+import type { SuperProperties } from "./properties.ts";
+
+export const ContextVariableName = "__WLP_MIXPANEL_CONTEXT__";
+
+export interface MixpanelContext {
+    productId: string;
+    endpoint: string;
+    superProperties: SuperProperties;
+    verbose: boolean;
+}
+
+export function setMixpanelContext(context: MixpanelContext) {
+    // Will be used by the "track" function.
+    // It's important to share the context with a global DOM object rather than
+    // a singleton because projects like the platform widgets will use a distinct instance
+    // of this package than the host application.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    globalThis[ContextVariableName] = context;
+}
+
+export function getMixpanelContext() {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const context = globalThis[ContextVariableName] as MixpanelContext;
+
+    if (!context) {
+        throw new Error("[mixpanel] The Mixpanel context is not available. Did you initialize Mixpanel with the \"initializeMixpanel\" function?");
+    }
+
+    return context;
+}
+
+

package/src/js/createTrackingFunction.ts

@@ -0,0 +1,86 @@
+import { getMixpanelContext } from "./context.ts";
+import { getBaseProperties, type MixpanelEventProperties } from "./properties.ts";
+
+/**
+ * @see https://workleap.github.io/wl-telemetry
+ */
+export interface CreateTrackingFunctionOptions {
+    /**
+     * The product identifier of the target product.
+     */
+    targetProductId?: string;
+}
+
+/**
+ * @see https://workleap.github.io/wl-telemetry
+ */
+export interface TrackingFunctionOptions {
+    /**
+   * Whether to keep the connection alive for the tracking request.
+   * It is mostly used for tracking links where the user might navigate away before the request is completed.
+   *
+   * Caution! The body size for keepalive requests is limited to 64 kibibytes.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#keepalive
+   *
+   * @default false
+   */
+    keepAlive?: boolean;
+}
+
+/**
+ * A function that sends tracking events to the tracking API.
+ * @param eventName The name of the event to track.
+ * @param properties The properties to send with the event.
+ * @param options Options for tracking the event.
+ * @see https://workleap.github.io/wl-telemetry
+ */
+export type TrackingFunction = (eventName: string, properties: MixpanelEventProperties, options?: TrackingFunctionOptions) => Promise<void>;
+
+export function createTrackingFunction(options: CreateTrackingFunctionOptions = {}) {
+    const {
+        targetProductId
+    } = options;
+
+    const {
+        productId,
+        endpoint,
+        superProperties
+    } = getMixpanelContext();
+
+    const trackFunction: TrackingFunction = async (eventName, properties, _options = {}) => {
+        try {
+            const {
+                keepAlive = false
+            } = _options;
+
+            const baseProperties = getBaseProperties();
+
+            const allProperties = {
+                ...baseProperties,
+                ...Object.fromEntries(superProperties),
+                ...properties
+            };
+
+            await fetch(endpoint, {
+                method: "POST",
+                credentials: "include",
+                keepalive: keepAlive,
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    eventName,
+                    productIdentifier: productId,
+                    // Not sure why, but it seems important to send "null" if not target product identifier
+                    // are provided.
+                    targetProductIdentifier : targetProductId ?? null,
+                    properties: allProperties
+                })
+            });
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (error: unknown) {
+            // Do nothing...
+        }
+    };
+
+    return trackFunction;
+}

package/src/js/env.ts

@@ -16,7 +16,7 @@ function resolveApiUrl(path: string, baseUrl: string | undefined) : string {
     return `${baseUrl}${baseUrl!.endsWith("/") ? "" : "/"}${path.startsWith("/") ? path.substring(1) : path}`;
 }
 
-export function getTrackingEndpoint(envOrTrackingApiBaseUrl: Environment | (string & {})) {
+export function getTrackingEndpoint(envOrTrackingApiBaseUrl: Environment | (string & {}), trackingEndpoint = "tracking/track"): string {
     let baseUrl: string;
 
     if (EnvironmentList.includes(envOrTrackingApiBaseUrl as Environment)) {
@@ -25,5 +25,5 @@ export function getTrackingEndpoint(envOrTrackingApiBaseUrl: Environment | (stri
         baseUrl = envOrTrackingApiBaseUrl;
     }
 
-    return resolveApiUrl("tracking/track", baseUrl);
+    return resolveApiUrl(trackingEndpoint, baseUrl);
 }

package/src/js/index.ts

@@ -1,5 +1,5 @@
+export { createTrackingFunction, type CreateTrackingFunctionOptions, type TrackingFunction, type TrackingFunctionOptions } from "./createTrackingFunction.ts";
 export type { Environment } from "./env.ts";
-export { getMixpanelTrackingFunction } from "./getMixpanelTrackingFunction.ts";
-export { initializeMixpanel, type InitializeMixpanelOptions, type MixpanelTrackingFunction, type MixpanelTrackingOptions } from "./initializeMixpanel.ts";
-export type { MixpanelTrackEventProperties } from "./properties.ts";
+export { initializeMixpanel, type InitializeMixpanelOptions } from "./initializeMixpanel.ts";
+export { setSuperProperties, setSuperProperty, type MixpanelEventProperties } from "./properties.ts";
 

package/src/js/initializeMixpanel.ts

@@ -1,47 +1,22 @@
 import { getBootstrappingStore, getTelemetryContext } from "@workleap/telemetry";
+import { setMixpanelContext } from "./context.ts";
 import { getTrackingEndpoint, type Environment } from "./env.ts";
-import { TrackingFunctionName } from "./getMixpanelTrackingFunction.ts";
 import { HasExecutedGuard } from "./HasExecutedGuard.ts";
-import { getBaseProperties, TelemetryProperties, type MixpanelTrackEventProperties } from "./properties.ts";
+import { getSuperProperties, getTelemetryProperties, OtherProperties, setSuperProperties, setSuperProperty } from "./properties.ts";
 
 /**
  * @see https://workleap.github.io/wl-telemetry
  */
-export interface MixpanelTrackingOptions {
+export interface InitializeMixpanelOptions {
     /**
-     * The product identifier of the target product.
+     * The endpoint to use for tracking events.
+     * If not provided, the default endpoint for the environment will be used.
+     * @default "tracking/track"
      */
-    targetProductId?: string;
-    /**
-   * Whether to keep the connection alive for the tracking request.
-   * It is mostly used for tracking links where the user might navigate away before the request is completed.
-   *
-   * Caution! The body size for keepalive requests is limited to 64 kibibytes.
-   *
-   * https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#keepalive
-   *
-   * @default false
-   */
-    keepAlive?: boolean;
-}
-
-/**
- * A function that sends tracking events to the tracking API.
- * @param eventName The name of the event to track.
- * @param properties The properties to send with the event.
- * @param options Options for tracking the event.
- * @see https://workleap.github.io/wl-telemetry
- */
-export type MixpanelTrackingFunction = (eventName: string, properties: MixpanelTrackEventProperties, options?: MixpanelTrackingOptions) => Promise<void>;
-
-/**
- * @see https://workleap.github.io/wl-telemetry
- */
-export interface InitializeMixpanelOptions {
+    trackingEndpoint?: string;
     verbose?: boolean;
 }
-
-function registerLogRocketSessionUrlListener(superProperties: Map<string, string>, verbose = false) {
+function registerLogRocketSessionUrlListener(verbose = false) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     if (globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__) {
@@ -53,7 +28,7 @@ function registerLogRocketSessionUrlListener(superProperties: Map<string, string
                 console.log("[mixpanel] Received LogRocket session replay URL:", sessionUrl);
             }
 
-            superProperties.set(TelemetryProperties.LogRocketSessionUrl, sessionUrl);
+            setSuperProperty(OtherProperties.LogRocketSessionUrl, sessionUrl);
         });
     } else if (verbose) {
         console.log("[mixpanel] Cannot integrate with LogRocket because \"globalThis.__WLP_LOGROCKET_INSTRUMENTATION_REGISTER_GET_SESSION_URL_LISTENER__\" is not available.");
@@ -75,73 +50,42 @@ export function __resetInitializationGuard() {
  * @returns A function that sends tracking events to the tracking API.
  * @see https://workleap.github.io/wl-telemetry
  */
-export function initializeMixpanel(productId: string, envOrTrackingApiBaseUrl: Environment | (string & {}), options: InitializeMixpanelOptions = {}) : MixpanelTrackingFunction {
+export function initializeMixpanel(productId: string, envOrTrackingApiBaseUrl: Environment | (string & {}), options: InitializeMixpanelOptions = {}) {
     const {
-        verbose
+        verbose = false,
+        trackingEndpoint
     } = options;
 
     initializationGuard.throw("[mixpanel] Mixpanel has already been initialized. Did you call the \"initializeMixpanel\" function twice?");
 
-    // Equivalent to: https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#setting-super-properties.
-    const superProperties = new Map<string, string>();
-
-    const fullUrl = getTrackingEndpoint(envOrTrackingApiBaseUrl);
+    const endpoint = getTrackingEndpoint(envOrTrackingApiBaseUrl, trackingEndpoint);
     const telemetryContext = getTelemetryContext({ verbose });
 
-    superProperties.set(TelemetryProperties.TelemetryId, telemetryContext.telemetryId);
-    superProperties.set(TelemetryProperties.DeviceId, telemetryContext.deviceId);
+    setSuperProperties(getTelemetryProperties(telemetryContext));
 
     const bootstrappingStore = getBootstrappingStore();
 
     // If LogRocket is already available, register the listener. Otherwise, subscribe to the bootstrapping store
     // and register the listener once a notification is received that LogRocket is registered.
     if (bootstrappingStore.state.isLogRocketReady) {
-        registerLogRocketSessionUrlListener(superProperties, verbose);
+        registerLogRocketSessionUrlListener(verbose);
     } else {
         bootstrappingStore.subscribe((action, store, unsubscribe) => {
             if (store.state.isLogRocketReady) {
                 unsubscribe();
-                registerLogRocketSessionUrlListener(superProperties, verbose);
+                registerLogRocketSessionUrlListener(verbose);
             }
         });
     }
 
-    const trackFunction: MixpanelTrackingFunction = async (eventName, properties, _options = {}) => {
-        try {
-            const {
-                targetProductId = null,
-                keepAlive = false
-            } = _options;
-
-            const baseProperties = getBaseProperties();
-
-            const allProperties = {
-                ...baseProperties,
-                ...Object.fromEntries(superProperties),
-                ...properties
-            };
-
-            await fetch(fullUrl, {
-                method: "POST",
-                credentials: "include",
-                keepalive: keepAlive,
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    eventName,
-                    productIdentifier: productId,
-                    targetProductIdentifier : targetProductId,
-                    properties: allProperties
-                })
-            });
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        } catch (error: unknown) {
-            // Do nothing...
-        }
-    };
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    globalThis[TrackingFunctionName] = trackFunction;
+    setMixpanelContext({
+        productId,
+        endpoint,
+        superProperties: getSuperProperties(),
+        verbose
+    });
 
-    return trackFunction;
+    if (verbose) {
+        console.log("[mixpanel] Mixpanel is initialized.");
+    }
 }

package/src/js/properties.ts

@@ -1,7 +1,8 @@
 
+import type { TelemetryContext } from "@workleap/telemetry";
 import { browserName, browserVersion, deviceType, osName, referringDomain } from "./utils.ts";
 
-export type MixpanelTrackEventProperties = Record<string, unknown>;
+export type MixpanelEventProperties = Record<string, unknown>;
 
 export const BaseProperties = {
     Browser: "$browser",
@@ -16,12 +17,6 @@ export const BaseProperties = {
     ScreenWidth: "$screen_width"
 } as const;
 
-export const TelemetryProperties = {
-    DeviceId: "Device Id",
-    LogRocketSessionUrl: "LogRocket Session Url",
-    TelemetryId: "Telemetry Id"
-} as const;
-
 export function getBaseProperties() {
     const userAgent = navigator.userAgent;
     const device = deviceType(userAgent);
@@ -37,5 +32,48 @@ export function getBaseProperties() {
         [BaseProperties.ScreenHeight]: window.screen.height,
         [BaseProperties.ScreenWidth]: window.screen.width,
         [BaseProperties.IsMobile]: device.length > 0
-    } satisfies MixpanelTrackEventProperties;
+    } satisfies MixpanelEventProperties;
+}
+
+export const TelemetryProperties = {
+    DeviceId: "Device Id",
+    TelemetryId: "Telemetry Id"
+} as const;
+
+export function getTelemetryProperties(context: TelemetryContext) {
+    return {
+        [TelemetryProperties.TelemetryId]: context.telemetryId,
+        [TelemetryProperties.DeviceId]: context.deviceId
+    } satisfies MixpanelEventProperties;
+}
+
+export const OtherProperties = {
+    LogRocketSessionUrl: "LogRocket Session Url"
+};
+
+//////////////////////
+
+export type SuperProperties = Map<string, unknown>;
+
+// Equivalent to: https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript#setting-super-properties.
+const superProperties: SuperProperties = new Map<string, unknown>();
+
+export function setSuperProperty(key: string, value: unknown) {
+    superProperties.set(key, value);
+}
+
+export function setSuperProperties(values: Record<string, unknown>) {
+    Object.keys(values).forEach(x => {
+        superProperties.set(x, values[x]);
+    });
+}
+
+// Must always return the actual reference to the super properties, not a copy
+// because it will breaks the global context.
+export function getSuperProperties() {
+    return superProperties;
+}
+
+export function __clearSuperProperties() {
+    superProperties.clear();
 }

package/src/react/index.ts

@@ -1,2 +1,2 @@
-export { useMixpanelTracking } from "./useMixpanelTracking.ts";
+export { useTrackingFunction, type UseTrackingFunctionOptions } from "./useTrackingFunction.ts";
 

package/src/react/useTrackingFunction.ts

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { createTrackingFunction, type CreateTrackingFunctionOptions } from "../js/createTrackingFunction.ts";
+
+export type UseTrackingFunctionOptions = CreateTrackingFunctionOptions;
+
+export function useTrackingFunction(options: UseTrackingFunctionOptions = {}) {
+    const {
+        targetProductId
+    } = options;
+
+    return useMemo(() => {
+        return createTrackingFunction({ targetProductId });
+    }, [targetProductId]);
+}

package/dist/js/getMixpanelTrackingFunction.d.ts

@@ -1,14 +0,0 @@
-import type { MixpanelTrackingFunction } from "./initializeMixpanel.ts";
-export declare const TrackingFunctionName = "__WLP_MIXPANEL_TRACKING_FUNCTION__";
-/**
- * @see https://workleap.github.io/wl-telemetry
- */
-export interface GetMixpanelTrackingFunctionOptions {
-    throwOnUndefined?: boolean;
-}
-/**
- * Retrieve the track function.
- * @returns A function that sends tracking events to the tracking API.
- * @see https://workleap.github.io/wl-telemetry
- */
-export declare function getMixpanelTrackingFunction(options?: GetMixpanelTrackingFunctionOptions): MixpanelTrackingFunction;

package/dist/js/getMixpanelTrackingFunction.js

@@ -1,21 +0,0 @@
-
-;// CONCATENATED MODULE: ./src/js/getMixpanelTrackingFunction.ts
-const TrackingFunctionName = "__WLP_MIXPANEL_TRACKING_FUNCTION__";
-/**
- * Retrieve the track function.
- * @returns A function that sends tracking events to the tracking API.
- * @see https://workleap.github.io/wl-telemetry
- */ function getMixpanelTrackingFunction(options = {}) {
-    const { throwOnUndefined = true } = options;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const trackFunction = globalThis[TrackingFunctionName];
-    if (!trackFunction && throwOnUndefined) {
-        throw new Error("[mixpanel] The tracking function is undefined. Did you call the \"initializeMixpanel\" function?");
-    }
-    return trackFunction;
-}
-
-export { TrackingFunctionName, getMixpanelTrackingFunction };
-
-//# sourceMappingURL=getMixpanelTrackingFunction.js.map

package/dist/js/getMixpanelTrackingFunction.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"js/getMixpanelTrackingFunction.js","sources":["webpack://@workleap/mixpanel/./src/js/getMixpanelTrackingFunction.ts"],"sourcesContent":["import type { MixpanelTrackingFunction } from \"./initializeMixpanel.ts\";\n\nexport const TrackingFunctionName = \"__WLP_MIXPANEL_TRACKING_FUNCTION__\";\n\n/**\n * @see https://workleap.github.io/wl-telemetry\n */\nexport interface GetMixpanelTrackingFunctionOptions {\n    throwOnUndefined?: boolean;\n}\n\n/**\n * Retrieve the track function.\n * @returns A function that sends tracking events to the tracking API.\n * @see https://workleap.github.io/wl-telemetry\n */\nexport function getMixpanelTrackingFunction(options: GetMixpanelTrackingFunctionOptions = {}) {\n    const {\n        throwOnUndefined = true\n    } = options;\n\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    const trackFunction = globalThis[TrackingFunctionName];\n\n    if (!trackFunction && throwOnUndefined) {\n        throw new Error(\"[mixpanel] The tracking function is undefined. Did you call the \\\"initializeMixpanel\\\" function?\");\n    }\n\n    return trackFunction as MixpanelTrackingFunction;\n}\n"],"names":["TrackingFunctionName","getMixpanelTrackingFunction","options","throwOnUndefined","trackFunction","globalThis","Error"],"mappings":";;AAEO,MAAMA,uBAAuB,qCAAqC;AASzE;;;;CAIC,GACM,SAASC,4BAA4BC,UAA8C,CAAC,CAAC;IACxF,MAAM,EACFC,mBAAmB,IAAI,EAC1B,GAAGD;IAEJ,6DAA6D;IAC7D,aAAa;IACb,MAAME,gBAAgBC,UAAU,CAACL,qBAAqB;IAEtD,IAAI,CAACI,iBAAiBD,kBAAkB;QACpC,MAAM,IAAIG,MAAM;IACpB;IAEA,OAAOF;AACX"}

package/dist/react/useMixpanelTracking.d.ts

@@ -1,11 +0,0 @@
-import { type GetMixpanelTrackingFunctionOptions } from "../js/getMixpanelTrackingFunction.ts";
-/**
- * @see https://workleap.github.io/wl-telemetry
- */
-export type UseMixpanelTrackingOptions = GetMixpanelTrackingFunctionOptions;
-/**
- * Retrieve the track function.
- * @returns A function that sends tracking events to the tracking API.
- * @see https://workleap.github.io/wl-telemetry
- */
-export declare function useMixpanelTracking(options?: UseMixpanelTrackingOptions): import("../js/initializeMixpanel.ts").MixpanelTrackingFunction;

package/dist/react/useMixpanelTracking.js

@@ -1,17 +0,0 @@
-import { getMixpanelTrackingFunction } from "../js/getMixpanelTrackingFunction.js";
-
-;// CONCATENATED MODULE: external "../js/getMixpanelTrackingFunction.js"
-
-;// CONCATENATED MODULE: ./src/react/useMixpanelTracking.ts
-
-/**
- * Retrieve the track function.
- * @returns A function that sends tracking events to the tracking API.
- * @see https://workleap.github.io/wl-telemetry
- */ function useMixpanelTracking(options) {
-    return getMixpanelTrackingFunction(options);
-}
-
-export { useMixpanelTracking };
-
-//# sourceMappingURL=useMixpanelTracking.js.map

package/dist/react/useMixpanelTracking.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react/useMixpanelTracking.js","sources":["webpack://@workleap/mixpanel/./src/react/useMixpanelTracking.ts"],"sourcesContent":["import { getMixpanelTrackingFunction, type GetMixpanelTrackingFunctionOptions } from \"../js/getMixpanelTrackingFunction.ts\";\n\n/**\n * @see https://workleap.github.io/wl-telemetry\n */\nexport type UseMixpanelTrackingOptions = GetMixpanelTrackingFunctionOptions;\n\n/**\n * Retrieve the track function.\n * @returns A function that sends tracking events to the tracking API.\n * @see https://workleap.github.io/wl-telemetry\n */\nexport function useMixpanelTracking(options?: UseMixpanelTrackingOptions) {\n    return getMixpanelTrackingFunction(options);\n}\n"],"names":["getMixpanelTrackingFunction","useMixpanelTracking","options"],"mappings":";;;;;AAA4H;AAO5H;;;;CAIC,GACM,SAASC,oBAAoBC,OAAoC;IACpE,OAAOF,2BAA2BA,CAACE;AACvC"}

package/src/js/getMixpanelTrackingFunction.ts

@@ -1,31 +0,0 @@
-import type { MixpanelTrackingFunction } from "./initializeMixpanel.ts";
-
-export const TrackingFunctionName = "__WLP_MIXPANEL_TRACKING_FUNCTION__";
-
-/**
- * @see https://workleap.github.io/wl-telemetry
- */
-export interface GetMixpanelTrackingFunctionOptions {
-    throwOnUndefined?: boolean;
-}
-
-/**
- * Retrieve the track function.
- * @returns A function that sends tracking events to the tracking API.
- * @see https://workleap.github.io/wl-telemetry
- */
-export function getMixpanelTrackingFunction(options: GetMixpanelTrackingFunctionOptions = {}) {
-    const {
-        throwOnUndefined = true
-    } = options;
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const trackFunction = globalThis[TrackingFunctionName];
-
-    if (!trackFunction && throwOnUndefined) {
-        throw new Error("[mixpanel] The tracking function is undefined. Did you call the \"initializeMixpanel\" function?");
-    }
-
-    return trackFunction as MixpanelTrackingFunction;
-}

package/src/react/useMixpanelTracking.ts

@@ -1,15 +0,0 @@
-import { getMixpanelTrackingFunction, type GetMixpanelTrackingFunctionOptions } from "../js/getMixpanelTrackingFunction.ts";
-
-/**
- * @see https://workleap.github.io/wl-telemetry
- */
-export type UseMixpanelTrackingOptions = GetMixpanelTrackingFunctionOptions;
-
-/**
- * Retrieve the track function.
- * @returns A function that sends tracking events to the tracking API.
- * @see https://workleap.github.io/wl-telemetry
- */
-export function useMixpanelTracking(options?: UseMixpanelTrackingOptions) {
-    return getMixpanelTrackingFunction(options);
-}