Concept 15: AdMob Integration

npm install react-native-google-mobile-ads
npx react-native-google-mobile-ads:install

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json",
      "config": {
        "googleMobileAdsAppId": "ca-app-pub-XXXXX~YYYYY"
      }
    }
  }
}

import mobileAds from 'react-native-google-mobile-ads';
import { useEffect } from 'react';

export default function AdMobSetup() {
  useEffect(() => {
    initializeAds();
  }, []);

  const initializeAds = async () => {
    try {
      await mobileAds().initialize();
      console.log('AdMob initialized');

      // Optional: Set request configuration
      await mobileAds().setRequestConfiguration({
        maxAdContentRating: 'T', // Teen
        tagForChildDirectedTreatment: false,
        tagForUnderAgeOfConsent: false,
      });
    } catch (error) {
      console.error('AdMob init error:', error);
    }
  };
}

import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
import { View, StyleSheet } from 'react-native';

const BANNER_AD_UNIT_ID = __DEV__
  ? TestIds.BANNER
  : 'ca-app-pub-XXXXX/YYYYY';

export default function BannerAdComponent() {
  return (
    <View style={styles.container}>
      <BannerAd
        unitId={BANNER_AD_UNIT_ID}
        size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: false,
        }}
        onAdLoaded={() => {
          console.log('Banner ad loaded');
        }}
        onAdFailedToLoad={(error) => {
          console.error('Banner ad failed:', error);
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginVertical: 10,
  },
});

import {
  InterstitialAd,
  AdEventType,
  TestIds,
} from 'react-native-google-mobile-ads';
import { useEffect, useState } from 'react';

const INTERSTITIAL_AD_UNIT_ID = __DEV__
  ? TestIds.INTERSTITIAL
  : 'ca-app-pub-XXXXX/YYYYY';

export default function InterstitialAdManager() {
  const [interstitialAd, setInterstitialAd] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const ad = InterstitialAd.createForAdRequest(INTERSTITIAL_AD_UNIT_ID, {
      requestNonPersonalizedAdsOnly: false,
    });

    // Load ad
    const loadListener = ad.addAdEventListener(AdEventType.LOADED, () => {
      console.log('Interstitial ad loaded');
      setIsLoaded(true);
    });

    // Ad shown
    const shownListener = ad.addAdEventListener(AdEventType.OPENED, () => {
      console.log('Interstitial ad shown');
    });

    // Ad closed
    const closedListener = ad.addAdEventListener(AdEventType.CLOSED, () => {
      console.log('Interstitial ad closed');
      setIsLoaded(false);

      // Load next ad
      ad.load();
    });

    // Load the ad
    ad.load();
    setInterstitialAd(ad);

    return () => {
      loadListener();
      shownListener();
      closedListener();
    };
  }, []);

  const showAd = () => {
    if (isLoaded && interstitialAd) {
      interstitialAd.show();
    } else {
      console.log('Interstitial ad not ready');
    }
  };

  return { showAd, isLoaded };
}

import {
  RewardedAd,
  RewardedAdEventType,
  TestIds,
} from 'react-native-google-mobile-ads';
import { useEffect, useState } from 'react';
import { Alert } from 'react-native';

const REWARDED_AD_UNIT_ID = __DEV__
  ? TestIds.REWARDED
  : 'ca-app-pub-XXXXX/YYYYY';

export default function RewardedAdManager() {
  const [rewardedAd, setRewardedAd] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const ad = RewardedAd.createForAdRequest(REWARDED_AD_UNIT_ID, {
      requestNonPersonalizedAdsOnly: false,
    });

    // Ad loaded
    const loadListener = ad.addAdEventListener(RewardedAdEventType.LOADED, () => {
      console.log('Rewarded ad loaded');
      setIsLoaded(true);
    });

    // Ad earned reward
    const rewardListener = ad.addAdEventListener(
      RewardedAdEventType.EARNED_REWARD,
      (reward) => {
        console.log('User earned reward:', reward);
        grantReward(reward);
      }
    );

    // Ad closed
    const closedListener = ad.addAdEventListener(RewardedAdEventType.CLOSED, () => {
      console.log('Rewarded ad closed');
      setIsLoaded(false);

      // Load next ad
      ad.load();
    });

    ad.load();
    setRewardedAd(ad);

    return () => {
      loadListener();
      rewardListener();
      closedListener();
    };
  }, []);

  const showAd = () => {
    if (isLoaded && rewardedAd) {
      rewardedAd.show();
    } else {
      Alert.alert('Ad Not Ready', 'Please try again in a moment');
    }
  };

  const grantReward = (reward) => {
    // Grant in-app currency, extra life, etc.
    Alert.alert('Reward Earned!', `You received ${reward.amount} ${reward.type}`);
  };

  return { showAd, isLoaded };
}

export const AdPlacementStrategy = {
  // Banner ads
  banners: {
    topBanner: {
      location: 'Top of screen',
      bestFor: 'Content apps where scrolling is natural',
      avoid: 'Near interactive elements',
    },

    bottomBanner: {
      location: 'Bottom of screen',
      bestFor: 'Games, apps with main action at top',
      avoid: 'Apps with bottom navigation',
    },
  },

  // Interstitial ads
  interstitials: {
    timing: [
      'Between game levels',
      'After completing task',
      'When leaving section',
      'After X minutes of use',
    ],

    avoid: [
      'During active gameplay',
      'Mid-article reading',
      'Every screen transition',
      'More than once per 3 minutes',
    ],

    implementation: () => {
      let lastAdTime = 0;
      const MIN_INTERVAL = 3 * 60 * 1000; // 3 minutes

      const shouldShowAd = () => {
        const now = Date.now();
        if (now - lastAdTime < MIN_INTERVAL) {
          return false;
        }
        lastAdTime = now;
        return true;
      };

      return shouldShowAd;
    },
  },

  // Rewarded ads
  rewarded: {
    opportunities: [
      'Continue after failure (extra life)',
      'Speed up timer',
      'Unlock premium content temporarily',
      'Earn in-game currency',
      'Get hints/help',
    ],

    presentation: () => {
      Alert.alert(
        'Watch Ad for Reward?',
        'Watch a short video to earn 50 coins',
        [
          { text: 'No Thanks', style: 'cancel' },
          { text: 'Watch Ad', onPress: showRewardedAd },
        ]
      );
    },
  },
};

export const AdAnalytics = {
  // Track ad impressions
  trackImpression: (adType, adUnitId) => {
    // Analytics.logEvent('ad_impression', {
    //   ad_type: adType,
    //   ad_unit_id: adUnitId,
    //   timestamp: Date.now(),
    // });
  },

  // Track ad clicks
  trackClick: (adType, adUnitId) => {
    // Analytics.logEvent('ad_click', {
    //   ad_type: adType,
    //   ad_unit_id: adUnitId,
    // });
  },

  // Track reward granted
  trackReward: (amount, type) => {
    // Analytics.logEvent('ad_reward_granted', {
    //   reward_amount: amount,
    //   reward_type: type,
    // });
  },

  // Calculate eCPM (effective cost per mille)
  calculateECPM: (revenue, impressions) => {
    return (revenue / impressions) * 1000;
  },
};

export const AdMobPolicies = {
  // DO's
  allowed: [
    'Place ads in natural breaks',
    'Clearly label ads as advertisements',
    'Allow users to close ads easily',
    'Use age-appropriate content ratings',
    'Respect user privacy settings',
  ],

  // DON'Ts
  prohibited: [
    'Click own ads',
    'Encourage clicks ("Click this ad")',
    'Place ads near interactive elements',
    'Hide close button',
    'Show ads on splash screen',
    'Auto-refresh ads too frequently',
    'Show ads on error/crash screens',
  ],

  // Child-directed content
  coppa: {
    // If app targets children <13
    configure: () => {
      mobileAds().setRequestConfiguration({
        tagForChildDirectedTreatment: true,
        maxAdContentRating: 'G',
      });
    },
  },

  // GDPR compliance (Europe)
  gdpr: {
    // Show consent dialog
    requireConsent: true,
    consentOptions: ['Personalized ads', 'Non-personalized ads'],
  },
};

import { useState } from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';

export default function AdWithLoadingState({ adComponent, adType }) {
  const [isLoading, setIsLoading] = useState(true);
  const [hasError, setHasError] = useState(false);

  const handleAdLoaded = () => {
    setIsLoading(false);
    setHasError(false);
  };

  const handleAdError = (error) => {
    console.error(`${adType} ad error:`, error);
    setIsLoading(false);
    setHasError(true);
  };

  return (
    <View style={styles.container}>
      {isLoading && (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="small" color="#999" />
        </View>
      )}

      {hasError && (
        <View style={styles.errorContainer}>
          <Text style={styles.errorText}>Ad unavailable</Text>
        </View>
      )}

      {!hasError && adComponent}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    minHeight: 50,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingContainer: {
    padding: 10,
  },
  errorContainer: {
    padding: 10,
  },
  errorText: {
    fontSize: 12,
    color: '#999',
  },
});

import { useState, useEffect } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  SafeAreaView,
} from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';
import mobileAds from 'react-native-google-mobile-ads';

export default function AdMonetizedApp() {
  const [coins, setCoins] = useState(100);
  const [isPremium, setIsPremium] = useState(false);

  const interstitialAd = InterstitialAdManager();
  const rewardedAd = RewardedAdManager();

  useEffect(() => {
    mobileAds().initialize();
  }, []);

  const handleLevelComplete = () => {
    // Show interstitial after completing level
    if (!isPremium && interstitialAd.isLoaded) {
      interstitialAd.showAd();
    }
  };

  const handleWatchAdForCoins = () => {
    if (rewardedAd.isLoaded) {
      rewardedAd.showAd();
      setCoins((prev) => prev + 50);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      {/* Top Banner Ad (only for free users) */}
      {!isPremium && (
        <View style={styles.topBanner}>
          <BannerAd
            unitId={TestIds.BANNER}
            size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
          />
        </View>
      )}

      <ScrollView style={styles.content}>
        <Text style={styles.title}>Game App</Text>

        <View style={styles.coinsContainer}>
          <Text style={styles.coinsText}>💰 Coins: {coins}</Text>
        </View>

        <TouchableOpacity
          style={styles.button}
          onPress={handleLevelComplete}
        >
          <Text style={styles.buttonText}>Complete Level</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.button, styles.rewardButton]}
          onPress={handleWatchAdForCoins}
        >
          <Text style={styles.buttonText}>
            Watch Ad for 50 Coins 📺
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.button, styles.premiumButton]}
          onPress={() => setIsPremium(true)}
        >
          <Text style={styles.buttonText}>Remove Ads - $2.99</Text>
        </TouchableOpacity>
      </ScrollView>

      {/* Bottom Banner Ad (only for free users) */}
      {!isPremium && (
        <View style={styles.bottomBanner}>
          <BannerAd
            unitId={TestIds.BANNER}
            size={BannerAdSize.BANNER}
          />
        </View>
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  topBanner: {
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  bottomBanner: {
    backgroundColor: '#fff',
    alignItems: 'center',
  },
  content: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  coinsContainer: {
    backgroundColor: '#FFD700',
    borderRadius: 12,
    padding: 16,
    marginBottom: 20,
    alignItems: 'center',
  },
  coinsText: {
    fontSize: 24,
    fontWeight: 'bold',
  },
  button: {
    backgroundColor: '#007AFF',
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
    marginBottom: 12,
  },
  rewardButton: {
    backgroundColor: '#4CAF50',
  },
  premiumButton: {
    backgroundColor: '#FFD700',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});