উন্নত নেটিভ ফিচার সেট করা

নেটিভ বিজ্ঞাপন নিম্নলিখিত উন্নত ফিচার প্রদান করে যা আপনাকে বিজ্ঞাপন ইন্টিগ্রেশন কাস্টমাইজ করতে দেয়:

  • ভিডিও প্লেব্যাক কন্ট্রোল: ভিডিও প্লেব্যাক আচরণ কাস্টমাইজ করুন এবং ভিডিও লাইফসাইকেল ইভেন্ট শুনুন।
  • 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 প্রপার্টি চেক করে দেখুন যে সেই বিজ্ঞাপনের জন্য কাস্টম ক্লিক জেসচার অ্যাক্টিভ আছে কিনা।

পরবর্তী ধাপ

নেটিভ বিজ্ঞাপনের উন্নত ফিচার কনফিগার করার পরে, আপনি নিম্নলিখিত বিষয়গুলি সম্পর্কে জানতে পারবেন: