Implementar anúncios picture-in-picture (Beta)

Selecione a plataforma: Android iOS

Os anúncios picture-in-picture são mostrados em uma janela flutuante que fica sobre o conteúdo na tela, como artigos, feeds ou gameplay. Esse formato permite que os usuários interajam com o app enquanto o anúncio permanecer visível. Para mostrar anúncios que não ocupam a tela inteira, escolha esse formato.

Este guia aborda como solicitar e mostrar anúncios picture-in-picture no seu app usando GMA Next-Gen SDK.

Antes de começar

Antes de continuar, faça o seguinte:

• Configure o GMA Next-Gen SDK.

• Instale a versão 1.4.0 ou mais recente do GMA Next-Gen SDK.

• Ative os anúncios de teste e use este ID do bloco de anúncios de teste: /21775744923/example/picture-in-picture

Carregar um anúncio

Para carregar um objeto PictureInPictureAd, crie uma solicitação de anúncio e chame o método 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);
        }
      });
}

Substitua AD_UNIT_ID pelo ID do seu bloco de anúncios.

Mostrar o anúncio

Para mostrar o anúncio picture-in-picture na tela, configure as respectivas opções e chame o método show. O exemplo abaixo define a posição padrão do anúncio e o escopo de apresentação para a tela:

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.");
  }
}

Definir a posição

Por padrão, o GMA Next-Gen SDK mostra um anúncio picture-in-picture no canto inferior direito da tela, quando aparece pela primeira vez, ou na última posição conhecida, se já tiver sido mostrado. Para personalizar onde o anúncio aparece, defina a posição nas opções de picture-in-picture. O exemplo abaixo define a posição na parte de cima do conteúdo no canto superior esquerdo da tela:

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

Para ver todas as posições disponíveis, consulte PictureInPictureAdPosition.

Definir o escopo da apresentação

Por padrão, o GMA Next-Gen SDK vincula um anúncio picture-in-picture à tela do host atual. O GMA Next-Gen SDK dispensa o anúncio quando a hierarquia de visualização da tela host não está mais na memória. Para manter o anúncio visível depois que a tela do host for removida da memória, defina o escopo de apresentação para o aplicativo:

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

Para mais informações, consulte Manter o anúncio visível em todas as telas.

Definir o callback do evento de anúncio

Para processar eventos de ciclo de vida de anúncios picture-in-picture, defina o callback de evento no anúncio antes de mostrá-lo. Esse callback informa eventos padrão, como cliques e impressões. Esse callback também informa eventos específicos do picture-in-picture, como quando o anúncio é mostrado ou ocultado:

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

Ocultar o anúncio

Para remover o anúncio flutuante da tela, chame o método hide. Esse método invoca o callback de evento de anúncio oculto:

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.");
  }
}

Limpar recursos de anúncio

Para evitar vazamentos de memória, remova a referência ao objeto de anúncio quando o app terminar de usá-lo. Por exemplo, quando o app não mostra mais o anúncio ou não interage mais com ele. Para anúncios com escopo de tela, remova a referência quando o app remover a tela host da memória. Para anúncios com escopo de app, mantenha a referência do anúncio enquanto o usuário navega pelas telas e descarte-a quando o usuário dispensar o anúncio:

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

Manter o anúncio visível em todas as telas

Quando você define o escopo de apresentação para o aplicativo, o anúncio picture-in-picture permanece visível mesmo quando o app remove a tela de hospedagem da memória. Para interagir com o anúncio ou dispensá-lo quando o usuário sair da tela host, o app precisa manter o acesso ao anúncio picture-in-picture. Recomendamos manter o anúncio em um singleton no nível do app ou em um gerenciador de estado compartilhado, em vez de uma variável de instância de tela única.

Para ver exemplos de como manter um anúncio visível em várias telas, consulte os seguintes apps de exemplo:

• Kotlin
• Java