הטמעה של מודעות מסוג 'תמונה בתוך תמונה' (בטא)

בחירת פלטפורמה: Android iOS

תמונה בתוך תמונה

מודעות במצב 'תמונה בתוך תמונה' (PiP) מוצגות בחלון צף שנשאר מעל התוכן במסך, כמו מאמרים, פידים או משחקים. הפורמט הזה מאפשר למשתמשים ליצור אינטראקציה עם האפליקציה בזמן שהמודעה מוצגת. כדי להציג מודעות שלא תופסות את כל המסך, בוחרים בפורמט הזה. מידע נוסף על מודעות בתצוגת 'תמונה בתוך תמונה'

במדריך הזה מוסבר איך לבקש ולהציג מודעות במצב 'תמונה בתוך תמונה' באפליקציה באמצעות GMA Next-Gen SDK.

לפני שמתחילים

לפני שממשיכים, צריך:

טעינת מודעה

כדי לטעון אובייקט PictureInPictureAd, יוצרים בקשה להצגת מודעה ומבצעים קריאה ל-method‏ load:

Kotlin

private fun loadPictureInPictureAd() {
  val request = PictureInPictureAdRequest.Builder(AD_UNIT_ID).build()

  PictureInPictureAd.load(
    request,
    object : AdLoadCallback<PictureInPictureAd> {
      override fun onAdFailedToLoad(adError: LoadAdError) {
        Log.w(TAG, "Picture-in-Picture ad failed to load: $adError")
      }

      override fun onAdLoaded(ad: PictureInPictureAd) {
        Log.d(TAG, "Picture-in-Picture ad loaded.")

        // Capture the PictureInPictureAd reference for later use.
        pipAd = ad
        setAdEventCallback(ad)
      }
    },
  )
}

Java

private void loadPictureInPictureAd() {
  PictureInPictureAdRequest request = new PictureInPictureAdRequest.Builder(AD_UNIT_ID).build();

  PictureInPictureAd.load(
      request,
      new AdLoadCallback<PictureInPictureAd>() {
        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          Log.w(TAG, "Picture-in-Picture ad failed to load: " + adError);
        }

        @Override
        public void onAdLoaded(@NonNull PictureInPictureAd ad) {
          Log.d(TAG, "Picture-in-Picture ad loaded.");

          // Capture the PictureInPictureAd reference for later use.
          pipAd = ad;
          setAdEventCallback(ad);
        }
      });
}

מחליפים את AD_UNIT_ID במזהה יחידת המודעות.

הצגת המודעה

כדי להציג את המודעה במצב תמונה בתוך תמונה במסך, צריך להגדיר את האפשרויות של התמונה בתוך תמונה ולהפעיל את ה-method‏ show. בדוגמה הבאה מוגדר מיקום ברירת המחדל של המודעה והיקף ההצגה למסך:

Kotlin

private fun showPictureInPictureAd(activity: Activity) {
  // Capture the ad reference saved from the onAdLoaded callback.
  val ad = pipAd
  if (ad != null) {
    val options =
      PictureInPictureAdOptions.Builder()
        // Uses the Google Mobile Ads SDK's default screen position.
        .setPosition(PictureInPictureAdPosition.DEFAULT)
        // Binds the ad lifecycle to the host screen.
        .setPresentationScope(PictureInPictureAdPresentationScope.SCREEN)
        .build()
    ad.show(activity, options)
  } else {
    Log.d(TAG, "No ad to show.")
  }
}

Java

private void showPictureInPictureAd(@NonNull Activity activity) {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    PictureInPictureAdOptions options =
        new PictureInPictureAdOptions.Builder()
            // Uses the Google Mobile Ads SDK's default screen position.
            .setPosition(PictureInPictureAdPosition.DEFAULT)
            // Binds the ad lifecycle to the host screen.
            .setPresentationScope(PictureInPictureAdPresentationScope.SCREEN)
            .build();
    pipAd.show(activity, options);
  } else {
    Log.d(TAG, "No ad to show.");
  }
}

הגדרת המיקום

כברירת מחדל, כשמודעה מוצגת בפעם הראשונה ב-GMA Next-Gen SDK, היא מופיעה במצב 'תמונה בתוך תמונה' בפינה השמאלית התחתונה של המסך, או במיקום האחרון שבו היא הוצגה אם היא כבר הוצגה בעבר. כדי להתאים אישית את המיקום שבו המודעה מופיעה, מגדירים את המיקום באפשרויות של תמונה בתוך תמונה. בדוגמה הבאה מוגדר מיקום בחלק העליון של התוכן בפינה הימנית העליונה של המסך:

Kotlin

private fun createTopLeftPositionOptions(): PictureInPictureAdOptions {
  return PictureInPictureAdOptions.Builder()
    // Sets the ad position to the top-left corner of the screen.
    .setPosition(PictureInPictureAdPosition.TOP_LEFT)
    .build()
}

Java

private PictureInPictureAdOptions createTopLeftPositionOptions() {
  return new PictureInPictureAdOptions.Builder()
      // Sets the ad position to the top-left corner of the screen.
      .setPosition(PictureInPictureAdPosition.TOP_LEFT)
      .build();
}

לרשימה של כל המשרות הפנויות: PictureInPictureAdPosition.

הגדרת היקף המצגת

כברירת מחדל, GMA Next-Gen SDK קושר מודעה במצב תמונה בתוך תמונה למסך המארח הנוכחי. ‫GMA Next-Gen SDK סוגר את המודעה כשהיררכיית התצוגות של המסך המארח כבר לא נמצאת בזיכרון. כדי שהמודעה תמשיך להיות גלויה אחרי שהמסך המארח יוסר מהזיכרון, צריך להגדיר את היקף ההצגה לאפליקציה:

Kotlin

private fun createApplicationScopedOptions(): PictureInPictureAdOptions {
  return PictureInPictureAdOptions.Builder()
    // Keeps the ad visible beyond the host screen's lifecycle.
    .setPresentationScope(PictureInPictureAdPresentationScope.APPLICATION)
    .build()
}

Java

private PictureInPictureAdOptions createApplicationScopedOptions() {
  return new PictureInPictureAdOptions.Builder()
      // Keeps the ad visible beyond the host screen's lifecycle.
      .setPresentationScope(PictureInPictureAdPresentationScope.APPLICATION)
      .build();
}

מידע נוסף מופיע במאמר בנושא הצגת המודעה בכל המסכים.

הגדרת קריאה חוזרת (callback) של אירוע מודעה

כדי לטפל באירועים במחזור החיים של מודעות בתמונה בתוך תמונה, צריך להגדיר את הקריאה החוזרת (callback) של האירוע במודעה לפני שמציגים אותה. הקריאה החוזרת הזו מדווחת על אירועים רגילים, כמו קליקים וחשיפות. בנוסף, פונקציית הקריאה החוזרת הזו מדווחת על אירועים ספציפיים של מצב 'תמונה בתוך תמונה', כמו מתי המודעה מוצגת או מוסתרת:

Kotlin

private fun setAdEventCallback(pipAd: PictureInPictureAd) {
  pipAd.adEventCallback =
    object : PictureInPictureAdEventCallback {
      override fun onAdShown() {
        Log.d(TAG, "Picture-in-Picture ad shown.")
      }

      override fun onAdHidden() {
        Log.d(TAG, "Picture-in-Picture ad hidden.")
      }

      override fun onAdImpression() {
        Log.d(TAG, "Picture-in-Picture ad recorded an impression.")
      }

      override fun onAdClicked() {
        Log.d(TAG, "Picture-in-Picture ad recorded a click.")
      }

      override fun onAdShowedFullScreenContent() {
        Log.d(TAG, "Picture-in-Picture ad showed full screen content.")
      }

      override fun onAdDismissedFullScreenContent() {
        Log.d(TAG, "Picture-in-Picture ad dismissed full screen content.")
      }

      override fun onAdFailedToShowFullScreenContent(
        fullScreenContentError: FullScreenContentError
      ) {
        Log.w(
          TAG,
          "Picture-in-Picture ad failed to show full screen content: $fullScreenContentError",
        )
      }

      override fun onAdPaid(value: AdValue) {
        Log.d(TAG, "Picture-in-Picture ad paid: ${value.valueMicros} ${value.currencyCode}")
      }
    }
}

Java

private void setAdEventCallback(@NonNull PictureInPictureAd pipAd) {
  pipAd.setAdEventCallback(
      new PictureInPictureAdEventCallback() {
        @Override
        public void onAdShown() {
          Log.d(TAG, "Picture-in-Picture ad shown.");
        }

        @Override
        public void onAdHidden() {
          Log.d(TAG, "Picture-in-Picture ad hidden.");
        }

        @Override
        public void onAdImpression() {
          Log.d(TAG, "Picture-in-Picture ad recorded an impression.");
        }

        @Override
        public void onAdClicked() {
          Log.d(TAG, "Picture-in-Picture ad recorded a click.");
        }

        @Override
        public void onAdShowedFullScreenContent() {
          Log.d(TAG, "Picture-in-Picture ad showed full screen content.");
        }

        @Override
        public void onAdDismissedFullScreenContent() {
          Log.d(TAG, "Picture-in-Picture ad dismissed full screen content.");
        }

        @Override
        public void onAdFailedToShowFullScreenContent(
            @NonNull FullScreenContentError fullScreenContentError) {
          Log.w(
              TAG,
              "Picture-in-Picture ad failed to show full screen content: "
                  + fullScreenContentError);
        }

        @Override
        public void onAdPaid(@NonNull AdValue value) {
          Log.d(
              TAG,
              "Picture-in-Picture ad paid: "
                  + value.getValueMicros()
                  + " "
                  + value.getCurrencyCode());
        }
      });
}

הסתרת המודעה

כדי להסיר את המודעה הצפה מהמסך, מפעילים את השיטה hide. השיטה הזו מפעילה את הקריאה החוזרת (callback) של האירוע ad hidden:

Kotlin

private fun hidePictureInPictureAd() {
  // Capture the ad reference saved from the onAdLoaded callback.
  val ad = pipAd
  if (ad != null) {
    ad.hide()
  } else {
    Log.d(TAG, "No ad to hide.")
  }
}

Java

private void hidePictureInPictureAd() {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    pipAd.hide();
  } else {
    Log.d(TAG, "No ad to hide.");
  }
}

מחיקת משאבי המודעות

כדי למנוע דליפות זיכרון, צריך להסיר את ההפניה לאובייקט המודעה כשהאפליקציה מסיימת להשתמש במודעה. לדוגמה, כשהאפליקציה לא מציגה יותר את המודעה או לא מנהלת איתה אינטראקציה. לגבי מודעות בהיקף מסך, צריך להסיר את ההפניה כשהאפליקציה מסירה את מסך המארח מהזיכרון. למודעות ברמת האפליקציה, שומרים את ההפניה למודעה בזמן שהמשתמש עובר בין המסכים, ומסירים את ההפניה כשהמשתמש סוגר את המודעה:

Kotlin

private fun cleanUpPictureInPictureAd() {
  pipAd?.destroy()
  pipAd = null
}

Java

private void cleanUpPictureInPictureAd() {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    pipAd.destroy();
    pipAd = null;
  }
}

המודעה תמשיך להיות גלויה בכל המסכים

כשמגדירים את היקף הצגת המצגת לאפליקציה, המודעה בתמונה בתוך תמונה נשארת גלויה גם כשהאפליקציה מסירה את מסך האירוח מהזיכרון. כדי שהמשתמש יוכל לקיים אינטראקציה עם המודעה או לסגור אותה כשהוא יוצא ממסך האפליקציה המארחת, האפליקציה צריכה לשמור על הגישה למודעה במצב 'תמונה בתוך תמונה'. מומלץ להחזיק את המודעה בסינגלטון ברמת האפליקציה או במנהל מצב משותף, ולא במשתנה מופע של מסך יחיד.

דוגמאות לאופן הצגת מודעה בכל המסכים מופיעות באפליקציות לדוגמה הבאות: