@adtogether/react-native-sdk 0.4.1 → 0.5.6

package/src/AdTogether.ts

@@ -1,4 +1,4 @@
-import { AdModel, AdType, AdTogetherOptions } from './types';
+import { AdModel, AdType, AdTogetherOptions, ViewabilityMetrics } from './types';
 import { NativeModules, Platform } from 'react-native';
 
 export class AdTogether {
@@ -116,23 +116,14 @@ export class AdTogether {
 
     try {
       const sdk = AdTogether.shared;
-      let url = `${sdk.baseUrl}/api/ads/serve?country=global&adUnitId=${adUnitId}&appId=${sdk.appId}`;
-      if (adType) {
-        url += `&adType=${adType}`;
-      }
-      if (sdk.lastAdId) {
-        url += `&exclude=${sdk.lastAdId}`;
-      }
-      if (sdk.bundleId) {
-        url += `&bundleId=${sdk.bundleId}`;
-      }
-      
-      // Pass allowSelfAds (removed platform from fetch URL to match other SDKs)
-      url += `&allowSelfAds=${sdk.allowSelfAds}`;
+      const url = AdTogether.buildServeUrl(sdk, adUnitId, adType);
 
       const response = await fetch(url);
       if (response.ok) {
-        const ad = await response.json();
+        const ad = await response.json() as AdModel;
+        if (adType && ad.adType !== adType) {
+          throw new Error('Received an ad with a different type than requested: ' + (ad.adType ?? 'missing'));
+        }
         sdk.lastAdId = ad.id;
         return ad;
       } else if (response.status === 401 || response.status === 403) {
@@ -146,76 +137,43 @@ export class AdTogether {
     }
   }
 
-  static trackImpression(adId: string, token?: string) {
-    this.trackEvent('/api/ads/impression', adId, token);
-  }
+  private static buildServeUrl(sdk: AdTogether, adUnitId: string, adType?: AdType): string {
+    const url = new URL(sdk.baseUrl);
+    url.pathname = url.pathname.replace(/\/+$/, '') + '/api/ads/serve';
+    url.search = '';
+    url.hash = '';
+
+    url.searchParams.set('adUnitId', adUnitId);
+    url.searchParams.set('appId', sdk.appId ?? '');
+    url.searchParams.set('allowSelfAds', String(sdk.allowSelfAds));
+    url.searchParams.set('platform', Platform.OS);
+    if (adType) {
+      url.searchParams.set('adType', adType);
+    }
+    if (sdk.lastAdId) {
+      url.searchParams.set('exclude', sdk.lastAdId);
+    }
+    if (sdk.bundleId) {
+      url.searchParams.set('bundleId', sdk.bundleId);
+    }
 
-  static trackClick(adId: string, token?: string) {
-    this.trackEvent('/api/ads/click', adId, token);
+    return url.toString();
   }
 
-  /**
-   * Detect country code from the device locale.
-   * Tries expo-localization first, then NativeModules, then Intl API.
-   */
-  private static detectCountry(): string | null {
-    // 1. Try expo-localization
-    try {
-      const ExpoLocalization = require('expo-localization');
-      if (ExpoLocalization?.region) {
-        return ExpoLocalization.region; // e.g. "US"
-      }
-      // expo-localization v3+ uses getLocales()
-      if (ExpoLocalization?.getLocales) {
-        const locales = ExpoLocalization.getLocales();
-        if (locales?.[0]?.regionCode) {
-          return locales[0].regionCode;
-        }
-      }
-    } catch (_) {}
-
-    // 2. Try RN NativeModules (I18nManager or SettingsManager)
-    try {
-      if (Platform.OS === 'ios') {
-        const settings = NativeModules.SettingsManager?.settings;
-        const locale = settings?.AppleLocale || settings?.AppleLanguages?.[0];
-        if (locale) {
-          const parts = locale.replace('_', '-').split('-');
-          if (parts.length >= 2) {
-            const region = parts[parts.length - 1].toUpperCase();
-            if (region.length === 2) return region;
-          }
-        }
-      } else if (Platform.OS === 'android') {
-        const locale = NativeModules.I18nManager?.localeIdentifier;
-        if (locale) {
-          const parts = locale.replace('_', '-').split('-');
-          if (parts.length >= 2) {
-            const region = parts[parts.length - 1].toUpperCase();
-            if (region.length === 2) return region;
-          }
-        }
-      }
-    } catch (_) {}
-
-    // 3. Fallback: Intl API (available in Hermes & JSC)
-    try {
-      if (typeof Intl !== 'undefined' && Intl.DateTimeFormat) {
-        const resolved = Intl.DateTimeFormat().resolvedOptions();
-        if (resolved.locale) {
-          const parts = resolved.locale.split('-');
-          if (parts.length >= 2) {
-            const region = parts[parts.length - 1].toUpperCase();
-            if (region.length === 2) return region;
-          }
-        }
-      }
-    } catch (_) {}
+  static trackImpression(adId: string, token?: string, viewability?: ViewabilityMetrics) {
+    this.trackEvent('/api/ads/impression', adId, token, viewability);
+  }
 
-    return null;
+  static trackClick(adId: string, token?: string) {
+    this.trackEvent('/api/ads/click', adId, token);
   }
 
-  private static trackEvent(endpoint: string, adId: string, token?: string) {
+  private static trackEvent(
+    endpoint: string,
+    adId: string,
+    token?: string,
+    viewability?: ViewabilityMetrics
+  ) {
     if (!AdTogether.shared.assertInitialized()) return;
     
     fetch(`${AdTogether.shared.baseUrl}${endpoint}`, {
@@ -231,7 +189,7 @@ export class AdTogether {
         // Send platform and environment to match Flutter SDK
         platform: Platform.OS,
         environment: __DEV__ ? 'development' : 'production',
-        country: AdTogether.detectCountry(),
+        ...(viewability ? viewability : {}),
       }),
     }).catch(console.error);
   }

package/src/AdTogetherBanner.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Text, Image, TouchableOpacity, StyleSheet, useColorScheme, Linking, Pressable } from 'react-native';
+import { AppState, Dimensions, View, Text, Image, TouchableOpacity, StyleSheet, useColorScheme, Linking, Pressable } from 'react-native';
 import { AdTogether } from './AdTogether';
 import { AdModel } from './types';
 
@@ -32,6 +32,19 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
   const systemColorScheme = useColorScheme();
   
   const impressionTrackedRef = useRef(false);
+  const containerRef = useRef<View>(null);
+  const appStateRef = useRef(AppState.currentState);
+  const [appState, setAppState] = useState(appStateRef.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      // Keep the timer guard current before React renders the state update
+      // and cleans up the interval.
+      appStateRef.current = nextAppState;
+      setAppState(nextAppState);
+    });
+    return () => subscription.remove();
+  }, []);
 
   useEffect(() => {
     let isMounted = true;
@@ -58,13 +71,46 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
     };
   }, [adUnitId, onAdLoaded, onAdFailedToLoad]);
 
-  // Track impression when ad is rendered
+  // Track an impression only after the banner stays at least half visible for one second.
   useEffect(() => {
-    if (adData && !isLoading && !hasError && !impressionTrackedRef.current) {
-      impressionTrackedRef.current = true;
-      AdTogether.trackImpression(adData.id, adData.token);
+    if (!adData || isLoading || hasError || !isVisible || appState !== 'active' || impressionTrackedRef.current) {
+      return;
     }
-  }, [adData, isLoading, hasError]);
+
+    let cancelled = false;
+    let visibleSince: number | null = null;
+    const checkVisibility = () => {
+      containerRef.current?.measureInWindow((x, y, width, height) => {
+        if (cancelled || appStateRef.current !== 'active' || impressionTrackedRef.current) return;
+        const window = Dimensions.get('window');
+        const totalArea = width * height;
+        const visibleWidth = Math.max(0, Math.min(x + width, window.width) - Math.max(x, 0));
+        const visibleHeight = Math.max(0, Math.min(y + height, window.height) - Math.max(y, 0));
+        const visiblePercent = totalArea > 0
+          ? Math.round((visibleWidth * visibleHeight / totalArea) * 100)
+          : 0;
+
+        if (visiblePercent < 50) {
+          visibleSince = null;
+          return;
+        }
+        const now = Date.now();
+        visibleSince ??= now;
+        const visibleDurationMs = now - visibleSince;
+        if (visibleDurationMs >= 1000) {
+          impressionTrackedRef.current = true;
+          AdTogether.trackImpression(adData.id, adData.token, { visiblePercent, visibleDurationMs });
+        }
+      });
+    };
+
+    checkVisibility();
+    const interval = setInterval(checkVisibility, 100);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [adData, appState, hasError, isLoading, isVisible]);
 
   const handlePress = () => {
     if (!adData) return;
@@ -99,15 +145,16 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
   const descColor = isDarkMode ? '#9CA3AF' : '#6B7280';
 
   return (
-    <TouchableOpacity
-      activeOpacity={0.8}
-      onPress={handlePress}
-      style={[
-        styles.container,
-        { backgroundColor: bgColor, borderColor },
-        style,
-      ]}
-    >
+    <View ref={containerRef} collapsable={false}>
+      <TouchableOpacity
+        activeOpacity={0.8}
+        onPress={handlePress}
+        style={[
+          styles.container,
+          { backgroundColor: bgColor, borderColor },
+          style,
+        ]}
+      >
       {adData.imageUrl ? (
         <View style={styles.imageContainer}>
           <Image
@@ -141,7 +188,8 @@ export const AdTogetherBanner: React.FC<AdTogetherBannerProps> = ({
           <Text style={styles.closeButtonText}>×</Text>
         </Pressable>
       )}
-    </TouchableOpacity>
+      </TouchableOpacity>
+    </View>
   );
 };
 

package/src/AdTogetherInterstitial.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Text, Image, TouchableOpacity, StyleSheet, Modal, SafeAreaView, useColorScheme, Linking, useWindowDimensions, ScrollView } from 'react-native';
+import { AppState, View, Text, Image, TouchableOpacity, StyleSheet, Modal, SafeAreaView, useColorScheme, Linking, useWindowDimensions, ScrollView } from 'react-native';
 import { AdTogether } from './AdTogether';
 import { AdModel } from './types';
 
@@ -31,6 +31,18 @@ export const AdTogetherInterstitial: React.FC<AdTogetherInterstitialProps> = ({
   const isLandscape = width > height;
   
   const impressionTrackedRef = useRef(false);
+  const appStateRef = useRef(AppState.currentState);
+  const [appState, setAppState] = useState(appStateRef.current);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (nextAppState) => {
+      // Keep the timer guard current before React renders the state update
+      // and cleans up the timeout.
+      appStateRef.current = nextAppState;
+      setAppState(nextAppState);
+    });
+    return () => subscription.remove();
+  }, []);
 
   useEffect(() => {
     if (!isOpen) return;
@@ -64,24 +76,26 @@ export const AdTogetherInterstitial: React.FC<AdTogetherInterstitialProps> = ({
     };
   }, [adUnitId, isOpen, closeDelay, onAdLoaded, onAdFailedToLoad, onClose]);
 
-  // Track impression and start timer
+  // The modal is full-screen; require one continuous second while the app is active.
   useEffect(() => {
-    if (isOpen && adData && !isLoading && !hasError && !impressionTrackedRef.current) {
-      impressionTrackedRef.current = true;
-      AdTogether.trackImpression(adData.id, adData.token);
-      
-      const timer = setInterval(() => {
-        setTimeLeft((prev) => {
-          if (prev <= 1) {
-            clearInterval(timer);
-            return 0;
-          }
-          return prev - 1;
-        });
-      }, 1000);
-      
-      return () => clearInterval(timer);
+    if (!isOpen || !adData || isLoading || hasError || appState !== 'active' || impressionTrackedRef.current) {
+      return;
     }
+    const timer = setTimeout(() => {
+      if (!impressionTrackedRef.current && appStateRef.current === 'active') {
+        impressionTrackedRef.current = true;
+        AdTogether.trackImpression(adData.id, adData.token, { visiblePercent: 100, visibleDurationMs: 1000 });
+      }
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [isOpen, adData, isLoading, hasError, appState]);
+
+  useEffect(() => {
+    if (!isOpen || !adData || isLoading || hasError) return;
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => Math.max(0, prev - 1));
+    }, 1000);
+    return () => clearInterval(timer);
   }, [isOpen, adData, isLoading, hasError]);
 
   const handlePress = () => {

package/src/types.ts

@@ -10,6 +10,11 @@ export interface AdModel {
   adType?: AdType;
 }
 
+export interface ViewabilityMetrics {
+  visiblePercent: number;
+  visibleDurationMs: number;
+}
+
 export interface AdTogetherOptions {
   /** The unique identifier for your application. */
   appId?: string;