npm - medusa-google-analytics-logic - Versions diffs - 1.0.0 - Mend

medusa-google-analytics-logic 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,45 @@
+/**
+ * Meta Conversions API (CAPI) Service
+ */
+export declare interface CAPIEvent {
+    event_name: string;
+    action_source: 'website' | 'app' | 'physical_store' | 'system_generated' | 'other';
+    event_source_url?: string;
+    custom_data?: Record<string, any>;
+    user_data?: Record<string, any>;
+}
+export declare type CookieConsent = 'granted' | 'denied' | null;
+export declare const initGTM: (id: string) => void;
+export declare const pushToDataLayer: (data: Record<string, any>) => void;
+export declare const sendCAPIEvent: (event: string | CAPIEvent, extraData?: Record<string, any>) => Promise<any>;
+export declare const trackEvent: (eventName: string, params?: Record<string, any>) => void;
+export declare const useCookieConsent: () => {
+    consent: CookieConsent;
+    acceptConsent: () => void;
+    rejectConsent: () => void;
+    isFirstVisit: boolean;
+};
+export declare const useTracking: () => {
+    trackLead: (label?: string) => Promise<void>;
+    trackCustomEvent: (event: string | CAPIEvent, extraData?: Record<string, any>) => Promise<void>;
+};
+export { }
+/**
+ * Analytics Service for Google Tag Manager (GTM)
+ */
+declare global {
+    interface Window {
+        dataLayer: any[];
+        gtag?: (...args: any[]) => void;
+    }
+}

package/dist/ui-library.js ADDED Viewed

@@ -0,0 +1,102 @@
+import { useState as g, useEffect as p, useCallback as c } from "react";
+const m = (e) => {
+  if (typeof window > "u") return;
+  window.dataLayer = window.dataLayer || [], window.dataLayer.push({
+    "gtm.start": (/* @__PURE__ */ new Date()).getTime(),
+    event: "gtm.js"
+  });
+  const n = document.getElementsByTagName("script")[0], t = document.createElement("script"), a = "";
+  t.async = !0, t.src = "https://www.googletagmanager.com/gtm.js?id=" + e + a, n.parentNode && n.parentNode.insertBefore(t, n);
+}, y = (e) => {
+  typeof window > "u" || (window.dataLayer = window.dataLayer || [], window.dataLayer.push(e));
+}, d = (e, n) => {
+  y({
+    event: e,
+    ...n
+  });
+}, i = async (e, n) => {
+  var s;
+  if (typeof window > "u") return;
+  const t = (s = document.querySelector('meta[name="csrf-token"]')) == null ? void 0 : s.content, a = typeof e == "string" ? { event: e, ...n } : {
+    event_name: e.event_name,
+    action_source: e.action_source || "website",
+    event_source_url: e.event_source_url || window.location.href,
+    custom_data: e.custom_data,
+    user_data: e.user_data || {},
+    ...n
+  };
+  try {
+    const o = await fetch("/meta/event", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-TOKEN": t || ""
+      },
+      body: JSON.stringify(a)
+    }), w = o.headers.get("content-type") || "";
+    let r;
+    if (w.includes("application/json"))
+      r = await o.json();
+    else {
+      const u = await o.text();
+      try {
+        r = JSON.parse(u);
+      } catch {
+        r = { success: o.ok };
+      }
+    }
+    return console.log("CAPI Event Sent:", r), r;
+  } catch (o) {
+    throw console.error("CAPI Error:", o), o;
+  }
+}, _ = () => {
+  const [e, n] = g(null);
+  p(() => {
+    if (typeof window > "u") return;
+    const o = localStorage.getItem("cookie_consent");
+    n(o);
+  }, []);
+  const t = (o) => {
+    typeof window > "u" || (localStorage.setItem("cookie_consent", o), n(o), o === "granted" ? (typeof window.gtag == "function" && (window.gtag("consent", "update", {
+      ad_storage: "granted",
+      analytics_storage: "granted",
+      ad_user_data: "granted",
+      ad_personalization: "granted"
+    }), window.gtag("event", "page_view")), window.dataLayer = window.dataLayer || [], window.dataLayer.push({
+      event: "cookie_accept"
+    })) : (window.dataLayer = window.dataLayer || [], window.dataLayer.push({
+      event: "cookie_consent_update",
+      ad_storage: "denied",
+      analytics_storage: "denied"
+    })));
+  };
+  return {
+    consent: e,
+    acceptConsent: () => t("granted"),
+    rejectConsent: () => t("denied"),
+    isFirstVisit: e === null
+  };
+}, L = () => {
+  const e = c(async (t) => {
+    d("Lead", { label: t }), await i("Lead", {
+      custom_data: {
+        button_name: t
+      }
+    }), console.log(`Lead tracked with label: ${t}`);
+  }, []), n = c(async (t, a) => {
+    const s = typeof t == "string" ? t : t.event_name;
+    d(s, a), await i(t, a);
+  }, []);
+  return {
+    trackLead: e,
+    trackCustomEvent: n
+  };
+};
+export {
+  m as initGTM,
+  y as pushToDataLayer,
+  i as sendCAPIEvent,
+  d as trackEvent,
+  _ as useCookieConsent,
+  L as useTracking
+};

package/dist/ui-library.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,48 @@
+{
+    "name": "medusa-google-analytics-logic",
+    "version": "1.0.0",
+    "description": "Unified Google Analytics (GTM) and Meta Conversions API (CAPI) tracking for Medusa.js storefronts.",
+    "keywords": [
+        "medusa-plugin",
+        "google-analytics",
+        "gtm",
+        "meta-capi",
+        "tracking"
+    ],
+    "author": "SmartByte Labs",
+    "license": "MIT",
+    "type": "module",
+    "main": "./dist/ui-library.umd.cjs",
+    "module": "./dist/ui-library.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/ui-library.js",
+            "require": "./dist/ui-library.umd.cjs",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "preview": "vite preview"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20.0.0",
+        "@types/react": "^18.0.0 || ^19.0.0",
+        "@types/react-dom": "^18.0.0 || ^19.0.0",
+        "@vitejs/plugin-react": "^4.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.0.0"
+    }
+}

package/readme.md ADDED Viewed

@@ -0,0 +1,92 @@
+# Medusa Google Analytics Logic
+This package provides a unified interface for Google Tag Manager (GTM) and Meta Conversions API (CAPI) tracking.
+## Installation
+```bash
+npm install medusa-google-analytics-logic
+```
+### Local Development
+For local testing, use `npm link` in this directory and then `npm link medusa-google-analytics-logic` in your consumer project.
+## Usage
+### 1. Initialization
+Initialize GTM in your application's entry point (e.g., `main.tsx` or `_app.tsx`):
+```typescript
+import { initGTM } from 'medusa-google-analytics-logic';
+initGTM('GTM-XXXXXXX');
+```
+### 2. Tracking Hook
+Use the `useTracking` hook to track events:
+```typescript
+import { useTracking } from 'medusa-google-analytics-logic';
+const MyComponent = () => {
+    const { trackLead, trackCustomEvent } = useTracking();
+    const handleSignup = async () => {
+        await trackLead('Signup Form');
+    };
+    const handlePurchase = async () => {
+        await trackCustomEvent('Purchase', {
+            value: 99.99,
+            currency: 'USD'
+        });
+    };
+    return (
+        <div>
+            <button onClick={handleSignup}>Track Lead</button>
+            <button onClick={handlePurchase}>Track Purchase</button>
+        </div>
+    );
+};
+```
+### 3. Cookie Consent Hook
+Manage user consent with `useCookieConsent`:
+```typescript
+import { useCookieConsent } from 'medusa-google-analytics-logic';
+const CookieBanner = () => {
+    const { consent, acceptConsent, rejectConsent, isFirstVisit } = useCookieConsent();
+    if (!isFirstVisit) return null;
+    return (
+        <div className="banner">
+            <p>We use cookies for analytics and ads.</p>
+            <button onClick={acceptConsent}>Accept</button>
+            <button onClick={rejectConsent}>Decline</button>
+        </div>
+    );
+};
+```
+### 4. Meta CAPI
+The `useTracking` hook automatically sends events to Meta Conversions API via a `/meta/event` endpoint. Ensure your server handles this endpoint and includes the necessary Meta Pixel ID and Access Token.
+## API Reference
+### Services
+- `initGTM(id: string)`: Initializes Google Tag Manager.
+- `trackEvent(eventName: string, params?: object)`: Pushes a GTM event to the `dataLayer`.
+- `sendCAPIEvent(event: string | CAPIEvent, extraData?: object)`: Sends a request to the CAPI proxy.
+### Hooks
+- `useTracking()`: Returns `trackLead` and `trackCustomEvent`.
+- `useCookieConsent()`: Manages local storage consent and GTM consent mode updates.