@wapitee/typhoonx-hydrogen 0.6.0 → 0.8.0

package/README.md

@@ -42,11 +42,12 @@ const {nonce, header, NonceProvider} = createContentSecurityPolicy({
 
 ### Props
 
-| Prop           | Type     | Required | Description                                                                                                       |
-| -------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
-| `merchantId`   | `string` | yes      | TyphoonX merchant ID (`TPX-…`)                                                                                    |
-| `shopId`       | `string` | yes      | Shopify store ID                                                                                                  |
-| `cookieDomain` | `string` | no       | Cookie `Domain` for a first-party client id. Defaults to the current hostname's apex domain (e.g. `.example.com`) |
+| Prop            | Type     | Required | Description                                                                                                       |
+| --------------- | -------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
+| `merchantId`    | `string` | yes      | TyphoonX merchant ID (`TPX-…`)                                                                                    |
+| `shopId`        | `string` | yes      | Shopify store ID                                                                                                  |
+| `cookieDomain`  | `string` | no       | Cookie `Domain` for a first-party client id. Defaults to the current hostname's apex domain (e.g. `.example.com`) |
+| `measurementId` | `string` | no       | GA4 measurement ID (`G-…`). Enables `ga_session_id`                                                               |
 
 ## License
 

package/dist/TyphoonX.d.ts

@@ -2,6 +2,8 @@ export interface TyphoonXProps {
     merchantId: string;
     shopId: string;
     cookieDomain?: string;
+    /** GA4 measurement ID (`G-…`) whose `_ga_<ID>` cookie supplies `ga_session_id`. */
+    measurementId?: string;
 }
 export default function TyphoonX(props: TyphoonXProps): import("react").JSX.Element | null;
 //# sourceMappingURL=TyphoonX.d.ts.map

package/dist/TyphoonX.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TyphoonX.d.ts","sourceRoot":"","sources":["../src/TyphoonX.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmCD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sCAqBpD"}
+{"version":3,"file":"TyphoonX.d.ts","sourceRoot":"","sources":["../src/TyphoonX.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAmCD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sCAuBpD"}

package/dist/TyphoonX.js

@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { flattenConnection, parseGid, useAnalytics } from '@shopify/hydrogen';
 import { useEffect, useRef, useState } from 'react';
 import { getOrCreateClientId, hasClientId } from './client-id.js';
+import { getGoogleIds } from './google-ids.js';
+import { getMetaPixelIds } from './meta-pixel.js';
 const COLLECT_ENDPOINT = 'https://spell.typhoonx.io/api/v1/receive';
 export default function TyphoonX(props) {
     const { subscribe } = useAnalytics();
@@ -20,7 +22,7 @@ export default function TyphoonX(props) {
     }
     return _jsx(TyphoonXClient, { ...props });
 }
-function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
+function TyphoonXClient({ cookieDomain, measurementId, merchantId, shopId, }) {
     const { canTrack, register, subscribe } = useAnalytics();
     const { ready } = register('TyphoonX');
     const currentUrlRef = useRef(null);
@@ -59,6 +61,8 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
             timestamp: new Date().toISOString(),
             user_agent: window.navigator.userAgent,
             ...(currency === undefined ? {} : { currency }),
+            ...getMetaPixelIds(url),
+            ...getGoogleIds(url, measurementId),
         });
         subscribe('cart_viewed', (data) => {
             const { cart } = data;
@@ -149,8 +153,8 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
                         quantity,
                     },
                 ],
-                value: String(Number(prevLine.cost.totalAmount.amount)
-                    - Number(currentLine?.cost.totalAmount.amount ?? 0)),
+                value: String(Number(prevLine.cost.totalAmount.amount) -
+                    Number(currentLine?.cost.totalAmount.amount ?? 0)),
             });
         });
         subscribe('product_viewed', (data) => {
@@ -183,6 +187,14 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
             });
         });
         ready();
-    }, [cookieDomain, merchantId, shopId, canTrack, ready, subscribe]);
+    }, [
+        cookieDomain,
+        measurementId,
+        merchantId,
+        shopId,
+        canTrack,
+        ready,
+        subscribe,
+    ]);
     return null;
 }

package/dist/google-ids.d.ts

@@ -0,0 +1,13 @@
+export interface GoogleIds {
+    ga_client_id?: string | undefined;
+    ga_session_id?: string | undefined;
+    gbraid?: string | undefined;
+    gclid?: string | undefined;
+    wbraid?: string | undefined;
+}
+/**
+ * GA4 client and session IDs from `_ga` / `_ga_<ID>`, and Google Ads click IDs
+ * from `_gcl_aw` falling back to `url`'s `gclid`, `gbraid` and `wbraid`.
+ */
+export declare function getGoogleIds(url: string, measurementId?: string): GoogleIds;
+//# sourceMappingURL=google-ids.d.ts.map

package/dist/google-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-ids.d.ts","sourceRoot":"","sources":["../src/google-ids.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,SAAS;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAgB3E"}

package/dist/google-ids.js

@@ -0,0 +1,29 @@
+import CookieLib from 'universal-cookie';
+// Runtime default export is the class.
+const cookies = new CookieLib();
+/**
+ * GA4 client and session IDs from `_ga` / `_ga_<ID>`, and Google Ads click IDs
+ * from `_gcl_aw` falling back to `url`'s `gclid`, `gbraid` and `wbraid`.
+ */
+export function getGoogleIds(url, measurementId) {
+    const params = searchParams(url);
+    const cookie = (name) => cookies.get(name, { doNotParse: true });
+    const param = (name) => params?.get(name)?.match(/^.+$/)?.[0];
+    return {
+        ga_client_id: cookie('_ga')?.match(/^GA\d\.\d+\.(.+)$/)?.[1],
+        ga_session_id: measurementId
+            ? cookie(`_ga_${measurementId.replace(/^G-/, '')}`)?.match(/^GS\d\.\d+\.s?(\d+)/)?.[1]
+            : undefined,
+        gbraid: param('gbraid'),
+        gclid: cookie('_gcl_aw')?.match(/^GCL\.\d+\.(.+)$/)?.[1] ?? param('gclid'),
+        wbraid: param('wbraid'),
+    };
+}
+function searchParams(url) {
+    try {
+        return new URL(url).searchParams;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/meta-pixel.d.ts

@@ -0,0 +1,7 @@
+export interface MetaPixelIds {
+    fbc?: string;
+    fbp?: string;
+}
+/** Meta Pixel `_fbp` / `_fbc` cookies, with `_fbc` falling back to `url`'s `fbclid`. */
+export declare function getMetaPixelIds(url: string): MetaPixelIds;
+//# sourceMappingURL=meta-pixel.d.ts.map

package/dist/meta-pixel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta-pixel.d.ts","sourceRoot":"","sources":["../src/meta-pixel.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,YAAY;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wFAAwF;AACxF,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAQzD"}

package/dist/meta-pixel.js

@@ -0,0 +1,23 @@
+import CookieLib from 'universal-cookie';
+// Runtime default export is the class.
+const cookies = new CookieLib();
+/** Meta Pixel `_fbp` / `_fbc` cookies, with `_fbc` falling back to `url`'s `fbclid`. */
+export function getMetaPixelIds(url) {
+    const fbp = cookies.get('_fbp', { doNotParse: true });
+    const fbc = cookies.get('_fbc', { doNotParse: true }) ?? fbcFromUrl(url);
+    return {
+        ...(fbc === undefined ? {} : { fbc }),
+        ...(fbp === undefined ? {} : { fbp }),
+    };
+}
+function fbcFromUrl(url) {
+    let fbclid;
+    try {
+        fbclid = new URL(url).searchParams.get('fbclid');
+    }
+    catch {
+        return undefined;
+    }
+    // Meta specifies subdomain index 1 for an `_fbc` built outside the Pixel.
+    return fbclid ? `fb.1.${String(Date.now())}.${fbclid}` : undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wapitee/typhoonx-hydrogen",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "TyphoonX Hydrogen Analytics subscriber",
   "keywords": [
     "typhoonx",
@@ -10,14 +10,14 @@
     "react",
     "storefront"
   ],
-  "homepage": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/tree/main/packages/typhoonx-hydrogen",
+  "homepage": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/tree/main/packages/hydrogen",
   "bugs": {
     "url": "https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js/issues"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Wapitee-Interactive-Marketing-Limited/typhoonx-js.git",
-    "directory": "packages/typhoonx-hydrogen"
+    "directory": "packages/hydrogen"
   },
   "license": "MIT",
   "author": "jay@wapitee.io",