@thealteroffice/react-native-adgeist 0.0.15 → 0.0.17

package/src/components/BannerAd.tsx

@@ -3,7 +3,7 @@
  * @description A React Native component for displaying banner and video ads with robust error handling and analytics.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useRef } from 'react';
 import {
   Image,
   Linking,
@@ -12,10 +12,12 @@ import {
   View,
   TouchableWithoutFeedback,
   ActivityIndicator,
+  Dimensions,
 } from 'react-native';
 import Video from 'react-native-video';
 import Adgeist from '../NativeAdgeist';
 import { useAdgeistContext } from './AdgeistProvider';
+import { normalizeUrl } from '../utilities';
 
 /**
  * Interface for ad data structure
@@ -84,22 +86,36 @@ export const BannerAd: React.FC<AdBannerProps> = ({
   width = 0,
   height = 0,
   isResponsive = false,
-  // responsiveType = 'SQUARE',
   onAdLoadError,
   onAdLoadSuccess,
 }) => {
   const [adData, setAdData] = useState<AdData | null>(null);
-  const [isMuted, setIsMuted] = useState<boolean>(false);
+  const [isMuted, setIsMuted] = useState<boolean>(true);
   const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [hasImpression, setHasImpression] = useState<boolean>(false);
+  const [hasView, setHasView] = useState<boolean>(false);
+  const renderStartTime = useRef(Date.now());
+  const adRef = useRef<View>(null);
+  const visibilityStartTime = useRef<number | null>(null);
+  const timeToVisible = useRef<number | null>(null);
+  const viewTime = useRef<number>(0);
+  const lastCheckTime = useRef<number>(Date.now());
+  const currentVisibilityRatio = useRef<number>(0);
+  const videoRef = useRef<any>(null);
+  const lastPausedTime = useRef<number>(0);
+  const isInView = useRef<boolean>(false);
 
   const { isInitialized, publisherId, apiKey, domain, isTestEnvironment } =
     useAdgeistContext();
 
   const creativeData = adData?.seatBid?.[0]?.bid?.[0]?.ext as BidExtension;
+  const bidId = adData?.id;
+  const campaignId = adData?.seatBid?.[0]?.bid?.[0]?.id;
+  const adSpaceId = dataAdSlot;
 
   /**
-   * Fetches ad creative and sends impression analytics
+   * Fetches ad creative data (without tracking impression here)
    */
   const fetchAd = useCallback(async () => {
     if (!isInitialized) return;
@@ -107,6 +123,8 @@ export const BannerAd: React.FC<AdBannerProps> = ({
     try {
       setIsLoading(true);
       setError(null);
+      setHasImpression(false);
+      setHasView(false);
 
       const response = await Adgeist.fetchCreative(
         apiKey,
@@ -119,24 +137,12 @@ export const BannerAd: React.FC<AdBannerProps> = ({
       const creative: { data: AdData } = response as { data: AdData };
       setAdData(creative.data);
       onAdLoadSuccess?.(creative.data);
-
-      if (creative.data.seatBid.length > 0) {
-        await Adgeist.sendCreativeAnalytic(
-          creative.data.seatBid?.[0]?.bid?.[0]?.id || '',
-          dataAdSlot,
-          publisherId,
-          'IMPRESSION',
-          domain,
-          apiKey,
-          creative.data.id,
-          isTestEnvironment
-        );
-      }
     } catch (err) {
       const error = err instanceof Error ? err : new Error('Ad load failed');
       setError(error);
+      setHasImpression(false);
+      setHasView(false);
       onAdLoadError?.(error);
-      console.error('Ad load failed:', error);
     } finally {
       setIsLoading(false);
     }
@@ -152,43 +158,188 @@ export const BannerAd: React.FC<AdBannerProps> = ({
   ]);
 
   /**
-   * Handles ad click and sends click analytics
+   * Tracks impression when media (image/video) is fully loaded
    */
-  const handleClick = useCallback(async () => {
-    if (adData && adData.seatBid.length > 0) {
-      const bidId = adData.seatBid[0]?.bid[0]?.id;
-      if (!bidId) return;
+  const trackImpressionOnMediaLoad = useCallback(async () => {
+    if (hasImpression || !bidId || !campaignId) return;
 
-      try {
-        await Adgeist.sendCreativeAnalytic(
-          bidId,
-          dataAdSlot,
+    try {
+      const renderTime = Date.now() - renderStartTime.current;
+
+      await Adgeist.trackImpression(
+        campaignId,
+        adSpaceId,
+        publisherId,
+        apiKey,
+        bidId,
+        isTestEnvironment,
+        renderTime
+      );
+
+      setHasImpression(true);
+    } catch (err) {
+      console.error('Failed to track impression:', err);
+    }
+  }, [
+    hasImpression,
+    bidId,
+    campaignId,
+    adSpaceId,
+    publisherId,
+    apiKey,
+    isTestEnvironment,
+  ]);
+
+  /**
+   * Tracks view event for banner ads when visible for >=1s and >=50% in viewport
+   */
+  const trackView = useCallback(async () => {
+    if (hasView || !hasImpression || !bidId || !campaignId) return;
+
+    try {
+      const currentViewTime = viewTime.current;
+      const currentTimeToVisible = timeToVisible.current || 0;
+      const visibility = currentVisibilityRatio.current;
+
+      if (
+        currentViewTime >= (dataSlotType === 'video' ? 2000 : 1000) &&
+        visibility >= 0.5 &&
+        timeToVisible.current !== null
+      ) {
+        await Adgeist.trackView(
+          campaignId,
+          adSpaceId,
           publisherId,
-          'CLICK',
-          domain,
           apiKey,
-          adData.id,
-          isTestEnvironment
+          bidId,
+          isTestEnvironment,
+          currentViewTime,
+          visibility,
+          0,
+          currentTimeToVisible
         );
-        await Linking.openURL(creativeData.ctaUrl);
-      } catch (err) {
-        console.error('Failed to handle ad click:', err);
+
+        setHasView(true);
+      }
+    } catch (err) {
+      console.error('Failed to track view:', err);
+    }
+  }, [
+    hasView,
+    hasImpression,
+    bidId,
+    campaignId,
+    adSpaceId,
+    publisherId,
+    apiKey,
+    isTestEnvironment,
+    dataSlotType,
+  ]);
+
+  /**
+   * Calculates visibility ratio and updates view metrics
+   */
+  const checkVisibility = useCallback(() => {
+    if (!adRef.current || !hasImpression) return;
+
+    adRef.current.measure((_x, _y, _width, height, _pageX, pageY) => {
+      const window = Dimensions.get('window');
+      const windowHeight = window.height;
+
+      const adTop = pageY;
+      const adBottom = pageY + height;
+      const windowTop = 0;
+      const windowBottom = windowHeight;
+
+      const visibleTop = Math.max(adTop, windowTop);
+      const visibleBottom = Math.min(adBottom, windowBottom);
+      const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+      const visibilityRatio = height > 0 ? visibleHeight / height : 0;
+      currentVisibilityRatio.current = visibilityRatio;
+
+      const currentTime = Date.now();
+      const deltaTime = currentTime - lastCheckTime.current;
+      lastCheckTime.current = currentTime;
+
+      if (visibilityRatio >= 0.5 && timeToVisible.current === null) {
+        timeToVisible.current = currentTime - renderStartTime.current;
+      }
+
+      if (visibilityRatio >= 0.5) {
+        viewTime.current += deltaTime;
+        if (!visibilityStartTime.current) {
+          visibilityStartTime.current = currentTime;
+        }
+      } else {
+        visibilityStartTime.current = null;
+      }
+
+      if (
+        viewTime.current >= (dataSlotType === 'video' ? 2000 : 1000) &&
+        visibilityRatio >= 0.5
+      ) {
+        trackView();
       }
+
+      if (dataSlotType === 'video' && videoRef.current) {
+        if (visibilityRatio >= 0.5) {
+          isInView.current = true;
+          videoRef.current.seek(lastPausedTime.current || 0);
+        } else {
+          isInView.current = false;
+          lastPausedTime.current = videoRef.current.currentTime || 0;
+        }
+      }
+    });
+  }, [hasImpression, trackView, dataSlotType]);
+
+  /**
+   * Handles ad click and sends click analytics
+   */
+  const handleClick = useCallback(async () => {
+    if (!adData || !adData.seatBid.length || !bidId || !campaignId) return;
+
+    try {
+      Adgeist.trackClick(
+        campaignId,
+        adSpaceId,
+        publisherId,
+        apiKey,
+        bidId,
+        isTestEnvironment
+      );
+
+      await Linking.openURL(normalizeUrl(creativeData.ctaUrl));
+    } catch (err) {
+      console.error('Failed to handle ad click:', err);
     }
   }, [
     adData,
-    dataAdSlot,
+    bidId,
+    campaignId,
+    adSpaceId,
     publisherId,
-    domain,
     apiKey,
     isTestEnvironment,
     creativeData,
   ]);
 
   useEffect(() => {
+    renderStartTime.current = Date.now();
+    lastCheckTime.current = Date.now();
     fetchAd();
   }, [fetchAd]);
 
+  useEffect(() => {
+    if (!hasImpression || hasView) return;
+
+    const intervalId = setInterval(checkVisibility, 200);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [hasImpression, hasView, checkVisibility]);
+
   if (isLoading) {
     return (
       <View
@@ -211,32 +362,42 @@ export const BannerAd: React.FC<AdBannerProps> = ({
       style={{ width: '100%', height: '100%' }}
     >
       <View
+        ref={adRef}
         style={[
           styles.adContainer,
           !isResponsive && { width: width, height: height },
         ]}
       >
         {dataSlotType === 'banner' ? (
-          <Image
-            style={styles.creative}
-            source={{ uri: creativeData.creativeUrl }}
-            accessibilityLabel="Ad Creative"
-            resizeMode="contain"
-            onError={(e) =>
-              console.error('Image load error:', e.nativeEvent.error)
-            }
-          />
-        ) : (
-          <View style={styles.videoCreative}>
-            <Video
+          <TouchableWithoutFeedback onPress={handleClick}>
+            <Image
+              style={styles.creative}
               source={{ uri: creativeData.creativeUrl }}
+              accessibilityLabel="Ad Creative"
               resizeMode="contain"
-              style={{ width: '100%', height: '100%' }}
-              repeat={true}
-              muted={isMuted}
-              onError={(e) => console.error('Video load error:', e)}
+              onLoad={trackImpressionOnMediaLoad}
+              onError={(e) => {
+                console.error('Image load error:', e.nativeEvent.error);
+                setError(new Error('Failed to load ad image'));
+              }}
             />
-
+          </TouchableWithoutFeedback>
+        ) : (
+          <View style={styles.videoCreative}>
+            <TouchableWithoutFeedback onPress={handleClick}>
+              <Video
+                ref={videoRef}
+                source={{ uri: creativeData.creativeUrl }}
+                resizeMode="contain"
+                style={{ width: '100%', height: '100%' }}
+                repeat={true}
+                muted={isMuted}
+                onLoad={trackImpressionOnMediaLoad}
+                onError={() => {
+                  setError(new Error('Failed to load ad video'));
+                }}
+              />
+            </TouchableWithoutFeedback>
             <TouchableWithoutFeedback onPress={() => setIsMuted(!isMuted)}>
               <Image
                 style={styles.soundIcon}
@@ -256,7 +417,6 @@ export const BannerAd: React.FC<AdBannerProps> = ({
             <Text style={styles.title} numberOfLines={1} ellipsizeMode="tail">
               {creativeData.creativeTitle}
             </Text>
-
             <Text
               style={styles.description}
               numberOfLines={1}
@@ -264,20 +424,19 @@ export const BannerAd: React.FC<AdBannerProps> = ({
             >
               {creativeData.creativeDescription}
             </Text>
-
             <Text
               style={styles.brandName}
               numberOfLines={1}
               ellipsizeMode="tail"
             >
-              {creativeData?.creativeBrandName || 'Brand Name'}
+              {creativeData?.creativeBrandName || 'The Brand Name'}
             </Text>
           </View>
           <TouchableWithoutFeedback onPress={handleClick}>
             <Image
               style={styles.linkButton}
               source={{
-                uri: 'https://d2cfeg6k9cklz9.cloudfront.net/onboarding-icons/Button.png',
+                uri: 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Button.png',
               }}
               accessibilityLabel="Visit Advertiser Site"
             />
@@ -324,31 +483,35 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingVertical: 10,
-    paddingHorizontal: 20,
+    paddingRight: 10,
+    paddingLeft: 20,
     alignItems: 'center',
     borderBottomLeftRadius: 5,
     borderBottomRightRadius: 5,
   },
   contentContainer: {
-    width: '80%',
+    flex: 1,
+    marginRight: 10,
   },
   title: {
     color: '#1A1A1A',
-    fontSize: 18,
+    fontSize: 16,
     fontWeight: '600',
   },
   description: {
     color: '#4A4A4A',
-    fontSize: 16,
+    fontSize: 15,
     marginBottom: 4,
   },
   brandName: {
     color: '#6B7280',
     fontSize: 14,
-    textTransform: 'uppercase',
+    textTransform: 'capitalize',
+    opacity: 0.8,
   },
   linkButton: {
-    width: 40,
+    width: 80,
     height: 40,
+    objectFit: 'contain',
   },
 });

package/src/utilities.ts

@@ -0,0 +1,13 @@
+/**
+ * Normalizes a URL to ensure it has a valid protocol
+ */
+export const normalizeUrl = (url: string) => {
+  if (!url) return url;
+  if (url.startsWith('www.')) {
+    return `https://${url}`;
+  }
+  if (!url.match(/^[a-zA-Z]+:\/\//)) {
+    return `https://${url}`;
+  }
+  return url;
+};