ตั้งค่าโฆษณาแบนเนอร์

โฆษณาแบนเนอร์จะอยู่ในตำแหน่งที่แน่นอนในเลย์เอาต์ของแอป เช่น ที่ด้านบนหรือด้านล่างของหน้าจออุปกรณ์ โฆษณาเหล่านี้จะอยู่บนหน้าจอขณะที่ผู้ใช้โต้ตอบกับแอป และจะรีเฟรชหลังจากระยะเวลาที่คุณตั้งไว้ แบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้จะใช้ขนาดโฆษณาสำหรับอุปกรณ์แต่ละเครื่องโดยใช้ความกว้างของโฆษณาที่คุณระบุ

หน้านี้จะอธิบายวิธีผสานรวมโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ในแอป React Native

ข้อกำหนดเบื้องต้น

โปรดทำสิ่งต่อไปนี้ก่อนดำเนินการต่อ

Android 

ca-app-pub-3940256099942544/9214589741

iOS 

ca-app-pub-3940256099942544/2435281174

รับขนาดโฆษณา

หากต้องการขอโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ ให้เรียกใช้เมธอด AdSize.getLargeAnchoredAdaptiveBannerAdSize โดยระบุความกว้างของคอนเทนเนอร์โฆษณาที่มีอยู่เป็นความหนาแน่นของพิกเซลอิสระ (dp) เมธอดนี้จะแสดงผล Promise ที่แปลงเป็นออบเจ็กต์ AdSize

ตัวอย่างต่อไปนี้จะรับและแสดงผลขนาดโฆษณาสำหรับโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้

export async function getAdaptiveAdSize(width: number): Promise<AdSize> {
  const adSize = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(width);
  return adSize;
}

โหลดโฆษณา

หลังจากได้รับออบเจ็กต์ AdSize แล้ว ให้เรียกใช้เมธอด load ในคลาส BannerAd พร้อมรหัสหน่วยโฆษณาและขนาดโฆษณา

ตัวอย่างต่อไปนี้จะโหลดโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ซึ่งมีขนาดโฆษณาและรหัสหน่วยโฆษณา รับอินสแตนซ์ BannerAd ที่โหลดเมื่อสำเร็จ และบันทึกข้อผิดพลาดเมื่อไม่สำเร็จ

export function loadBannerAd(
  adUnitId: string,
  adSize: AdSize,
  callback?: BannerAdLoadCallback,
): void {
  BannerAd.load(
    {adUnitId, adSize},
    {
      // Called when an ad has finished loading.
      onAdLoaded: (ad) => {
        console.log('Banner ad loaded successfully.');
        callback?.onAdLoaded?.(ad);
      },
      // Called when an ad request fails.
      onAdFailedToLoad: (error: LoadAdError) => {
        console.error('Failed to load banner ad:', error.message);
        callback?.onAdFailedToLoad?.(error);
      },
    },
  );
}

รีเฟรชโฆษณา

หากคุณกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่นเมื่อโฆษณาโหลดไม่สำเร็จ Google Mobile Ads SDK for React Native จะยึดตามอัตราการรีเฟรชที่คุณระบุไว้ใน UI ของ AdMob หากคุณไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรชได้ที่ใช้การรีเฟรชอัตโนมัติสําหรับโฆษณาแบนเนอร์

แสดงโฆษณาแบนเนอร์

หากต้องการแสดงอินสแตนซ์ BannerAd ที่โหลดแล้ว ให้ส่งอินสแตนซ์โฆษณาไปยังพร็อพเพอร์ตี้ ad ของคอมโพเนนต์ BannerAdView ในลำดับชั้นการแสดงผล

ตัวอย่างต่อไปนี้แสดงโฆษณาและทำลายโฆษณาเมื่อคอมโพเนนต์เลิกต่อเชื่อม

export function BannerAdViewComponent({ad}: {ad: BannerAd}): React.JSX.Element {
  useEffect(() => {
    // Destroy native resources when the component unmounts.
    return () => {
      ad.destroy();
    };
  }, [ad]);

  return <BannerAdView ad={ad} />;
}

ตัวอย่างนี้จะเรียกใช้เมธอด destroy เมื่อคอมโพเนนต์ยกเลิกการต่อเชื่อมหรือเมื่อมีการแทนที่อินสแตนซ์โฆษณา กระบวนการนี้จะเพิ่มหน่วยความจำและทรัพยากรที่โฆษณาใช้

รอเหตุการณ์โฆษณา

หากต้องการฟังเหตุการณ์โฆษณา เช่น การแสดงโฆษณาและการคลิก ให้ตั้งค่า Callback ในคอมโพเนนต์ BannerAdView ดู Callback ทั้งหมดได้ที่ BannerAdViewProps

ตัวอย่างต่อไปนี้ตั้งค่า Callback เพื่อรอเหตุการณ์โฆษณาแบนเนอร์

export function BannerEventsExample({ad}: {ad: BannerAd}): React.JSX.Element {
  return (
    <BannerAdView
      ad={ad}
      // Called when an impression is recorded for an ad.
      onAdImpression={() => {
        console.log('Banner ad recorded an impression.');
      }}
      // Called when a click is recorded for an ad.
      onAdClicked={() => {
        console.log('Banner ad clicked.');
      }}
      // Called when the ad opens an in-app overlay or landing page.
      onAdShowedFullScreenContent={() => {
        console.log('Banner ad opened overlay content.');
      }}
      // Called when the user dismisses the ad overlay.
      onAdDismissedFullScreenContent={() => {
        console.log('Banner ad overlay dismissed.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue) => {
        console.log(
          `Banner ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
      // Called when the ad automatically refreshes.
      onAdRefreshed={() => {
        console.log('Banner ad refreshed.');
      }}
      // Called when the ad fails to automatically refresh.
      onAdFailedToRefresh={(error) => {
        console.error('Banner ad failed to refresh:', error.message);
      }}
    />
  );
}

ตัวอย่างนี้จะคอยฟังเหตุการณ์โฆษณา เช่น การปิดโฆษณา การแสดงผล การคลิก การนำเสนอแบบเต็มหน้าจอ รายได้จากโฆษณาโดยประมาณ และความสำเร็จและความล้มเหลวในการรีเฟรช

ดูตัวอย่างแบบเต็ม

ส่วนนี้จะแสดงตัวอย่างทั้งหมดของการผสานรวมโฆษณาแบนเนอร์ลงในคอมโพเนนต์ React Native

ตัวอย่างต่อไปนี้จะผสานรวมโฆษณาแบนเนอร์เข้ากับคอมโพเนนต์ React Native และจัดการอินสแตนซ์โฆษณาในสถานะ

export function BannerScreen() {
  const {width} = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const [ad, setAd] = useState<BannerAd | null>(null);
  const [status, setStatus] = useState('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoadAd = async () => {
    setStatus('Loading adaptive banner ad...');
    try {
      const adaptiveSize = await getAdaptiveAdSize(width);
      loadBannerAd(BANNER_AD_UNIT_ID, adaptiveSize, {
        onAdLoaded: (loadedAd) => {
          setAd(loadedAd);
          setStatus('Banner ad loaded successfully.');
        },
        onAdFailedToLoad: (error: LoadAdError) => {
          setStatus(`Failed to load banner ad: ${error.message}`);
        },
      });
    } catch (error) {
      setStatus(`Failed to get adaptive ad size: ${error}`);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Anchored Adaptive Banner Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Banner Ad" onPress={handleLoadAd} />
      </View>
      {ad ? (
        <View style={[styles.bannerContainer, {bottom: insets.bottom}]}>
          <BannerAdView
            ad={ad}
            onAdImpression={() => setStatus('Banner ad recorded impression.')}
            onAdClicked={() => setStatus('Banner ad clicked.')}
            onAdShowedFullScreenContent={() =>
              setStatus('Banner ad showed overlay content.')
            }
            onAdDismissedFullScreenContent={() =>
              setStatus('Banner ad overlay dismissed.')
            }
          />
        </View>
      ) : null}
    </View>
  );
}

แทนที่ BANNER_AD_UNIT_ID ด้วยรหัสหน่วยโฆษณา

ขั้นตอนถัดไป

หลังจากผสานรวมโฆษณาแบนเนอร์แล้ว ให้ดูหัวข้อต่อไปนี้