Add useAnalytics hook

Author: devkiran

apps/nextjs/app/discount-banner.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { useAnalytics } from '@dub/analytics/react';
+
+export function DiscountBanner() {
+  const { partner } = useAnalytics();
+
+  console.log({ partner });
+
+  return null;
+}

packages/script/src/base.js

@@ -119,12 +119,40 @@
 
             cookieManager.set(DUB_PARTNER_COOKIE, JSON.stringify(encodedData));
           }
+
+          window.dispatchEvent(new CustomEvent('DubAnalytics:tracked'));
         }
       });
   }
 
+  function getPartnerData() {
+    const partnerData = cookieManager.get(DUB_PARTNER_COOKIE);
+
+    if (!partnerData) {
+      return null;
+    }
+
+    try {
+      const parsed = JSON.parse(partnerData);
+
+      if (parsed.partner) {
+        parsed.partner.name = decodeURIComponent(parsed.partner.name);
+        parsed.partner.image = decodeURIComponent(parsed.partner.image);
+      }
+
+      return parsed;
+    } catch (e) {
+      return null;
+    }
+  }
+
   // Initialize tracking
   function init() {
+    if (!window._dubAnalytics.initialized) {
+      window.dispatchEvent(new CustomEvent('DubAnalytics:ready'));
+      window._dubAnalytics.initialized = true;
+    }
+
     const params = new URLSearchParams(location.search);
 
     const shouldSetCookie = () => {
@@ -159,6 +187,8 @@
     p: QUERY_PARAM, // was QUERY_PARAM
     v: QUERY_PARAM_VALUE, // was QUERY_PARAM_VALUE
     n: DOMAINS_CONFIG, // was DOMAINS_CONFIG
+    getPartnerData,
+    initialized: false,
   };
 
   // Initialize

packages/web/src/react.tsx

@@ -1,7 +1,22 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { inject } from './generic';
 import type { AnalyticsProps } from './types';
 
+interface PartnerData {
+  clickId: string;
+  partner: {
+    id: string;
+    name: string;
+    image: string;
+  } | null;
+  discount: {
+    id: string;
+    amount: number;
+    type: string;
+    maxDuration: number;
+  } | null;
+}
+
 /**
  * Injects the Dub Web Analytics script into the page head.
  * @param props - Analytics options.
@@ -26,5 +41,56 @@ function Analytics(props: AnalyticsProps): null {
   return null;
 }
 
-export { Analytics };
-export type { AnalyticsProps };
+/**
+ * Hook to access partner data from Dub Analytics.
+ * @returns Object containing partner data if available.
+ * ```js
+ * import { useAnalytics } from '@dub/analytics/react';
+ *
+ * function MyComponent() {
+ *   const { partner } = useAnalytics();
+ *
+ *   if (partner) {
+ *     return (
+ *       <div>
+ *         <img src={partner.partner.image} alt={partner.partner.name} />
+ *         <h2>{partner.partner.name}</h2>
+ *         {partner.discount && (
+ *           <p>Discount: {partner.discount.amount}%</p>
+ *         )}
+ *       </div>
+ *     );
+ *   }
+ *
+ *   return null;
+ * }
+ * ```
+ */
+function useAnalytics() {
+  const [partner, setPartner] = useState<PartnerData | null>(null);
+
+  useEffect(() => {
+    const handleEvent = () => {
+      const dubAnalytics = (window as any)._dubAnalytics;
+
+      if (dubAnalytics) {
+        setPartner(dubAnalytics.getPartnerData());
+      }
+    };
+
+    window.addEventListener('DubAnalytics:tracked', handleEvent);
+
+    handleEvent();
+
+    return () => {
+      window.removeEventListener('DubAnalytics:tracked', handleEvent);
+    };
+  }, []);
+
+  return {
+    partner,
+  };
+}
+
+export { Analytics, useAnalytics };
+export type { AnalyticsProps, PartnerData };