ऐडवांस नेटिव सुविधाएं सेट करना

नेटिव विज्ञापनों में ये ऐडवांस सुविधाएं मिलती हैं. इनकी मदद से, विज्ञापन इंटिग्रेशन को पसंद के मुताबिक बनाया जा सकता है:

  • वीडियो प्लेबैक कंट्रोल: वीडियो प्लेबैक के व्यवहार को पसंद के मुताबिक बनाएं और वीडियो लाइफ़साइकल इवेंट सुनें.
  • AdChoices आइकॉन की जगह: AdChoices आइकॉन की जगह को पसंद के मुताबिक बनाएं.
  • कस्टम क्लिक जेस्चर: स्वाइप जेस्चर को क्लिक ऐक्शन के तौर पर कॉन्फ़िगर करें.

इस गाइड में, 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>
  );
}

कस्टम कंट्रोल चालू करने पर, वीडियो प्लेबैक को कंट्रोल करने के लिए, NativeAdMediaViewMethods टाइप की ref प्रॉपर्टी को NativeAdMediaView कॉम्पोनेंट से अटैच करें. NativeAdMediaViewMethods टाइप, VideoControllerMethods इंटरफ़ेस का दूसरा नाम है. यह ref ऑब्जेक्ट पर playVideo, pauseVideo, stopVideo, और setVideoMuted मेथड दिखाता है.

AdChoices प्लेसमेंट को कॉन्फ़िगर करना

AdChoices आइकॉन की जगह को पसंद के मुताबिक बनाने के लिए, AdChoicesPlacement ऑब्जेक्ट का इस्तेमाल करके, NativeAdRequest ऑब्जेक्ट पर adChoicesPlacement प्रॉपर्टी की जानकारी दें.

यहां दिए गए उदाहरण में, विज्ञापन दिखाने के अनुरोध पर AdChoices आइकॉन को सबसे ऊपर बाएं कोने में कॉन्फ़िगर किया गया है:

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

इस उदाहरण में, विज्ञापन लोड होने पर उसे दिखाया जाता है और लोड न होने पर गड़बड़ी का मैसेज लॉग किया जाता है.

क्लिक करने के लिए कस्टम जेस्चर कॉन्फ़िगर करना

NativeAdRequest ऑब्जेक्ट पर customClickGestureDirection और customClickGestureAllowTaps प्रॉपर्टी का इस्तेमाल करके, नेटिव विज्ञापनों पर क्लिक ऐक्शन के तौर पर स्वाइप जेस्चर कॉन्फ़िगर करें.

यहां दिए गए उदाहरण में, जेस्चर की दिशा को दाईं ओर स्वाइप करने के तौर पर कॉन्फ़िगर किया गया है. साथ ही, विज्ञापन लोड होने के दौरान टैप करने की अनुमति दी गई है:

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 प्रॉपर्टी की जांच करके देखें कि उस विज्ञापन के लिए, क्लिक करने के लिए कस्टम जेस्चर चालू हैं या नहीं.

अगले चरण

नेटिव ऐड ऐडवांस की सुविधाओं को कॉन्फ़िगर करने के बाद, इनके बारे में जानें: