تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

ضبط الميزات المتقدّمة المضمّنة

توفّر "الإعلانات المدمجة مع المحتوى" الميزات المتقدّمة التالية التي تتيح لك تخصيص دمج الإعلانات:

عناصر التحكّم في تشغيل الفيديو: يمكنك تخصيص سلوك تشغيل الفيديو والاستماع إلى الأحداث التي تتم في مراحل الفيديو.
موضع رمز "خيارات الإعلان": يمكنك تخصيص موضع رمز "خيارات الإعلان".
إيماءات النقر المخصّصة: يمكنك ضبط إيماءات التمرير السريع كإجراءات نقر.

يوضّح لك هذا الدليل كيفية استخدام الميزات المتقدّمة لـ "الإعلانات المدمجة مع المحتوى" من خلال 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.

الاستماع إلى أحداث الفيديو

لتتبّع أحداث يتم في مراحل النشاط للفيديو، مثل وقت بدء الفيديو أو انتهائه، يمكنك ضبط عمليات معاودة الاتصال بالحدث من واجهة VideoControllerEventProps إلى المكوِّن NativeAdMediaView.

يمرّر المثال التالي عمليات ردّ الاتصال لتسجيل أحداث يتم في مراحل النشاط للفيديو ويعرض أزرارًا مخصّصة للتحكّم في تشغيل الفيديو:

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.

ضبط موضع AdChoices

لتخصيص موضع رمز "خيارات الإعلان"، حدِّد السمة 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 للتأكّد مما إذا كانت إيماءات النقر المخصّصة نشطة لهذا الإعلان.

الخطوات التالية

بعد ضبط الميزات المتقدّمة لـ "الإعلانات المدمجة مع المحتوى"، يمكنك الاطّلاع على ما يلي: