@driveflux/web-analytics 1.0.2

package/dist/track.js

@@ -0,0 +1,445 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+import { sendGTMEvent } from '@next/third-parties/google';
+import isEqual from 'lodash/isEqual';
+import { useRouter } from 'next/router';
+import { useCallback, useEffect, useRef } from 'react';
+var eventsQueue = new Set();
+var drainEvents = function() {
+    var events = _to_consumable_array(eventsQueue);
+    eventsQueue.clear();
+    events.forEach(function(event) {
+        sendGTMEvent(event);
+    });
+};
+export function getGA4ClientId() {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    var cookies = document.cookie.split(';');
+    var gaCookie = cookies.find(function(cookie) {
+        return cookie.trim().startsWith('_ga=');
+    });
+    if (gaCookie) {
+        var matches = gaCookie.split('.');
+        if (matches.length > 2) {
+            return "".concat(matches[2], ".").concat(matches[3]) // Returns the GA4 client ID
+            ;
+        }
+    }
+    return null // If no GA cookie is found or format is unexpected
+    ;
+}
+function hashData(input) {
+    return _hashData.apply(this, arguments);
+}
+function _hashData() {
+    _hashData = _async_to_generator(function(input) {
+        var encoder, data, hashBuffer, hashArray, hashHex;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    encoder = new TextEncoder();
+                    data = encoder.encode(input);
+                    return [
+                        4,
+                        crypto.subtle.digest('SHA-256', data)
+                    ];
+                case 1:
+                    hashBuffer = _state.sent();
+                    hashArray = Array.from(new Uint8Array(hashBuffer)) // Convert buffer to byte array
+                    ;
+                    hashHex = hashArray.map(function(b) {
+                        return b.toString(16).padStart(2, '0');
+                    }).join('') // Convert bytes to hex string
+                    ;
+                    return [
+                        2,
+                        hashHex
+                    ];
+            }
+        });
+    });
+    return _hashData.apply(this, arguments);
+}
+var convertUserData = function() {
+    var _ref = _async_to_generator(function(dataInput) {
+        var _dataInput_addresses, _dataInput_addresses1, userAddress, _tmp, _tmp1, _tmp2, _tmp3, _tmp4, _tmp5;
+        return _ts_generator(this, function(_state) {
+            switch(_state.label){
+                case 0:
+                    userAddress = ((_dataInput_addresses = dataInput.addresses) === null || _dataInput_addresses === void 0 ? void 0 : _dataInput_addresses.home) || ((_dataInput_addresses1 = dataInput.addresses) === null || _dataInput_addresses1 === void 0 ? void 0 : _dataInput_addresses1.billing);
+                    _tmp = {
+                        user_id: dataInput.id
+                    };
+                    return [
+                        4,
+                        hashData(dataInput.email)
+                    ];
+                case 1:
+                    _tmp.email = _state.sent();
+                    if (!dataInput.phoneNumber) return [
+                        3,
+                        3
+                    ];
+                    return [
+                        4,
+                        hashData(dataInput.phoneNumber)
+                    ];
+                case 2:
+                    _tmp1 = _state.sent();
+                    return [
+                        3,
+                        4
+                    ];
+                case 3:
+                    _tmp1 = undefined;
+                    _state.label = 4;
+                case 4:
+                    _tmp.phone_number = _tmp1;
+                    if (!userAddress) return [
+                        3,
+                        11
+                    ];
+                    _tmp3 = {};
+                    if (!dataInput.firstName) return [
+                        3,
+                        6
+                    ];
+                    return [
+                        4,
+                        hashData(dataInput.firstName)
+                    ];
+                case 5:
+                    _tmp4 = _state.sent();
+                    return [
+                        3,
+                        7
+                    ];
+                case 6:
+                    _tmp4 = undefined;
+                    _state.label = 7;
+                case 7:
+                    _tmp3.first_name = _tmp4;
+                    if (!dataInput.lastName) return [
+                        3,
+                        9
+                    ];
+                    return [
+                        4,
+                        hashData(dataInput.lastName)
+                    ];
+                case 8:
+                    _tmp5 = _state.sent();
+                    return [
+                        3,
+                        10
+                    ];
+                case 9:
+                    _tmp5 = undefined;
+                    _state.label = 10;
+                case 10:
+                    _tmp2 = (_tmp3.last_name = _tmp5, _tmp3.street = [
+                        userAddress.street1,
+                        userAddress.street2
+                    ].join(', '), _tmp3.city = userAddress.city, _tmp3.region = userAddress.state, _tmp3.postal_code = userAddress.postalCode, _tmp3.country = userAddress.country, _tmp3);
+                    return [
+                        3,
+                        12
+                    ];
+                case 11:
+                    _tmp2 = undefined;
+                    _state.label = 12;
+                case 12:
+                    return [
+                        2,
+                        (_tmp.address = _tmp2, _tmp)
+                    ];
+            }
+        });
+    });
+    return function convertUserData(dataInput) {
+        return _ref.apply(this, arguments);
+    };
+}();
+export var useTrackEvent = function() {
+    var userData = useRef();
+    var track = useCallback(function(eventName, eventData) {
+        console.log('🚨🚨🚨 firing event', eventName, eventData);
+        if (!eventName) {
+            console.error('No event name provided');
+            return;
+        }
+        var event = _object_spread({
+            event: eventName
+        }, userData.current ? {
+            user_data: userData.current
+        } : {}, eventData);
+        if (!window.fluxDataLayer) {
+            eventsQueue.add(event);
+            return;
+        }
+        sendGTMEvent(event);
+    }, []);
+    var setUserData = useCallback(function() {
+        var _ref = _async_to_generator(function(dataInput) {
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        return [
+                            4,
+                            convertUserData(dataInput)
+                        ];
+                    case 1:
+                        userData.current = _state.sent();
+                        localStorage.setItem('ud', Buffer.from(JSON.stringify(userData.current), 'utf8').toString('base64'));
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function(dataInput) {
+            return _ref.apply(this, arguments);
+        };
+    }(), []);
+    useEffect(function() {
+        var interval = setInterval(function() {
+            if (window.fluxDataLayer) {
+                drainEvents();
+                clearInterval(interval);
+            }
+        }, 100);
+        return function() {
+            return clearInterval(interval);
+        };
+    }, []);
+    useEffect(function() {
+        var ud = localStorage.getItem('ud');
+        if (!ud) {
+            return;
+        }
+        try {
+            var json = Buffer.from(ud, 'base64').toString('utf8');
+            userData.current = JSON.parse(json);
+        } catch (e) {}
+    }, []);
+    return {
+        track: track,
+        setUserData: setUserData
+    };
+};
+export var useAutoTrackEvent = function(eventName, eventData) {
+    var router = useRouter();
+    var canFireEvents = router.isReady;
+    var previousEventData = useRef();
+    var firedFirstEvent = useRef(false);
+    useEffect(function() {
+        var interval = setInterval(function() {
+            if (window.fluxDataLayer) {
+                drainEvents();
+                clearInterval(interval);
+            }
+        }, 100);
+        return function() {
+            return clearInterval(interval);
+        };
+    }, []);
+    useEffect(function() {
+        if (!canFireEvents) {
+            return;
+        }
+        if (isEqual(previousEventData.current, eventData) && firedFirstEvent.current) {
+            return;
+        }
+        firedFirstEvent.current = true;
+        console.log('🚨🚨🚨 firing event', eventName, eventData);
+        var event = _object_spread({
+            event: eventName
+        }, eventData);
+        if (!window.fluxDataLayer) {
+            eventsQueue.add(event);
+            return;
+        }
+        sendGTMEvent(event);
+        previousEventData.current = eventData;
+    }, [
+        canFireEvents,
+        eventData
+    ]);
+};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@driveflux/web-analytics",
+  "version": "1.0.2",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./track": {
+      "import": "./dist/track.js",
+      "require": "./dist/cjs/track.js",
+      "types": "./dist/track.d.ts"
+    }
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@driveflux/eslint-config": "1.0.7",
+    "@driveflux/fab": "1.0.8",
+    "@driveflux/tsconfig": "1.0.2",
+    "@next/third-parties": "^14.2.3",
+    "@swc/cli": "^0.3.12",
+    "@swc/core": "1.6.3",
+    "@types/lodash": "^4.17.5",
+    "@types/node": "^20.14.5",
+    "del-cli": "^5.1.0",
+    "eslint": "9.5.0",
+    "next": "14.2.4",
+    "typescript": "^5.4.5"
+  },
+  "scripts": {
+    "build": "fab",
+    "clean": "fab clean",
+    "types": "tsc --noEmit",
+    "lint": "eslint \"src/**/*.ts\""
+  }
+}

package/src/track.ts

@@ -0,0 +1,209 @@
+import { sendGTMEvent } from '@next/third-parties/google'
+import isEqual from 'lodash/isEqual'
+import { useRouter } from 'next/router'
+import { useCallback, useEffect, useRef } from 'react'
+
+declare global {
+  interface Window {
+      fluxDataLayer?: Object[];
+  }
+}
+
+interface Address {
+  name?: string | null
+  street1: string
+  street2?: string | null
+  city: string
+  state: string
+  country: string
+  postalCode: string
+}
+
+interface UserLikeData {
+  id: string
+  email: string
+  phoneNumber?: string | null
+  firstName?: string | null
+  lastName?: string | null
+  addresses?: {
+    home?: Address | null
+    billing?: Address | null
+  } | null
+}
+
+interface TrackingUserData {
+  user_id: string
+  email: string
+  phone_number?: string
+  address?: {
+    first_name?: string
+    last_name?: string
+    street?: string
+    city?: string
+    region?: string
+    postal_code?: string
+    country?: string
+  }
+}
+
+const eventsQueue = new Set<Record<string, any>>()
+
+const drainEvents = () => {
+  const events = [...eventsQueue]
+  eventsQueue.clear()
+  events.forEach((event) => {
+    sendGTMEvent(event)
+  })
+}
+
+export function getGA4ClientId() {
+  if (typeof document === 'undefined') {
+    return null
+  }
+
+  const cookies = document.cookie.split(';')
+  const gaCookie = cookies.find((cookie) => cookie.trim().startsWith('_ga='))
+  if (gaCookie) {
+    const matches = gaCookie.split('.')
+    if (matches.length > 2) {
+      return `${matches[2]}.${matches[3]}` // Returns the GA4 client ID
+    }
+  }
+  return null // If no GA cookie is found or format is unexpected
+}
+
+async function hashData(input: string) {
+  const encoder = new TextEncoder()
+  const data = encoder.encode(input)
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+  const hashArray = Array.from(new Uint8Array(hashBuffer)) // Convert buffer to byte array
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('') // Convert bytes to hex string
+  return hashHex
+}
+
+const convertUserData = async (dataInput: UserLikeData): Promise<TrackingUserData> => {
+  const userAddress = dataInput.addresses?.home || dataInput.addresses?.billing
+  return {
+    user_id: dataInput.id,
+    email: await hashData(dataInput.email),
+    phone_number: dataInput.phoneNumber ? await hashData(dataInput.phoneNumber) : undefined,
+    address: userAddress
+      ? {
+          first_name: dataInput.firstName ? await hashData(dataInput.firstName) : undefined,
+          last_name: dataInput.lastName ? await hashData(dataInput.lastName) : undefined,
+          street: [userAddress.street1, userAddress.street2].join(', '),
+          city: userAddress.city,
+          region: userAddress.state,
+          postal_code: userAddress.postalCode,
+          country: userAddress.country
+        }
+      : undefined
+  }
+}
+
+export const useTrackEvent = () => {
+  const userData = useRef<TrackingUserData>()
+
+  const track = useCallback((eventName: string, eventData?: Record<string, any>) => {
+    console.log('🚨🚨🚨 firing event', eventName, eventData)
+
+    if (!eventName) {
+      console.error('No event name provided')
+      return
+    }
+
+    const event = {
+      event: eventName,
+      ...(userData.current
+        ? {
+            user_data: userData.current
+          }
+        : {}),
+      ...eventData
+    }
+
+    if(!window.fluxDataLayer) {
+      eventsQueue.add(event)
+      return
+    }
+    
+
+    sendGTMEvent(event)
+  }, [])
+
+  const setUserData = useCallback(async (dataInput: UserLikeData) => {
+    userData.current = await convertUserData(dataInput)
+    localStorage.setItem('ud', Buffer.from(JSON.stringify(userData.current), 'utf8').toString('base64'))
+  }, [])
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (window.fluxDataLayer) {
+        drainEvents()
+        clearInterval(interval)
+      }
+    }, 100)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  useEffect(() => {
+    const ud = localStorage.getItem('ud')
+    if (!ud) {
+      return
+    }
+    try {
+      const json = Buffer.from(ud, 'base64').toString('utf8')
+      userData.current = JSON.parse(json)
+    } catch (e) {}
+  }, [])
+
+  return {
+    track,
+    setUserData
+  }
+}
+
+export const useAutoTrackEvent = (eventName: string, eventData?: Record<string, any>) => {
+  const router = useRouter()
+  const canFireEvents = router.isReady
+  const previousEventData = useRef<Record<string, any> | undefined>()
+  const firedFirstEvent = useRef(false)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (window.fluxDataLayer) {
+        drainEvents()
+        clearInterval(interval)
+      }
+    }, 100)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  useEffect(() => {
+    if (!canFireEvents) {
+      return
+    }
+
+    if (isEqual(previousEventData.current, eventData) && firedFirstEvent.current) {
+      return
+    }
+
+    firedFirstEvent.current = true
+    console.log('🚨🚨🚨 firing event', eventName, eventData)
+    const event = {
+      event: eventName,
+      ...eventData
+    }
+
+    if(!window.fluxDataLayer) {
+      eventsQueue.add(event)
+      return
+    }
+    
+    sendGTMEvent(event)
+
+    previousEventData.current = eventData
+  }, [canFireEvents, eventData])
+}

package/track.cjs

@@ -0,0 +1 @@
+module.exports = require('./dist/cjs/track.js')

package/track.d.ts

@@ -0,0 +1 @@
+export * from './dist/track'

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@driveflux/tsconfig/frontend.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "./dist"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}