ตั้งค่าฟีเจอร์เนทีฟขั้นสูง

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

  • ตัวควบคุมการเล่นวิดีโอ: ปรับแต่งลักษณะการเล่นวิดีโอและฟังเหตุการณ์ในวงจรของวิดีโอ
  • ตำแหน่งไอคอนตัวเลือกโฆษณาอื่นๆ: ปรับแต่งตำแหน่งของไอคอนตัวเลือกโฆษณาอื่นๆ
  • ท่าทางการคลิกที่กำหนดเอง: กำหนดค่าท่าทางการปัดเป็นการดำเนินการคลิก

คู่มือนี้จะแสดงวิธีใช้ฟีเจอร์ขั้นสูงของโฆษณาเนทีฟกับ Google Mobile Ads SDK for React Native

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

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

จัดการการเล่นวิดีโอและกิจกรรม

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

กำหนดค่าตัวเลือกคำขอวิดีโอ

หากต้องการปรับแต่งลักษณะการทำงานเริ่มต้นของวิดีโอ ให้ตั้งค่าพร็อพเพอร์ตี้ videoOptions ในออบเจ็กต์ NativeAdRequest โดยใช้ออบเจ็กต์ VideoOptions

ตัวอย่างต่อไปนี้ตั้งค่าวิดีโอให้เริ่มเล่นโดยปิดเสียงเมื่อเริ่มเล่น

export async function loadNativeVideoAd(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      videoOptions: {
        // Autoplay video with sound muted.
        startMuted: true,
      },
    });

    // Inspect video metadata if the ad contains video content.
    if (ad.mediaContent.hasVideoContent) {
      console.log('Video duration in seconds:', ad.mediaContent.duration);
      console.log('Video aspect ratio:', ad.mediaContent.aspectRatio);
    }

    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native video ad:', loadError.message);
    return null;
  }
}

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ข้อมูลเมตาของวิดีโอ เช่น สัดส่วนภาพ เวลาปัจจุบัน และระยะเวลาได้ที่ MediaContent

ฟังเหตุการณ์วิดีโอ

หากต้องการฟังเหตุการณ์ในวงจรของวิดีโอ เช่น เมื่อวิดีโอเริ่มหรือสิ้นสุด ให้ส่ง Callback ของเหตุการณ์จากอินเทอร์เฟซ VideoControllerEventProps ไปยังคอมโพเนนต์ NativeAdMediaView

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

export function NativeAdWithVideoControls({ad}: {ad: NativeAd}) {
  const mediaViewRef = useRef<NativeAdMediaViewMethods>(null);

  return (
    <NativeAdView ad={ad}>
      {/* Video lifecycle callbacks */}
      <NativeAdMediaView
        ref={mediaViewRef}
        // Called when video playback starts.
        onVideoStart={() => {
          console.log('Video playback started.');
        }}
        // Called when video playback resumes or plays.
        onVideoPlay={() => {
          console.log('Video is playing.');
        }}
        // Called when video playback pauses.
        onVideoPause={() => {
          console.log('Video playback paused.');
        }}
        // Called when video playback completes.
        onVideoEnd={() => {
          console.log('Video playback finished.');
        }}
        // Called when the video mute state changes.
        onVideoMute={(isMuted: boolean) => {
          console.log(`Video mute state changed: ${isMuted}`);
        }}
      />

      {/* Custom playback controls (Ad Manager customControlsRequested only) */}
      <View>
        {/* Plays or resumes the video. */}
        <Button
          title="Play"
          onPress={() => mediaViewRef.current?.playVideo()}
        />
        {/* Pauses video playback. */}
        <Button
          title="Pause"
          onPress={() => mediaViewRef.current?.pauseVideo()}
        />
        {/* Stops video playback and resets the playback position to the beginning. */}
        <Button
          title="Stop"
          onPress={() => mediaViewRef.current?.stopVideo()}
        />
        {/* Mutes or unmutes audio. */}
        <Button
          title="Mute"
          onPress={() => mediaViewRef.current?.setVideoMuted(true)}
        />
        <Button
          title="Unmute"
          onPress={() => mediaViewRef.current?.setVideoMuted(false)}
        />
      </View>
    </NativeAdView>
  );
}

เมื่อเปิดใช้การควบคุมที่กำหนดเอง ให้ควบคุมการเล่นวิดีโอโดยแนบพร็อพเพอร์ตี้ ref ของประเภท NativeAdMediaViewMethods กับคอมโพเนนต์ NativeAdMediaView ประเภท NativeAdMediaViewMethods จะใช้นามแฝงของอินเทอร์เฟซ VideoControllerMethods ซึ่งแสดงเมธอด playVideo, pauseVideo, stopVideo และ setVideoMuted ในออบเจ็กต์ ref

กำหนดค่าตำแหน่งของตัวเลือกโฆษณาอื่นๆ

หากต้องการปรับแต่งตำแหน่งของไอคอนตัวเลือกโฆษณาอื่นๆ ให้ระบุพร็อพเพอร์ตี้ adChoicesPlacement ในออบเจ็กต์ NativeAdRequest โดยใช้ออบเจ็กต์ AdChoicesPlacement

ตัวอย่างต่อไปนี้จะกำหนดค่าตำแหน่งไอคอนตัวเลือกโฆษณาอื่นๆ ที่มุมซ้ายบนในคำขอโฆษณา

export async function loadNativeAdWithAdChoicesPlacement(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      // Render the AdChoices icon in the top-left corner.
      adChoicesPlacement: AdChoicesPlacement.TOP_LEFT,
    });
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

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

กำหนดค่าท่าทางสัมผัสการคลิกที่กำหนดเอง

กำหนดค่าท่าทางการปัดเป็นการดำเนินการคลิกในโฆษณาเนทีฟโดยใช้พร็อพเพอร์ตี้ customClickGestureDirection และ customClickGestureAllowTaps ในออบเจ็กต์ NativeAdRequest

ตัวอย่างต่อไปนี้กําหนดค่าทิศทางท่าทางสัมผัสเป็นการปัดไปทางขวาและอนุญาตให้แตะเมื่อโหลดโฆษณา

export async function loadNativeAdWithCustomClick(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      // Require a right swipe gesture for clicks while allowing standard taps.
      customClickGestureDirection: SwipeGestureDirection.RIGHT,
      customClickGestureAllowTaps: true,
    });

    if (ad.isCustomClickGestureEnabled) {
      console.log('Custom click gestures are enabled for this ad.');
    }

    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

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

หลังจากโหลดโฆษณาแล้ว ให้ตรวจสอบพร็อพเพอร์ตี้ ad.isCustomClickGestureEnabled เพื่อยืนยันว่าท่าทางสัมผัสการคลิกที่กำหนดเองทำงานอยู่สำหรับโฆษณานั้นหรือไม่

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

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