ใช้โฆษณาการแสดงภาพซ้อนภาพ (เบต้า)

โฆษณาการแสดงภาพซ้อนภาพ (PIP) จะแสดงในหน้าต่างลอยที่อยู่ด้านบนของเนื้อหาบนหน้าจอ เช่น บทความ ฟีด หรือการเล่นเกม รูปแบบนี้ช่วยให้ผู้ใช้โต้ตอบกับแอปได้ขณะที่โฆษณายังคงมองเห็นได้ หากต้องการแสดงโฆษณาที่ไม่ใช้พื้นที่ทั้งหน้าจอ ให้เลือกรูปแบบนี้

คู่มือนี้ครอบคลุมการขอและแสดงโฆษณาการแสดงภาพซ้อนภาพในแอป โดยใช้ GMA Next-Gen SDK

ก่อนเริ่มต้น

ก่อนดำเนินการต่อ ให้ทำดังนี้

• ตั้งค่า GMA Next-Gen SDK

• ติดตั้ง GMA Next-Gen SDK เวอร์ชัน 1.4.0 ขึ้นไป

• เปิดใช้โฆษณาทดสอบ และใช้รหัสหน่วยโฆษณาทดสอบต่อไปนี้: /21775744923/example/picture-in-picture

โหลดโฆษณา

หากต้องการโหลด PictureInPictureAd ให้สร้างคำขอโฆษณาและเรียกใช้เมธอด 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 ด้วยรหัสหน่วยโฆษณา

แสดงโฆษณา

หากต้องการแสดงโฆษณาการแสดงภาพซ้อนภาพบนหน้าจอ ให้กำหนดค่าตัวเลือกการแสดงภาพซ้อนภาพและเรียกใช้เมธอด 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 ของเหตุการณ์ในโฆษณาก่อนที่จะแสดง 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 ของเหตุการณ์โฆษณาที่ซ่อนอยู่

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

ให้โฆษณายังคงมองเห็นได้ในทุกหน้าจอ

เมื่อกำหนดขอบเขตการแสดงผลเป็นแอปพลิเคชัน โฆษณาการแสดงภาพซ้อนภาพจะยังคงมองเห็นได้แม้ว่าแอปจะนำหน้าจอโฮสต์ออกจากหน่วยความจำแล้วก็ตาม หากต้องการโต้ตอบกับโฆษณาหรือปิดโฆษณาเมื่อผู้ใช้ออกจากหน้าจอโฮสต์ แอปจะต้องเก็บสิทธิ์เข้าถึงโฆษณาการแสดงภาพซ้อนภาพไว้ เราขอแนะนำให้เก็บโฆษณาไว้ใน Singleton ระดับแอปหรือตัวจัดการสถานะที่แชร์ แทนที่จะเก็บไว้ในตัวแปรอินสแตนซ์ของหน้าจอเดียว

ดูตัวอย่างวิธีให้โฆษณายังคงมองเห็นได้ในทุกหน้าจอได้ที่แอปตัวอย่างของเรา

• Kotlin
• Java