@jitsu/js 1.0.0-canary-20230219230449 → 1.1.0-canary.14.20230602211353

package/src/analytics-plugin.ts

@@ -1,13 +1,14 @@
 /* global analytics */
 
 import { JitsuOptions, PersistentStorage, RuntimeFacade } from "./jitsu";
-import { AnalyticsClientEvent } from "@jitsu/protocols/analytics";
+import { AnalyticsClientEvent, Callback, ID, JSONObject, Options } from "@jitsu/protocols/analytics";
 import parse from "./index";
 import { AnalyticsInstance, AnalyticsPlugin } from "analytics";
-import { internalDestinationPlugins } from "./destination-plugins";
 import { loadScript } from "./script-loader";
+import { internalDestinationPlugins } from "./destination-plugins";
+import { jitsuLibraryName, jitsuVersion } from "./version";
 
-const config: JitsuOptions = {
+const defaultConfig: Required<JitsuOptions> = {
   /* Your segment writeKey */
   writeKey: null,
   /* Disable anonymous MTU */
@@ -15,6 +16,8 @@ const config: JitsuOptions = {
   debug: false,
   fetch: null,
   echoEvents: false,
+  cookieDomain: undefined,
+  runtime: undefined,
 };
 
 export const parseQuery = (qs?: string): Record<string, string> => {
@@ -255,13 +258,13 @@ function adjustPayload(payload: any, config: JitsuOptions, storage: PersistentSt
   const referrer = runtime.referrer();
   const context = {
     library: {
-      name: "jitsu-js",
-      version: "1.0.0",
+      name: jitsuLibraryName,
+      version: jitsuVersion,
     },
     userAgent: runtime.userAgent(),
     locale: runtime.language(),
     screen: runtime.screen(),
-    traits: payload.type != "identify" ? { ...(restoreTraits(storage) || {}) } : undefined,
+    traits: payload.type != "identify" && payload.type != "group" ? { ...(restoreTraits(storage) || {}) } : undefined,
     page: {
       path: properties.path || (parsedUrl && parsedUrl.pathname),
       referrer: referrer,
@@ -270,7 +273,7 @@ function adjustPayload(payload: any, config: JitsuOptions, storage: PersistentSt
       search: properties.search || (parsedUrl && parsedUrl.search),
       title: properties.title || runtime.pageTitle(),
       url: properties.url || url,
-      enconding: properties.enconding || runtime.documentEncoding(),
+      encoding: properties.encoding || runtime.documentEncoding(),
     },
     campaign: parseUtms(query),
   };
@@ -279,7 +282,7 @@ function adjustPayload(payload: any, config: JitsuOptions, storage: PersistentSt
     timestamp: new Date().toISOString(),
     sentAt: new Date().toISOString(),
     messageId: randomId(properties.path || (parsedUrl && parsedUrl.pathname)),
-    writeKey: config.writeKey,
+    writeKey: validateWriteKey(config.writeKey),
     context: deepMerge(context, customContext),
   };
   delete withContext.meta;
@@ -291,6 +294,7 @@ export type DestinationDescriptor = {
   id: string;
   destinationType: string;
   credentials: any;
+  options: any;
   deviceOptions: DeviceOptions;
 };
 export type AnalyticsPluginDescriptor = {
@@ -315,11 +319,13 @@ async function processDestinations(
 ) {
   const promises: Promise<any>[] = [];
   for (const destination of destinations) {
+    const credentials = { ...destination.credentials, ...destination.options };
+
     if (destination.deviceOptions.type === "internal-plugin") {
       const plugin = internalDestinationPlugins[destination.deviceOptions.name];
       if (plugin) {
         try {
-          promises.push(plugin.handle(destination.credentials, event));
+          promises.push(plugin.handle(credentials, event));
         } catch (e) {
           console.warn(
             `[JITSU] Error processing event with internal plugin '${destination.deviceOptions.name}': ${e?.message}`,
@@ -341,7 +347,7 @@ async function processDestinations(
       } else {
         let pluginInstance: any;
         try {
-          pluginInstance = (typeof plugin === "function" ? plugin : plugin.init)(destination.credentials);
+          pluginInstance = (typeof plugin === "function" ? plugin : plugin.init)(credentials);
         } catch (e) {
           console.warn(
             `[JITSU] Error creating plugin '${destination.deviceOptions.moduleVarName}@${destination.deviceOptions.packageCdn}' for destination '${destination.id}': ${e?.message}`,
@@ -381,6 +387,21 @@ async function processDestinations(
   }
 }
 
+function looksLikeCuid(id: string) {
+  return id.length === 25 && id.charAt(0) === "c";
+}
+
+function validateWriteKey(writeKey?: string): string | undefined {
+  if (writeKey) {
+    const [, secret] = writeKey.split(":", 2);
+    if (!secret && !looksLikeCuid(writeKey)) {
+      throw new Error(
+        `Legacy write key detected - ${writeKey}! This format doesn't work anymore, it should be 'key:secret'. Please download a new key from Jitsu UI`
+      );
+    }
+  }
+  return writeKey;
+}
 function send(
   method,
   payload,
@@ -400,13 +421,15 @@ function send(
       "Please specify fetch function in jitsu plugin initialization, fetch isn't available in global scope"
     );
   }
-  const authHeader = {};
   const debugHeader = jitsuConfig.debug ? { "X-Enable-Debug": "true" } : {};
 
   // if (jitsuConfig.debug) {
   //   console.log(`[JITSU] Sending event to ${url}: `, JSON.stringify(payload, null, 2));
   // }
   const adjustedPayload = adjustPayload(payload, jitsuConfig, store);
+
+  const authHeader = jitsuConfig.writeKey ? { "X-Write-Key": validateWriteKey(jitsuConfig.writeKey) } : {};
+
   return fetch(url, {
     method: "POST",
     headers: {
@@ -439,7 +462,7 @@ function send(
       }
       if (response.destinations) {
         if (jitsuConfig.debug) {
-          console.log(`[JITSU] Processing device destianations: `, JSON.stringify(response.destinations, null, 2));
+          console.log(`[JITSU] Processing device destinations: `, JSON.stringify(response.destinations, null, 2));
         }
         return processDestinations(response.destinations, method, adjustedPayload, !!jitsuConfig.debug, instance);
       }
@@ -469,12 +492,13 @@ const jitsuAnalyticsPlugin = (pluginConfig: JitsuOptions = {}): AnalyticsPlugin
       persistentStorage.removeItem(key);
     },
   });
+  const instanceConfig = {
+    ...defaultConfig,
+    ...pluginConfig,
+  };
   return {
     name: "jitsu",
-    config: {
-      ...config,
-      ...pluginConfig,
-    },
+    config: instanceConfig,
     initialize: args => {
       const { config } = args;
       if (config.debug) {
@@ -502,6 +526,22 @@ const jitsuAnalyticsPlugin = (pluginConfig: JitsuOptions = {}): AnalyticsPlugin
       //clear storage cache
       Object.keys(storageCache).forEach(key => delete storageCache[key]);
     },
+    methods: {
+      //analytics doesn't support group as a base method, so we need to add it manually
+      group(groupId?: ID, traits?: JSONObject | null, options?: Options, callback?: Callback) {
+        const analyticsInstance = this.instance;
+        const user = analyticsInstance.user();
+        const userId = options?.userId || user?.userId;
+        const anonymousId = options?.anonymousId || user?.anonymousId;
+        return send(
+          "group",
+          { type: "group", groupId, traits, ...(anonymousId ? { anonymousId } : {}), ...(userId ? { userId } : {}) },
+          instanceConfig,
+          analyticsInstance,
+          cachingStorageWrapper(analyticsInstance.storage)
+        );
+      },
+    },
   };
 };
 

package/src/destination-plugins/gtm.ts

@@ -0,0 +1,112 @@
+import { loadScript } from "../script-loader";
+import { AnalyticsClientEvent } from "@jitsu/protocols/analytics";
+import { applyFilters, CommonDestinationCredentials, InternalPlugin } from "./index";
+
+const defaultScriptSrc = "https://www.googletagmanager.com/gtag/js";
+
+export type GtmDestinationCredentials = {
+  debug: boolean;
+  containerId: string;
+  dataLayerName: string;
+  preview: string;
+  auth: string;
+  customScriptSrc: string;
+} & CommonDestinationCredentials;
+
+export const gtmPlugin: InternalPlugin<GtmDestinationCredentials> = {
+  id: "gtm",
+  async handle(config, payload: AnalyticsClientEvent) {
+    if (!applyFilters(payload, config)) {
+      return;
+    }
+    await initGtmIfNeeded(config);
+
+    const dataLayer = window[config.dataLayerName || "dataLayer"];
+
+    switch (payload.type) {
+      case "page":
+        const { properties: pageProperties, context } = payload;
+        const pageEvent = {
+          event: "page_view",
+          url: pageProperties.url,
+          title: pageProperties.title,
+          referer: context?.page?.referrer ?? "",
+        };
+        if (config.debug) {
+          console.log("gtag push", pageEvent);
+        }
+        dataLayer.push(pageEvent);
+        break;
+      case "track":
+        const { properties: trackProperties } = payload;
+        const trackEvent: any = { event: payload.event, ...trackProperties };
+        if (payload.userId) {
+          trackEvent.userId = payload.userId;
+        }
+        if (payload.anonymousId) {
+          trackEvent.anonymousId = payload.anonymousId;
+        }
+        if (config.debug) {
+          console.log("gtag push", trackEvent);
+        }
+        dataLayer.push(trackEvent);
+        break;
+      case "identify":
+        const { traits } = payload;
+        const identifyEvent: any = { event: "identify", ...traits };
+        if (payload.userId) {
+          identifyEvent.userId = payload.userId;
+        }
+        if (payload.anonymousId) {
+          identifyEvent.anonymousId = payload.anonymousId;
+        }
+        if (config.debug) {
+          console.log("gtag push", identifyEvent);
+        }
+        dataLayer.push(identifyEvent);
+        break;
+    }
+  },
+};
+
+type GtmState = "fresh" | "loading" | "loaded" | "failed";
+
+function getGtmState(): GtmState {
+  return window["__jitsuGtmState"] || "fresh";
+}
+
+function setGtmState(s: GtmState) {
+  window["__jitsuGtmState"] = s;
+}
+
+async function initGtmIfNeeded(config: GtmDestinationCredentials) {
+  if (getGtmState() !== "fresh") {
+    return;
+  }
+  setGtmState("loading");
+
+  const dlName = config.dataLayerName || "dataLayer";
+  const dlParam = dlName !== "dataLayer" ? "&l=" + dlName : "";
+  const previewParams = config.preview
+    ? `&gtm_preview=${config.preview}&gtm_auth=${config.auth}&gtm_cookies_win=x`
+    : "";
+  const scriptSrc = `${config.customScriptSrc || defaultScriptSrc}?id=${config.containerId}${dlParam}${previewParams}`;
+
+  window[dlName] = window[dlName] || [];
+  const gtag = function () {
+    window[dlName].push(arguments);
+  };
+  // @ts-ignore
+  gtag("js", new Date());
+  // @ts-ignore
+  gtag("config", config.containerId);
+
+  loadScript(scriptSrc)
+    .then(() => {
+      setGtmState("loaded");
+    })
+    .catch(e => {
+      console.warn(`GTM (containerId=${config.containerId}) init failed: ${e.message}`, e);
+      setGtmState("failed");
+    });
+}

package/src/destination-plugins/index.ts

@@ -0,0 +1,47 @@
+import { AnalyticsClientEvent } from "@jitsu/protocols/analytics";
+import { tagPlugin } from "./tag";
+import { logrocketPlugin } from "./logrocket";
+import { gtmPlugin } from "./gtm";
+
+export type InternalPlugin<T> = {
+  id: string;
+  handle(config: T, payload: AnalyticsClientEvent): Promise<void>;
+};
+
+export type CommonDestinationCredentials = {
+  hosts?: string;
+  events?: string;
+};
+
+export function satisfyFilter(filter: string, subject: string | undefined): boolean {
+  return filter === "*" || filter.toLowerCase().trim() === (subject || "").trim().toLowerCase();
+}
+
+export function satisfyDomainFilter(filter: string, subject: string | undefined): boolean {
+  if (filter === "*") {
+    return true;
+  }
+  subject = subject || "";
+
+  if (filter.startsWith("*.")) {
+    return subject.endsWith(filter.substring(1));
+  } else {
+    return filter === subject;
+  }
+}
+
+export function applyFilters(event: AnalyticsClientEvent, creds: CommonDestinationCredentials): boolean {
+  const { hosts = "*", events = "*" } = creds;
+  const eventsArray = events.split("\n");
+  return (
+    !!hosts.split("\n").find(hostFilter => satisfyDomainFilter(hostFilter, event.context?.host)) &&
+    (!!eventsArray.find(eventFilter => satisfyFilter(eventFilter, event.type)) ||
+      !!eventsArray.find(eventFilter => satisfyFilter(eventFilter, event.event)))
+  );
+}
+
+export const internalDestinationPlugins: Record<string, InternalPlugin<any>> = {
+  [tagPlugin.id]: tagPlugin,
+  [gtmPlugin.id]: gtmPlugin,
+  [logrocketPlugin.id]: logrocketPlugin,
+};

package/src/destination-plugins/logrocket.ts

@@ -0,0 +1,83 @@
+import { loadScript } from "../script-loader";
+import { AnalyticsClientEvent } from "@jitsu/protocols/analytics";
+import { applyFilters, CommonDestinationCredentials, InternalPlugin } from "./index";
+
+export type LogRocketDestinationCredentials = {
+  appId: string;
+} & CommonDestinationCredentials;
+
+export const logrocketPlugin: InternalPlugin<LogRocketDestinationCredentials> = {
+  id: "logrocket",
+  async handle(config, payload: AnalyticsClientEvent) {
+    if (!applyFilters(payload, config)) {
+      return;
+    }
+    initLogrocketIfNeeded(config.appId);
+
+    const action = logRocket => {
+      if (payload.type === "identify" && payload.userId) {
+        logRocket.identify(payload.userId, payload.traits || {});
+      }
+    };
+    getLogRocketQueue().push(action);
+    if (getLogRocketState() === "loaded") {
+      flushLogRocketQueue(window["LogRocket"]);
+    }
+  },
+};
+
+type LogRocketState = "fresh" | "loading" | "loaded" | "failed";
+
+function getLogRocketState(): LogRocketState {
+  return window["__jitsuLrState"] || "fresh";
+}
+
+function setLogRocketState(s: LogRocketState) {
+  window["__jitsuLrState"] = s;
+}
+
+function getLogRocketQueue(): ((lr: LogRocket) => void | Promise<void>)[] {
+  return window["__jitsuLrQueue"] || (window["__jitsuLrQueue"] = []);
+}
+
+export type LogRocket = any;
+
+function flushLogRocketQueue(lr: LogRocket) {
+  const queue = getLogRocketQueue();
+
+  while (queue.length > 0) {
+    const method = queue.shift();
+    try {
+      const res = method(lr);
+      if (res) {
+        res.catch(e => console.warn(`Async LogRocket method failed: ${e.message}`, e));
+      }
+    } catch (e) {
+      console.warn(`LogRocket method failed: ${e.message}`, e);
+    }
+  }
+}
+
+async function initLogrocketIfNeeded(appId: string) {
+  if (getLogRocketState() !== "fresh") {
+    return;
+  }
+  setLogRocketState("loading");
+  loadScript(`https://cdn.lr-ingest.io/LogRocket.min.js`, { crossOrigin: "anonymous" })
+    .then(() => {
+      if (window["LogRocket"]) {
+        try {
+          window["LogRocket"].init(appId);
+        } catch (e) {
+          console.warn(`LogRocket (id=${appId}) init failed: ${e.message}`, e);
+          setLogRocketState("failed");
+        }
+        setLogRocketState("loaded");
+        flushLogRocketQueue(window["LogRocket"]);
+      }
+    })
+    .catch(e => {
+      console.warn(`LogRocket (id=${appId}) init failed: ${e.message}`, e);
+      setLogRocketState("failed");
+    });
+}

package/src/{destination-plugins.ts → destination-plugins/tag.ts}

@@ -1,33 +1,12 @@
 import { AnalyticsClientEvent } from "@jitsu/protocols/analytics";
-import { isInBrowser, randomId } from "./analytics-plugin";
-
-export type InternalPlugin<T> = {
-  id: string;
-  handle(config: T, payload: AnalyticsClientEvent): Promise<void>;
-};
-
-export type CommonDestinationCredentials = {
-  hosts?: string[];
-  events?: string[];
-};
+import { applyFilters, CommonDestinationCredentials, InternalPlugin } from "./index";
+import { isInBrowser, randomId } from "../analytics-plugin";
 
 export type TagDestinationCredentials = {
   code: string;
 } & CommonDestinationCredentials;
 
-function satisfyFilter(filter: string, subject: string | undefined): boolean {
-  return filter === "*" || filter.toLowerCase().trim() === (subject || "").trim().toLowerCase();
-}
-
-function applyFilters(event: AnalyticsClientEvent, creds: CommonDestinationCredentials): boolean {
-  const { hosts = ["*"], events = ["*"] } = creds;
-  return (
-    !!hosts.find(hostFilter => satisfyFilter(hostFilter, event.context?.host)) &&
-    !!events.find(eventFilter => satisfyFilter(eventFilter, event.type))
-  );
-}
-
-const tagPlugin: InternalPlugin<TagDestinationCredentials> = {
+export const tagPlugin: InternalPlugin<TagDestinationCredentials> = {
   id: "tag",
   async handle(config, payload: AnalyticsClientEvent) {
     if (!applyFilters(payload, config)) {
@@ -97,7 +76,3 @@ function execJs(code: string, event: any) {
 function replaceMacro(code, event) {
   return code.replace(/{{\s*event\s*}}/g, JSON.stringify(event));
 }
-
-export const internalDestinationPlugins: Record<string, InternalPlugin<any>> = {
-  [tagPlugin.id]: tagPlugin,
-};

package/src/index.ts

@@ -1,8 +1,7 @@
 import Analytics from "analytics";
 import { AnalyticsInterface, JitsuOptions, RuntimeFacade } from "./jitsu";
 import jitsuAnalyticsPlugin, { emptyRuntime, isInBrowser, windowRuntime } from "./analytics-plugin";
-import { delayMethodExec } from "./method-queue";
-import e from "express";
+import { Callback, DispatchedEvent, ID, JSONObject, Options } from "@jitsu/protocols/analytics";
 
 export default function parse(input) {
   let value = input;
@@ -24,6 +23,15 @@ export default function parse(input) {
   return value;
 }
 
+export const emptyAnalytics = {
+  track: () => Promise.resolve(),
+  page: () => Promise.resolve(),
+  user: () => ({}),
+  identify: () => Promise.resolve({}),
+  group: () => Promise.resolve({}),
+  reset: () => Promise.resolve({}),
+};
+
 function createUnderlyingAnalyticsInstance(
   opts: JitsuOptions,
   rt: RuntimeFacade,
@@ -46,7 +54,17 @@ function createUnderlyingAnalyticsInstance(
       return originalPage(...args);
     }
   };
-  return analytics as AnalyticsInterface;
+  return {
+    ...analytics,
+    group(groupId?: ID, traits?: JSONObject | null, options?: Options, callback?: Callback): Promise<DispatchedEvent> {
+      for (const plugin of Object.values(analytics.plugins)) {
+        if (plugin["group"]) {
+          plugin["group"](groupId, traits, options, callback);
+        }
+      }
+      return Promise.resolve({});
+    },
+  } as AnalyticsInterface;
 }
 
 export function jitsuAnalytics(opts: JitsuOptions): AnalyticsInterface {

package/src/jitsu.ts

@@ -16,7 +16,7 @@ type JitsuOptions = {
    */
   debug?: boolean;
   /**
-   * Explicitely specify cookie domain. If not set, cookie domain will be set to top level
+   * Explicitly specify cookie domain. If not set, cookie domain will be set to top level
    * of the current domain. Example: if JS lives on "app.example.com", cookie domain will be
    * set to ".example.com". If it lives on "example.com", cookie domain will be set to ".example.com" too
    */

package/src/version.ts

@@ -0,0 +1,3 @@
+import { name as jitsuLibraryName, version as jitsuVersion } from "../package.json";
+
+export { jitsuVersion, jitsuLibraryName };

package/tsconfig.json

@@ -5,6 +5,7 @@
     "declaration": true,
     "esModuleInterop": true,
     "moduleResolution": "Node",
+    "resolveJsonModule": true,
     "target": "ES2015",
     "lib": ["es2017", "dom"],
     //this makes typescript igore @types/node during compilation

package/dist/destination-plugins.d.ts

@@ -1,13 +0,0 @@
-import { AnalyticsClientEvent } from "@jitsu/protocols/analytics";
-export type InternalPlugin<T> = {
-    id: string;
-    handle(config: T, payload: AnalyticsClientEvent): Promise<void>;
-};
-export type CommonDestinationCredentials = {
-    hosts?: string[];
-    events?: string[];
-};
-export type TagDestinationCredentials = {
-    code: string;
-} & CommonDestinationCredentials;
-export declare const internalDestinationPlugins: Record<string, InternalPlugin<any>>;