@thealteroffice/react-native-adgeist 0.0.16 → 0.0.18

package/src/NativeAdgeist.ts

@@ -23,24 +23,76 @@ export interface Spec extends TurboModule {
     isTestEnvironment: boolean
   ): Promise<Object>;
 
-  sendCreativeAnalytic(
+  setUserDetails(user: Object): void;
+
+  logEvent(event: Object): void;
+
+  getConsentStatus(): Promise<boolean>;
+
+  updateConsentStatus(consent: boolean): void;
+
+  trackImpression(
     campaignId: string,
     adSpaceId: string,
     publisherId: string,
-    eventType: string,
-    origin: string,
     apiKey: string,
     bidId: string,
-    isTestEnvironment: boolean
-  ): Promise<Object>;
+    isTestEnvironment: boolean,
+    renderTime: number
+  ): Promise<string>;
 
-  setUserDetails(user: Object): void;
+  trackView(
+    campaignId: string,
+    adSpaceId: string,
+    publisherId: string,
+    apiKey: string,
+    bidId: string,
+    isTestEnvironment: boolean,
+    viewTime: number,
+    visibilityRatio: number,
+    scrollDepth: number,
+    timeToVisible: number
+  ): Promise<string>;
 
-  logEvent(event: Object): void;
+  trackTotalView(
+    campaignId: string,
+    adSpaceId: string,
+    publisherId: string,
+    apiKey: string,
+    bidId: string,
+    isTestEnvironment: boolean,
+    totalViewTime: number,
+    visibilityRatio: number
+  ): Promise<string>;
 
-  getConsentStatus(): Promise<boolean>;
+  trackClick(
+    campaignId: string,
+    adSpaceId: string,
+    publisherId: string,
+    apiKey: string,
+    bidId: string,
+    isTestEnvironment: boolean
+  ): Promise<string>;
 
-  updateConsentStatus(consent: boolean): void;
+  trackVideoPlayback(
+    campaignId: string,
+    adSpaceId: string,
+    publisherId: string,
+    apiKey: string,
+    bidId: string,
+    isTestEnvironment: boolean,
+    totalPlaybackTime: number
+  ): Promise<string>;
+
+  trackVideoQuartile(
+    campaignId: string,
+    adSpaceId: string,
+    publisherId: string,
+    apiKey: string,
+    bidId: string,
+    isTestEnvironment: boolean,
+    quartile: string
+  ): Promise<string>;
 }
 
 export default TurboModuleRegistry.getEnforcing<Spec>('Adgeist');

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,37 @@ 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 [isPaused, setIsPaused] = useState<boolean>(true);
+  const [isManuallyControlled, setIsManuallyControlled] =
+    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 { 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 +124,8 @@ export const BannerAd: React.FC<AdBannerProps> = ({
     try {
       setIsLoading(true);
       setError(null);
+      setHasImpression(false);
+      setHasView(false);
 
       const response = await Adgeist.fetchCreative(
         apiKey,
@@ -119,24 +138,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 +159,204 @@ 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 ads when visible for >=1s (banner) or >=2s (video) 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,
+  ]);
+
+  /**
+   * Toggles play/pause state manually
+   */
+  const togglePlayPause = useCallback(() => {
+    setIsManuallyControlled(true);
+    setIsPaused((prev) => !prev);
+  }, []);
+
+  /**
+   * Calculates visibility ratio, updates view metrics, and controls video playback
+   */
+  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;
+        }
+        if (dataSlotType === 'video' && isPaused && !isManuallyControlled) {
+          setIsPaused(false);
+        }
+      } else {
+        visibilityStartTime.current = null;
+        if (dataSlotType === 'video' && !isPaused) {
+          setIsPaused(true);
+          setIsManuallyControlled(false);
+        }
       }
+
+      // Only check for view tracking if view event hasn't been tracked yet
+      if (
+        !hasView &&
+        viewTime.current >= (dataSlotType === 'video' ? 2000 : 1000) &&
+        visibilityRatio >= 0.5
+      ) {
+        trackView();
+      }
+    });
+  }, [
+    hasImpression,
+    trackView,
+    dataSlotType,
+    isPaused,
+    hasView,
+    isManuallyControlled,
+  ]);
+
+  /**
+   * 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) return;
+
+    if (dataSlotType === 'banner' && hasView) return;
+
+    const intervalId = setInterval(checkVisibility, 200);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [hasImpression, checkVisibility, dataSlotType, hasView]);
+
   if (isLoading) {
     return (
       <View
@@ -211,43 +379,69 @@ 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 onPress={() => setIsMuted(!isMuted)}>
-              <Image
-                style={styles.soundIcon}
-                source={{
-                  uri: isMuted
-                    ? 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Muted.png'
-                    : 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Unmuted.png',
+          </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}
+                paused={isPaused}
+                onLoad={trackImpressionOnMediaLoad}
+                onError={() => {
+                  setError(new Error('Failed to load ad video'));
                 }}
-                accessibilityLabel={isMuted ? 'Unmute video' : 'Mute video'}
               />
             </TouchableWithoutFeedback>
+            <View style={styles.videoControls}>
+              <TouchableWithoutFeedback onPress={togglePlayPause}>
+                <Image
+                  style={styles.playPauseIcon}
+                  source={{
+                    uri: isPaused
+                      ? 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Play.png'
+                      : 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Pause.png',
+                  }}
+                  accessibilityLabel={
+                    isPaused ? 'Paused video' : 'Playing video'
+                  }
+                />
+              </TouchableWithoutFeedback>
+              <TouchableWithoutFeedback onPress={() => setIsMuted(!isMuted)}>
+                <Image
+                  style={styles.soundIcon}
+                  source={{
+                    uri: isMuted
+                      ? 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Muted.png'
+                      : 'https://d2cfeg6k9cklz9.cloudfront.net/ad-icons/Unmuted.png',
+                  }}
+                  accessibilityLabel={isMuted ? 'Unmute video' : 'Mute video'}
+                />
+              </TouchableWithoutFeedback>
+            </View>
           </View>
         )}
 
@@ -256,7 +450,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 +457,21 @@ export const BannerAd: React.FC<AdBannerProps> = ({
             >
               {creativeData.creativeDescription}
             </Text>
-
-            <Text
-              style={styles.brandName}
-              numberOfLines={1}
-              ellipsizeMode="tail"
-            >
-              {creativeData?.creativeBrandName || 'Brand Name'}
-            </Text>
+            {creativeData?.creativeBrandName && (
+              <Text
+                style={styles.brandName}
+                numberOfLines={1}
+                ellipsizeMode="tail"
+              >
+                {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"
             />
@@ -310,6 +504,14 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '70%',
   },
+  videoControls: {},
+  playPauseIcon: {
+    position: 'absolute',
+    bottom: 8,
+    left: 10,
+    width: 30,
+    height: 30,
+  },
   soundIcon: {
     position: 'absolute',
     bottom: 10,
@@ -324,31 +526,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;
+};

package/plugin/build/android/withRNAdgeistMainApplication.d.ts

@@ -1,3 +0,0 @@
-import { type ConfigPlugin } from '@expo/config-plugins';
-export declare const withRNAdgeistMainApplication: ConfigPlugin;
-export declare function ktFileUpdater(originalContents: string): string;

package/plugin/build/android/withRNAdgeistMainApplication.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.withRNAdgeistMainApplication = void 0;
-exports.ktFileUpdater = ktFileUpdater;
-const config_plugins_1 = require("@expo/config-plugins");
-const generateCode_1 = require("@expo/config-plugins/build/utils/generateCode");
-const withRNAdgeistMainApplication = (config) => {
-    return (0, config_plugins_1.withAppBuildGradle)((0, config_plugins_1.withMainApplication)(config, readMainApplicationFileAndUpdateContents), readBuildGradleFileAndUpdateContents);
-};
-exports.withRNAdgeistMainApplication = withRNAdgeistMainApplication;
-// 1. MainActivity Modifications
-async function readMainApplicationFileAndUpdateContents(config) {
-    const { modResults: mainApplicationFile } = config;
-    const worker = getCompatibleFileUpdater(mainApplicationFile.language);
-    mainApplicationFile.contents = worker(mainApplicationFile.contents);
-    return config;
-}
-function readBuildGradleFileAndUpdateContents(config) {
-    const { modResults } = config;
-    if (!modResults.contents.includes('implementation "ai.adgeist:adgeistkit:')) {
-        modResults.contents = modResults.contents.replace(/dependencies\s*{/, `dependencies {
-        implementation "ai.adgeist:adgeistkit:0.0.1" // AdgeistKit Dependency`);
-    }
-    return config;
-}
-function getCompatibleFileUpdater(language) {
-    switch (language) {
-        case 'kt':
-            return ktFileUpdater;
-        default:
-            throw new Error(`Cannot add React Native Orientation Director code to MainActivity of language "${language}"`);
-    }
-}
-function ktFileUpdater(originalContents) {
-    // Safer anchor detection
-    const anchors = [
-        /super\.onCreate\(/,
-        /@Override\s+fun onCreate\(/,
-        /class \w+ : ReactActivity/,
-    ].find((anchor) => anchor.test(originalContents));
-    if (!anchors) {
-        throw new Error('Could not find suitable insertion point in MainActivity');
-    }
-    const packageImportCodeBlock = 'import com.adgeist.AdgeistPackage';
-    const rightBeforeClassDeclaration = /import com.facebook.react.ReactPackage/;
-    const importMergeResults = (0, generateCode_1.mergeContents)({
-        tag: '@react-native-adgeist/package-import',
-        src: originalContents,
-        newSrc: packageImportCodeBlock,
-        anchor: rightBeforeClassDeclaration,
-        offset: 0,
-        comment: '// React Native Adgeist',
-    });
-    const onConfigurationChangedCodeBlock = `packages.add(AdgeistPackage())`;
-    const rightBeforeOnReturnStatement = /return packages/;
-    const implementationMergeResults = (0, generateCode_1.mergeContents)({
-        tag: '@react-native-adgeist/package-initialization',
-        src: importMergeResults.contents,
-        newSrc: onConfigurationChangedCodeBlock,
-        anchor: rightBeforeOnReturnStatement,
-        offset: 0,
-        comment: '// Package Initialization',
-    });
-    return implementationMergeResults.contents;
-}

package/plugin/build/index.d.ts

@@ -1,3 +0,0 @@
-import { type ConfigPlugin } from '@expo/config-plugins';
-declare const _default: ConfigPlugin<void>;
-export default _default;