@wapitee/typhoonx-hydrogen 0.5.0 → 0.7.0

package/README.md

@@ -48,6 +48,10 @@ const {nonce, header, NonceProvider} = createContentSecurityPolicy({
 | `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`) |
 
+### Meta Pixel
+
+If the storefront runs Meta Pixel, every event also carries its `_fbp` cookie as `fbp` and its `_fbc` cookie as `fbc`. When `_fbc` is not set yet but the page URL has `fbclid`, `fbc` is built as `fb.1.<timestamp>.<fbclid>`. Missing values are omitted.
+
 ## License
 
 [MIT](./LICENSE) © Wapitee Interactive

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;AA2BD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sCAYpD"}
+{"version":3,"file":"TyphoonX.d.ts","sourceRoot":"","sources":["../src/TyphoonX.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqCD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sCAuBpD"}

package/dist/TyphoonX.js

@@ -1,14 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { flattenConnection, parseGid, useAnalytics } from '@shopify/hydrogen';
 import { useEffect, useRef, useState } from 'react';
-import { getOrCreateClientId } from './client-id.js';
+import { getOrCreateClientId, hasClientId } from './client-id.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();
+    const isInsideProvider = subscribe.length > 0;
     const [isClient, setIsClient] = useState(false);
     useEffect(() => {
         setIsClient(true);
     }, []);
-    if (!isClient) {
+    useEffect(() => {
+        if (!isInsideProvider) {
+            console.error('[TyphoonX] <TyphoonX> must be rendered inside <Analytics.Provider>.');
+        }
+    }, [isInsideProvider]);
+    if (!isClient || !isInsideProvider) {
         return null;
     }
     return _jsx(TyphoonXClient, { ...props });
@@ -18,6 +26,17 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
     const { ready } = register('TyphoonX');
     const currentUrlRef = useRef(null);
     const previousUrlRef = useRef(null);
+    useEffect(() => {
+        try {
+            if (!hasClientId()) {
+                window.localStorage.setItem('__typhoon_first_visit_time', new Date().toISOString());
+                window.localStorage.setItem('__typhoon_first_visit_url', window.location.href);
+            }
+        }
+        catch {
+            // Do nothing
+        }
+    }, [hasClientId()]);
     useEffect(() => {
         const clientId = getOrCreateClientId(cookieDomain);
         const referrerFor = (url) => {
@@ -41,6 +60,7 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
             timestamp: new Date().toISOString(),
             user_agent: window.navigator.userAgent,
             ...(currency === undefined ? {} : { currency }),
+            ...getMetaPixelIds(url),
         });
         subscribe('cart_viewed', (data) => {
             const { cart } = data;
@@ -72,10 +92,28 @@ function TyphoonXClient({ cookieDomain, merchantId, shopId }) {
             });
         });
         subscribe('page_viewed', (data) => {
+            const payload = shared(data.url);
             send({
-                ...shared(data.url),
+                ...payload,
                 event: 'page_view',
             });
+            try {
+                const visitTime = window.localStorage.getItem('__typhoon_first_visit_time');
+                const visitUrl = window.localStorage.getItem('__typhoon_first_visit_url');
+                if (!visitTime || !visitUrl)
+                    return;
+                send({
+                    ...payload,
+                    request_page_url: visitUrl,
+                    timestamp: visitTime,
+                    event: 'first_visit',
+                });
+                window.localStorage.removeItem('__typhoon_first_visit_time');
+                window.localStorage.removeItem('__typhoon_first_visit_url');
+            }
+            catch {
+                // Do nothing
+            }
         });
         subscribe('product_added_to_cart', (data) => {
             const { currentLine } = data;
@@ -113,8 +151,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) => {

package/dist/client-id.d.ts

@@ -1,3 +1,5 @@
+/** Whether `__typhoon_client_id` is already set. */
+export declare function hasClientId(): boolean;
 /** Existing `__typhoon_client_id`, or a new UUID cookie on the apex domain. */
 export declare function getOrCreateClientId(cookieDomain?: string): string;
 //# sourceMappingURL=client-id.d.ts.map

package/dist/client-id.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client-id.d.ts","sourceRoot":"","sources":["../src/client-id.ts"],"names":[],"mappings":"AAwBA,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAWjE"}
+{"version":3,"file":"client-id.d.ts","sourceRoot":"","sources":["../src/client-id.ts"],"names":[],"mappings":"AAwBA,oDAAoD;AACpD,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAWjE"}

package/dist/client-id.js

@@ -8,6 +8,10 @@ const cookies = new Cookies(null, {
     sameSite: 'lax',
     maxAge: MAX_AGE,
 });
+/** Whether `__typhoon_client_id` is already set. */
+export function hasClientId() {
+    return cookies.get(COOKIE, { doNotParse: true }) !== undefined;
+}
 /** Existing `__typhoon_client_id`, or a new UUID cookie on the apex domain. */
 export function getOrCreateClientId(cookieDomain) {
     const existing = cookies.get(COOKIE, { doNotParse: true });

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.5.0",
+  "version": "0.7.0",
   "description": "TyphoonX Hydrogen Analytics subscriber",
   "keywords": [
     "typhoonx",