ตั้งค่าโฆษณาเนทีฟ

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

ดูรายละเอียดเกี่ยวกับการแสดงโฆษณาเนทีฟอย่างสอดคล้องกับนโยบายได้ที่โฆษณาเนทีฟที่ใช้เนทีฟขั้นสูง

หน้านี้จะอธิบายวิธีโหลดโฆษณาเนทีฟรายการเดียวและหลายรายการ จัดการหน่วยความจำและวงจรของโฆษณา รวมถึงเปิดใช้การเร่งฮาร์ดแวร์สำหรับโฆษณาวิดีโอใน Android

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

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

Android

รูปแบบ รหัสหน่วยโฆษณาตัวอย่าง
เนทีฟ ca-app-pub-3940256099942544/2247696110
วิดีโอเนทีฟ ca-app-pub-3940256099942544/1044960115

iOS

รูปแบบ รหัสหน่วยโฆษณาตัวอย่าง
เนทีฟ ca-app-pub-3940256099942544/3986624511
วิดีโอเนทีฟ ca-app-pub-3940256099942544/2521693316

โหลดโฆษณา

หากต้องการโหลดโฆษณาเนทีฟ ให้เรียกใช้เมธอด NativeAd.load ด้วยออบเจ็กต์ NativeAdRequest ที่มีรหัสหน่วยโฆษณา เมธอดนี้จะแสดงผล Promise ที่แก้ไขด้วยออบเจ็กต์ NativeAd ที่โหลดหรือปฏิเสธด้วยออบเจ็กต์ LoadAdError

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

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

เมื่อโหลดและจัดการโฆษณาเนทีฟ เราขอแนะนำให้คุณทำดังนี้

  • จำกัดโฆษณาที่โหลด: ชิ้นงานโฆษณาเนทีฟใช้หน่วยความจำ โหลดเฉพาะโฆษณาที่ผู้ใช้กำลังจะดู เช่น ตำแหน่งโฆษณา 1-2 ตำแหน่งถัดไป แทนที่จะโหลดเป็นกลุ่มใหญ่พร้อมกัน
  • ล้างโฆษณาที่เลิกต่อเชื่อม: เมื่อคุณนำโฆษณาออกจากหน้าจอหรือแทนที่โฆษณา หรือเมื่อคอมโพเนนต์ที่มีโฆษณาเลิกต่อเชื่อม ให้เรียกใช้เมธอด ad.destroy เมธอดนี้จะปล่อยทรัพยากรและหน่วยความจำที่โฆษณาใช้
  • แสดงโฆษณาที่โหลดภายใน 1 ชั่วโมง: ครีเอทีฟโฆษณาเนทีฟจะหมดอายุหลังจากผ่านไป 60 นาที หากคุณไม่ได้แสดงโฆษณาที่โหลดไว้ภายใน 1 ชั่วโมง ให้ทำลายโฆษณานั้นและขอโฆษณาอื่น

ไม่บังคับ: โหลดโฆษณาหลายรายการ

หากต้องการโหลดโฆษณาหลายรายการในคำขอเดียว ให้เรียกใช้เมธอด NativeAd.loadAds ด้วยออบเจ็กต์ NativeAdRequest, จำนวนโฆษณาที่จะขอ และออบเจ็กต์ NativeAdLoadCallback คำขอมีโฆษณาได้สูงสุด 5 รายการ

ตัวอย่างต่อไปนี้จะขอโฆษณาเนทีฟหลายรายการและจัดการโฆษณาที่โหลดแต่ละรายการ ข้อผิดพลาดในการโหลด และการดำเนินการตามคำขอโดยใช้ Callback

export function loadMultipleNativeAds(adUnitId: string, numAds: number): void {
  NativeAd.loadAds({adUnitId}, numAds, {
    // Called when an individual native ad finishes loading.
    onNativeAdLoad: (ad) => {
      console.log('Loaded native ad:', ad.headline);
    },
    // Called when an individual native ad fails to load.
    onAdFailedToLoad: (error) => {
      console.error('Failed to load native ad:', error.message);
    },
    // Called when all requested ads have finished loading.
    onAdLoadingCompleted: () => {
      console.log('All requested native ads finished loading.');
    },
  });
}

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

เปิดการเร่งฮาร์ดแวร์

หากต้องการแสดงโฆษณาวิดีโอในมุมมองโฆษณาเนทีฟบน Android ให้เปิดใช้การเร่งฮาร์ดแวร์

Android จะเปิดใช้การเร่งฮาร์ดแวร์โดยค่าเริ่มต้น แอปอาจปิดใช้การเร่งฮาร์ดแวร์ทั่วโลก หากแอปปิดใช้การเร่งฮาร์ดแวร์ทั่วโลก ให้เปิดใช้การตั้งค่าสำหรับคลาส Activity ที่แสดงโฆษณา

หากคุณเปิดใช้การเร่งฮาร์ดแวร์ทั่วโลกและแอปไม่ทำงานตามที่คาดไว้ ให้ควบคุมการเร่งฮาร์ดแวร์สำหรับกิจกรรมแต่ละรายการ หากต้องการเปิดหรือปิดใช้การเร่งฮาร์ดแวร์ ให้ใช้แอตทริบิวต์ android:hardwareAccelerated สำหรับองค์ประกอบ application และ activity ในไฟล์ AndroidManifest.xml

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

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

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

หลังจากโหลดโฆษณาแล้ว ให้แสดงโฆษณาใน UI ของ React Native โดยใช้คอมโพเนนต์ NativeAdView และ NativeAdMediaView ดูรายละเอียดได้ที่แสดงโฆษณาเนทีฟ