fix: add click tracking + random number (#1758)

jumperexchange · Feb 12, 2025 · d29f7b1 · d29f7b1
1 parent dfec539
commit d29f7b1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 3 deletions.
diff --git a/src/components/FeatureCards/FeatureCard.tsx b/src/components/FeatureCards/FeatureCard.tsx
@@ -68,6 +68,17 @@ export const FeatureCard = ({ data }: FeatureCardProps) => {
     theme.palette.white.main,
   ]);
 
+  useEffect(() => {
+    if (isSpindlTrackData(data.attributes)) {
+      trackSpindl(
+        'impression',
+        data.attributes.spindlData.impression_id,
+        data.attributes.spindlData.ad_creative_id,
+      );
+    }
+    // allow spindl data to be tracked once
+  }, [data.attributes]);
+
   useEffect(() => {
     if (!eventFired.current && open) {
       trackEvent({
@@ -121,6 +132,7 @@ export const FeatureCard = ({ data }: FeatureCardProps) => {
       return;
     }
     trackSpindl(
+      'click',
       attributes.spindlData.impression_id,
       attributes.spindlData.ad_creative_id,
     );

diff --git a/src/hooks/feature-cards/spindl/trackSpindl.ts b/src/hooks/feature-cards/spindl/trackSpindl.ts
@@ -11,13 +11,14 @@ interface ImpressionPayload {
 const SPINDLE_TRACKING_PATH = '/external/track';
 
 export async function trackSpindl(
+  type: string,
   impressionId: string,
   adCreativeId: string,
 ): Promise<void> {
   const spindlConfig = getSpindlConfig();
 
   const payload: ImpressionPayload = {
-    type: 'impression',
+    type,
     placement_id: 'notify_message',
     impression_id: impressionId,
     ad_creative_id: adCreativeId,

diff --git a/src/hooks/feature-cards/spindl/useSpindlCards.ts b/src/hooks/feature-cards/spindl/useSpindlCards.ts
@@ -25,12 +25,20 @@ export const useSpindlCards = () => {
   const spindlConfig = getSpindlConfig();
   const { fetchData } = useCallRequest();
 
+  // Feature Flag logic: Show Spindl for ~25% of users
+  const showSpindle = Math.random() < 0.25;
+
   const fetchSpindlData = useCallback(
     async ({ country, chainId, tokenAddress, address }: SpindlFetchParams) => {
+      if (!showSpindle) {
+        // console.log('User is not part of the Spindl A/B test group.');
+        return; // Exit early if the user is not in the A/B test group
+      }
+
       const locale = getLocale().split('-');
       const queryParams: Record<string, string | undefined> = {
         placement_id: 'notify_message',
-        limit: '1',
+        limit: '3',
         address,
         country: country || locale[1],
         chain_id: chainId?.toString(),
@@ -57,7 +65,13 @@ export const useSpindlCards = () => {
         console.error('Error fetching Spindl data:', error);
       }
     },
-    [fetchData, processSpindlData, spindlConfig.apiUrl, spindlConfig.headers],
+    [
+      fetchData,
+      processSpindlData,
+      spindlConfig.apiUrl,
+      spindlConfig.headers,
+      showSpindle,
+    ],
   );
 
   useEffect(() => {