@jitsu/js 1.5.1 → 1.7.1

package/src/destination-plugins/ga4.ts

@@ -0,0 +1,123 @@
+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 Ga4DestinationCredentials = {
+  debug?: boolean;
+  measurementIds?: string;
+  autoPageView?: boolean;
+  dataLayerName?: string;
+} & CommonDestinationCredentials;
+
+export const ga4Plugin: InternalPlugin<Ga4DestinationCredentials> = {
+  id: "ga4-tag",
+  async handle(config, payload: AnalyticsClientEvent) {
+    if (!applyFilters(payload, config)) {
+      return;
+    }
+    await initGa4IfNeeded(config, payload);
+
+    const dataLayer = window[config.dataLayerName || "dataLayer"];
+    const gtag = function () {
+      dataLayer.push(arguments);
+    };
+    const ids = {
+      ...(payload.userId ? { user_id: payload.userId, userId: payload.userId } : {}),
+      ...(payload.anonymousId ? { anonymousId: payload.anonymousId } : {}),
+    };
+    if (payload.userId) {
+      // @ts-ignore
+      gtag("set", { user_id: payload.userId });
+    }
+
+    switch (payload.type) {
+      case "page":
+        if (config.autoPageView) {
+          console.log("autoPageView");
+          break;
+        }
+        const { properties: pageProperties, context } = payload;
+        const pageEvent = {
+          page_location: pageProperties.url,
+          page_title: pageProperties.title,
+          page_path: pageProperties.path,
+          page_hash: pageProperties.hash,
+          page_search: pageProperties.search,
+          page_referrer: context?.page?.referrer ?? "",
+          ...ids,
+        };
+        // @ts-ignore
+        gtag("event", "page_view", pageEvent);
+        break;
+      case "track":
+        const { properties: trackProperties } = payload;
+        const trackEvent: any = {
+          ...trackProperties,
+          ...ids,
+        };
+        // @ts-ignore
+        gtag("event", payload.event, trackEvent);
+        break;
+      case "identify":
+        const { traits } = payload;
+        const identifyEvent: any = {
+          ...traits,
+          ...ids,
+        };
+        // @ts-ignore
+        gtag("event", "identify", identifyEvent);
+        break;
+    }
+  },
+};
+
+type GtmState = "fresh" | "loading" | "loaded" | "failed";
+
+function getGa4State(): GtmState {
+  return window["__jitsuGa4State"] || "fresh";
+}
+
+function setGa4State(s: GtmState) {
+  window["__jitsuGa4State"] = s;
+}
+
+async function initGa4IfNeeded(config: Ga4DestinationCredentials, payload: AnalyticsClientEvent) {
+  if (getGa4State() !== "fresh") {
+    return;
+  }
+  setGa4State("loading");
+
+  const dlName = config.dataLayerName || "dataLayer";
+  const dlParam = dlName !== "dataLayer" ? "&l=" + dlName : "";
+
+  // to work with both GA4 and GTM
+  const tagId = config.measurementIds;
+  const scriptSrc = `${defaultScriptSrc}?id=${tagId}${dlParam}`;
+
+  window[dlName] = window[dlName] || [];
+  const gtag = function () {
+    window[dlName].push(arguments);
+  };
+  // @ts-ignore
+  gtag("js", new Date());
+  gtag(
+    // @ts-ignore
+    "config",
+    tagId,
+    {
+      ...(payload.userId ? { user_id: payload.userId } : {}),
+      ...(!config.autoPageView ? { send_page_view: false } : {}),
+    }
+  );
+
+  loadScript(scriptSrc)
+    .then(() => {
+      setGa4State("loaded");
+    })
+    .catch(e => {
+      console.warn(`GA4 (containerId=${config.measurementIds}) init failed: ${e.message}`, e);
+      setGa4State("failed");
+    });
+}

package/src/destination-plugins/gtm.ts

@@ -5,12 +5,12 @@ import { applyFilters, CommonDestinationCredentials, InternalPlugin } from "./in
 const defaultScriptSrc = "https://www.googletagmanager.com/gtag/js";
 
 export type GtmDestinationCredentials = {
-  debug: boolean;
-  containerId: string;
-  dataLayerName: string;
-  preview: string;
-  auth: string;
-  customScriptSrc: string;
+  debug?: boolean;
+  containerId?: string;
+  dataLayerName?: string;
+  preview?: string;
+  auth?: string;
+  customScriptSrc?: string;
 } & CommonDestinationCredentials;
 
 export const gtmPlugin: InternalPlugin<GtmDestinationCredentials> = {
@@ -19,53 +19,50 @@ export const gtmPlugin: InternalPlugin<GtmDestinationCredentials> = {
     if (!applyFilters(payload, config)) {
       return;
     }
-    await initGtmIfNeeded(config);
+    await initGtmIfNeeded(config, payload);
 
     const dataLayer = window[config.dataLayerName || "dataLayer"];
-
+    const ids = {
+      ...(payload.userId ? { user_id: payload.userId, userId: payload.userId } : {}),
+      ...(payload.anonymousId ? { anonymousId: payload.anonymousId } : {}),
+    };
     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 ?? "",
+          page_location: pageProperties.url,
+          page_title: pageProperties.title,
+          page_path: pageProperties.path,
+          page_hash: pageProperties.hash,
+          page_search: pageProperties.search,
+          page_referrer: context?.page?.referrer ?? "",
+          ...ids,
         };
-        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);
-        }
+        const trackEvent: any = {
+          event: payload.event,
+          ...trackProperties,
+          ...ids,
+        };
         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);
-        }
+        const identifyEvent: any = {
+          event: "identify",
+          ...traits,
+          ...ids,
+        };
         dataLayer.push(identifyEvent);
         break;
     }
+    dataLayer.push(function () {
+      this.reset();
+    });
   },
 };
 
@@ -79,7 +76,7 @@ function setGtmState(s: GtmState) {
   window["__jitsuGtmState"] = s;
 }
 
-async function initGtmIfNeeded(config: GtmDestinationCredentials) {
+async function initGtmIfNeeded(config: GtmDestinationCredentials, payload: AnalyticsClientEvent) {
   if (getGtmState() !== "fresh") {
     return;
   }
@@ -90,23 +87,27 @@ async function initGtmIfNeeded(config: GtmDestinationCredentials) {
   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}`;
+  const tagId = config.containerId;
+  const scriptSrc = `${config.customScriptSrc || defaultScriptSrc}?id=${tagId}${dlParam}${previewParams}`;
 
   window[dlName] = window[dlName] || [];
   const gtag = function () {
     window[dlName].push(arguments);
   };
+  window[dlName].push({
+    user_id: payload.userId,
+  });
   // @ts-ignore
   gtag("js", new Date());
   // @ts-ignore
-  gtag("config", config.containerId);
+  gtag("config", tagId);
 
   loadScript(scriptSrc)
     .then(() => {
       setGtmState("loaded");
     })
     .catch(e => {
-      console.warn(`GTM (containerId=${config.containerId}) init failed: ${e.message}`, e);
+      console.warn(`GTM (containerId=${tagId}) init failed: ${e.message}`, e);
       setGtmState("failed");
     });
 }

package/src/destination-plugins/index.ts

@@ -2,6 +2,7 @@ import { AnalyticsClientEvent } from "@jitsu/protocols/analytics";
 import { tagPlugin } from "./tag";
 import { logrocketPlugin } from "./logrocket";
 import { gtmPlugin } from "./gtm";
+import { ga4Plugin } from "./ga4";
 
 export type InternalPlugin<T> = {
   id: string;
@@ -36,7 +37,7 @@ export function applyFilters(event: AnalyticsClientEvent, creds: CommonDestinati
     const eventsArray = Array.isArray(events) ? events : events.split("\n");
     const hostsArray = Array.isArray(hosts) ? hosts : hosts.split("\n");
     return (
-      !!hostsArray.find(hostFilter => satisfyDomainFilter(hostFilter, event.context?.host)) &&
+      !!hostsArray.find(hostFilter => satisfyDomainFilter(hostFilter, event.context?.page?.host)) &&
       (!!eventsArray.find(eventFilter => satisfyFilter(eventFilter, event.type)) ||
         !!eventsArray.find(eventFilter => satisfyFilter(eventFilter, event.event)))
     );
@@ -55,5 +56,6 @@ export function applyFilters(event: AnalyticsClientEvent, creds: CommonDestinati
 export const internalDestinationPlugins: Record<string, InternalPlugin<any>> = {
   [tagPlugin.id]: tagPlugin,
   [gtmPlugin.id]: gtmPlugin,
+  [ga4Plugin.id]: ga4Plugin,
   [logrocketPlugin.id]: logrocketPlugin,
 };

package/src/index.ts

@@ -98,4 +98,3 @@ export function jitsuAnalytics(opts: JitsuOptions): AnalyticsInterface {
 
 export * from "./jitsu";
 export * from "./analytics-plugin";
-export { getTopLevelDomain } from "./tlds";

package/src/jitsu.ts

@@ -52,6 +52,9 @@ type RuntimeFacade = {
   language(): string | undefined;
   pageUrl(): string | undefined;
   documentEncoding(): string | undefined;
+  getCookie(name: string): string | undefined;
+  getCookies(): Record<string, string>;
+
   timezoneOffset(): number | undefined;
   screen():
     | {

package/tsconfig.json

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