โหลดโฆษณาเปิดแอปรายการเดียว

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

คำแนะนำและแนวทางปฏิบัติแนะนำสำหรับโฆษณาเปิดแอป

คู่มือนี้อธิบายวิธีผสานรวมโฆษณาเปิดแอปเข้ากับแอป React Native

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

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

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

โหลดโฆษณา

หากต้องการโหลดโฆษณาเปิดแอป ให้เรียกใช้เมธอด load

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

export async function loadAppOpenAd(
  adUnitId: string,
): Promise<AppOpenAd | null> {
  try {
    const ad = await AppOpenAd.load({adUnitId});
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load app open ad:', loadError.message);
    return null;
  }
}

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

ก่อนแสดงโฆษณา ให้ตั้งค่า Listener adEventCallback ในอินสแตนซ์ AppOpenAd ที่โหลดแล้ว Listener นี้จะรับ Callback ของเหตุการณ์ในวงจรของโฆษณา เช่น โฆษณาที่แสดงบนหน้าจอหรือผู้ใช้แตะโฆษณา ดู Callback ที่ใช้ได้ที่ AdEventCallback

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

export function registerAdEvents(ad: AppOpenAd) {
  ad.adEventCallback = {
    // Called when the ad is presented on screen.
    onAdShowedFullScreenContent: () => {
      console.log('App open ad showed full screen content.');
    },
    // Called when the ad is closed by the user.
    onAdDismissedFullScreenContent: () => {
      console.log('App open ad dismissed full screen content.');
      ad.destroy();
    },
    // Called when presentation fails.
    onAdFailedToShowFullScreenContent: (error) => {
      console.error('Failed to show app open ad:', error);
      ad.destroy();
    },
    // Called when an impression is recorded.
    onAdImpression: () => {
      console.log('App open ad recorded an impression.');
    },
    // Called when the user taps the ad.
    onAdClicked: () => {
      console.log('App open ad was clicked.');
    },
    // Called when the ad is estimated to have earned money.
    onAdPaid: (adValue) => {
      console.log(
        `App open ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
      );
    },
  };
}

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

แสดงโฆษณา

หากต้องการแสดงโฆษณาเปิดแอป ให้เรียกใช้เมธอด show ดังนี้

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

จัดการโฆษณาด้วยเครื่องมือจัดการระดับแอป

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

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

export class SingleLoadAppOpenAdManager {
  private ad: AppOpenAd | null = null;
  private loadTime = 0;
  private isShowingAd = false;

  async loadAd(adUnitId: string) {
    // Avoid re-loading if an ad is already loaded or showing.
    if (this.ad) {
      return;
    }
    try {
      this.ad = await AppOpenAd.load({adUnitId});
      this.loadTime = Date.now();
      this.ad.adEventCallback = {
        onAdDismissedFullScreenContent: () => {
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          // Preload the next ad for future foreground transitions.
          this.loadAd(adUnitId);
        },
        onAdFailedToShowFullScreenContent: () => {
          // An ad object that fails to present is consumed and cannot be reused.
          // Clean up native resources and preload a new ad for future events.
          this.ad?.destroy();
          this.ad = null;
          this.isShowingAd = false;
          this.loadAd(adUnitId);
        },
      };
    } catch (error) {
      console.error('Failed to load app open ad:', error);
    }
  }

  showAdIfAvailable() {
    if (!this.ad || !this.isAdAvailable()) {
      console.warn(
        'App open ad cannot be shown: ad is not loaded or has expired.',
      );
      return;
    }
    if (this.isShowingAd) {
      console.warn('App open ad cannot be shown: an ad is already displaying.');
      return;
    }

    this.ad.show();
    this.isShowingAd = true;
  }

  isAdAvailable(): boolean {
    // App Open ads expire after 4 hours per Google Mobile Ads policy.
    const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
    return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
  }
}

เครื่องมือจัดการระดับแอปช่วยให้คุณทำสิ่งต่อไปนี้ได้

  • รักษาสถานะโฆษณาให้เป็นอิสระจากการนําทางหน้าจอและวงจรของคอมโพเนนต์
  • ติดตามสถานะการนำเสนอโฆษณาในเหตุการณ์ชุดข้อความแบบเนทีฟ
  • จัดการการเปลี่ยนแอปเป็นเบื้องหน้าเพื่อหลีกเลี่ยงการแสดงโฆษณาซ้ำ
  • โหลดโฆษณาล่วงหน้าในเบื้องหลังเพื่อให้โฆษณาพร้อมแสดงเมื่อเปิดแอป
  • ตรวจสอบขีดจำกัดการหมดอายุของโฆษณา 4 ชั่วโมงเพื่อหลีกเลี่ยงการแสดงโฆษณาที่หมดอายุ
  • รวมการโหลด การแสดง และการล้างทรัพยากรโฆษณา

รอเหตุการณ์ที่แอปทำงานอยู่เบื้องหน้า

หากต้องการแสดงโฆษณา Display เมื่อแอปกลับมาทำงานอยู่เบื้องหน้า ให้ใช้โมดูล AppState เพื่อฟังการเปลี่ยนแปลงสถานะแอปที่รูทของแอป เช่น ในไฟล์ App.tsx ทำสิ่งต่อไปนี้:

  1. ลงทะเบียน Listener AppState สำหรับเหตุการณ์ 'change'
  2. เมื่อสถานะเปลี่ยนเป็นสถานะ 'active' ให้เรียกใช้เมธอด showAdIfAvailable ในอินสแตนซ์ตัวจัดการโฆษณา

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

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

ดูข้อมูลเกี่ยวกับ Cold Start และหน้าจอการโหลด

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

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

ตั้งค่าหน้าจอทดสอบ

หากต้องการทดสอบโฆษณาแบบอินเทอร์แอกทีฟหรือแสดงโฆษณาบนหน้าจอที่เฉพาะเจาะจง ให้จัดการอินสแตนซ์โฆษณาในสถานะคอมโพเนนต์

ตัวอย่างต่อไปนี้ผสานรวมโฆษณาเปิดแอปเข้ากับคอมโพเนนต์ React Native ด้วยฮุกการล้างข้อมูล useEffect หากคอมโพเนนต์ยกเลิกการต่อเชื่อมก่อนที่โฆษณาจะแสดง Hook นี้จะปล่อยทรัพยากรเนทีฟ

export function AppOpenSingleLoadScreen() {
  const [ad, setAd] = useState<AppOpenAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

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

  const handleLoad = async () => {
    setStatus('Loading App Open ad...');
    const loadedAd = await loadAppOpenAd(APP_OPEN_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('App Open ad loaded!');
    } else {
      setStatus('Failed to load App Open ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showAppOpenAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

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

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