Thiết lập các tính năng nâng cao của quảng cáo gốc

Quảng cáo gốc cung cấp các tính năng nâng cao sau đây, cho phép bạn tuỳ chỉnh quá trình tích hợp quảng cáo:

  • Bộ điều khiển chế độ phát video: Tuỳ chỉnh hành vi phát video và theo dõi các sự kiện trong vòng đời của video.
  • Vị trí đặt biểu tượng Lựa chọn quảng cáo: Tuỳ chỉnh vị trí đặt biểu tượng Lựa chọn quảng cáo.
  • Cử chỉ nhấp tuỳ chỉnh: Định cấu hình cử chỉ vuốt làm hành động nhấp.

Hướng dẫn này trình bày cách sử dụng các tính năng nâng cao của quảng cáo gốc với Google Mobile Ads SDK for React Native.

Điều kiện tiên quyết

Trước khi tiếp tục, hãy làm như sau:

Quản lý chế độ phát video và sự kiện

Khi yêu cầu quảng cáo gốc có chứa thành phần video, hãy tuỳ chỉnh các lựa chọn khởi động phát video, theo dõi các sự kiện trong vòng đời của video và kiểm soát việc phát video.

Định cấu hình các tuỳ chọn yêu cầu video

Để tuỳ chỉnh hành vi ban đầu của video, hãy đặt thuộc tính videoOptions trên đối tượng NativeAdRequest bằng đối tượng VideoOptions.

Ví dụ sau đây đặt video ở chế độ tắt tiếng khi bắt đầu phát:

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;
  }
}

Sau khi quảng cáo tải, ví dụ này cũng kiểm tra xem quảng cáo có chứa thành phần video hay không, ghi nhật ký siêu dữ liệu video và trả về quảng cáo đã tải. Nếu không thành công, ví dụ này sẽ ghi lại thông báo lỗi.

Để biết thêm thông tin về các thuộc tính siêu dữ liệu của video, chẳng hạn như tỷ lệ khung hình, thời gian hiện tại và thời lượng, hãy xem MediaContent.

Theo dõi các sự kiện video

Để theo dõi các sự kiện trong vòng đời của video, chẳng hạn như khi video bắt đầu hoặc kết thúc, hãy truyền lệnh gọi lại sự kiện từ giao diện VideoControllerEventProps đến thành phần NativeAdMediaView.

Ví dụ sau đây truyền các lệnh gọi lại để ghi lại các sự kiện trong vòng đời của video và hiển thị các nút tuỳ chỉnh để điều khiển việc phát video:

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>
  );
}

Khi bạn bật chế độ điều khiển tuỳ chỉnh, hãy điều khiển chế độ phát video bằng cách đính kèm thuộc tính ref của loại NativeAdMediaViewMethods vào thành phần NativeAdMediaView. Loại NativeAdMediaViewMethods đặt biệt danh cho giao diện VideoControllerMethods, hiển thị các phương thức playVideo, pauseVideo, stopVideo và setVideoMuted trên đối tượng ref.

Định cấu hình vị trí đặt Lựa chọn quảng cáo

Để tuỳ chỉnh vị trí đặt biểu tượng Lựa chọn quảng cáo, hãy chỉ định thuộc tính adChoicesPlacement trên đối tượng NativeAdRequest bằng đối tượng AdChoicesPlacement.

Ví dụ sau đây định cấu hình vị trí đặt biểu tượng Lựa chọn quảng cáo ở góc trên cùng bên trái trong yêu cầu quảng cáo:

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;
  }
}

Ví dụ này cũng trả về quảng cáo đã tải khi thành công và ghi lại thông báo lỗi khi không thành công.

Định cấu hình cử chỉ nhấp tuỳ chỉnh

Định cấu hình cử chỉ vuốt dưới dạng hành động nhấp vào quảng cáo gốc bằng cách sử dụng các thuộc tính customClickGestureDirection và customClickGestureAllowTaps trên đối tượng NativeAdRequest.

Ví dụ sau đây định cấu hình hướng cử chỉ là vuốt sang phải và cho phép nhấn khi tải quảng cáo:

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;
  }
}

Ví dụ này cũng kiểm tra xem cử chỉ nhấp tuỳ chỉnh có được bật hay không, trả về quảng cáo đã tải khi thành công và ghi lại lỗi khi không thành công.

Sau khi tải quảng cáo, hãy kiểm tra thuộc tính ad.isCustomClickGestureEnabled để xác minh xem cử chỉ nhấp tuỳ chỉnh có đang hoạt động cho quảng cáo đó hay không.

Các bước tiếp theo

Sau khi định cấu hình các tính năng nâng cao của quảng cáo gốc, bạn có thể tìm hiểu về những nội dung sau: