Os SDKs do IMA facilitam a integração de anúncios multimídia nos seus sites e apps. Os SDKs do IMA podem solicitar anúncios de qualquer servidor compatível com VAST e gerenciar a reprodução de anúncios nos seus aplicativos. Com os SDKs do lado do cliente do IMA, você mantém o controle da reprodução do vídeo do conteúdo, enquanto o SDK manipula a reprodução do anúncio. Os anúncios são reproduzidos em um player de vídeo separado, posicionado na parte superior do player de conteúdo do app.
Este guia demonstra como integrar o SDK do IMA a um projeto vazio do Android Studio usando a extensão IMA do ExoPlayer (em inglês). Para ver ou acompanhar uma integração de amostra concluída, faça o download do BasicExample no GitHub.
Visão geral do IMA do lado do cliente
A implementação do lado do cliente do IMA envolve quatro componentes principais do SDK, que são demonstrados neste guia:
AdDisplayContainer: um objeto de contêiner em que os anúncios são renderizados.AdsLoader: um objeto que solicita anúncios e manipula eventos de respostas de solicitações de anúncios. Instancie somente um carregador de anúncios, que pode ser reutilizado durante a vida útil do aplicativo.AdsRequest: um objeto que define uma solicitação de anúncios. As solicitações de anúncios especificam o URL da tag de anúncio VAST, bem como parâmetros adicionais, como dimensões de anúncio.AdsManager: um objeto que contém a resposta à solicitação de anúncio, controla a reprodução do anúncio e detecta os eventos de anúncio acionados pelo SDK.
Pré-requisitos
Antes de começar, você precisa do Android Studio 3.0 ou versão posterior.
1. Criar um novo projeto do Android Studio
Para criar seu projeto do Android Studio, siga estas etapas:
- Inicie o Android Studio.
- Selecione Iniciar um novo projeto do Android Studio.
- Na página Choose your project, selecione o modelo Empty Activity.
- Clique em Próxima.
- Na página Configure your project, dê um nome ao projeto e selecione Java como a linguagem.
- Clique em Finish.
2. Adicionar a extensão IMA do ExoPlayer ao seu projeto
Primeiro, no arquivo build.gradle no nível do aplicativo, adicione importações à extensão à seção de dependências. Devido ao tamanho da extensão IMA do ExoPlayer, implemente e ative o multidex aqui. Isso é necessário para apps com minSdkVersion definido como 20 ou menos.
Além disso, adicione um novo compileOptions para especificar as informações de compatibilidade da versão do Java.
android {
compileSdkVersion 30
compileOptions {
sourceCompatibility JavaVersion.VERSION_11
targetCompatibility JavaVersion.VERSION_11
}
}
defaultConfig {
applicationId "com.google.ads.interactivemedia.v3.samples.videoplayerapp"
minSdkVersion 16
targetSdkVersion 30
multiDexEnabled true
versionCode 1
versionName "1.0"
}
...
}
dependencies {
implementation 'androidx.multidex:multidex:2.0.1'
implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'com.google.android.exoplayer:exoplayer-core:2.18.5'
implementation 'com.google.android.exoplayer:exoplayer-ui:2.18.5'
implementation 'com.google.android.exoplayer:extension-ima:2.18.5'
...
}
Adicione as permissões do usuário exigidas pelo SDK do IMA para solicitar anúncios.
app/src/main/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.project name">
<!-- Required permissions for the IMA SDK -->
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
...
</manifest>
3. Criar o contêiner da IU do anúncio
Crie a visualização a ser usada como a ExoPlayer PlayerView criando um objeto StyledPlayerView com um ID apropriado. Altere também androidx.constraintlayout.widget.ConstraintLayout para LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.exoplayer2.ui.StyledPlayerView
android:id="@+id/player_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
4. Adicione o URL de conteúdo e o URL de tag de anúncio à solicitação de anúncios
Adicione entradas a strings.xml para armazenar o URL de conteúdo e o URL da tag de anúncio VAST.
<resources>
<string name="app_name">Your_Project_Name</string>
<string name="content_url"><![CDATA[https://storage.googleapis.com/gvabox/media/samples/stock.mp4]]></string>
<string name="ad_tag_url"><![CDATA[https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=]]></string>
</resources>
5. Importar a extensão IMA do ExoPlayer
Adicione as declarações de importação para a extensão ExoPlayer. Em seguida, atualize a classe MainActivity para estender Activity adicionando variáveis particulares para PlayerView, SimpleExoPlayer e ImaAdsLoader.
import android.app.Activity;
import android.net.Uri;
import android.os.Bundle;
import androidx.multidex.MultiDex;
import com.google.android.exoplayer2.ExoPlayer;
import com.google.android.exoplayer2.MediaItem;
import com.google.android.exoplayer2.ext.ima.ImaAdsLoader;
import com.google.android.exoplayer2.source.DefaultMediaSourceFactory;
import com.google.android.exoplayer2.source.MediaSourceFactory;
import com.google.android.exoplayer2.ui.StyledPlayerView;
import com.google.android.exoplayer2.upstream.DataSource;
import com.google.android.exoplayer2.upstream.DefaultDataSourceFactory;
import com.google.android.exoplayer2.util.Util;
...
public class MainActivity extends Activity {
private StyledPlayerView playerView;
private ExoPlayer player;
private ImaAdsLoader adsLoader;
}
6. Criar uma instância adsLoader
Substitua o método onCreate e adicione as atribuições de variáveis necessárias para criar um novo objeto adsLoader com o URL da tag de anúncio.
...
public class MainActivity extends Activity {
private StyledPlayerView playerView;
private ExoPlayer player;
private ImaAdsLoader adsLoader;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
MultiDex.install(this);
playerView = findViewById(R.id.player_view);
// Create an AdsLoader.
adsLoader = new ImaAdsLoader.Builder(/* context= */ this).build();
}
}
7. Inicializar e liberar o player
Adicione métodos para inicializar e liberar o player. No método de inicialização, crie o SimpleExoPlayer. Em seguida, crie o AdsMediaSource
e defina-o para o player.
public class MainActivity extends Activity {
...
private void releasePlayer() {
adsLoader.setPlayer(null);
playerView.setPlayer(null);
player.release();
player = null;
}
private void initializePlayer() {
// Set up the factory for media sources, passing the ads loader and ad view providers.
DataSource.Factory dataSourceFactory = new DefaultDataSource.Factory(this);
MediaSourceFactory mediaSourceFactory =
new DefaultMediaSourceFactory(dataSourceFactory)
.setAdsLoaderProvider(unusedAdTagUri -> adsLoader)
.setAdViewProvider(playerView);
// Create an ExoPlayer and set it as the player for content and ads.
player = new ExoPlayer.Builder(this).setMediaSourceFactory(mediaSourceFactory).build();
playerView.setPlayer(player);
adsLoader.setPlayer(player);
// Create the MediaItem to play, specifying the content URI and ad tag URI.
Uri contentUri = Uri.parse(getString(R.string.content_url));
Uri adTagUri = Uri.parse(getString(R.string.ad_tag_url));
MediaItem mediaItem =
new MediaItem.Builder()
.setUri(contentUri)
.setAdsConfiguration(new MediaItem.AdsConfiguration.Builder(adTagUri).build())
.build();
// Prepare the content and ad to be played with the SimpleExoPlayer.
player.setMediaItem(mediaItem);
player.prepare();
// Set PlayWhenReady. If true, content and ads will autoplay.
player.setPlayWhenReady(false);
}
}
8. Processar eventos do jogador
Por fim, crie callbacks para os eventos de ciclo de vida do jogador:
onStartonResumeonStoponPauseonDestroy
public class MainActivity extends Activity {
private PlayerView playerView;
private SimpleExoPlayer player;
private ImaAdsLoader adsLoader;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
playerView = findViewById(R.id.player_view);
// Create an AdsLoader with the ad tag url.
adsLoader = new ImaAdsLoader(this, Uri.parse(getString(R.string.ad_tag_url)));
}
@Override
public void onStart() {
super.onStart();
//
if (Util.SDK_INT > 23) {
initializePlayer();
if (playerView != null) {
playerView.onResume();
}
}
}
@Override
public void onResume() {
super.onResume();
if (Util.SDK_INT <= 23 || player == null) {
initializePlayer();
if (playerView != null) {
playerView.onResume();
}
}
}
@Override
public void onPause() {
super.onPause();
if (Util.SDK_INT <= 23) {
if (playerView != null) {
playerView.onPause();
}
releasePlayer();
}
}
@Override
public void onStop() {
super.onStop();
if (Util.SDK_INT > 23) {
if (playerView != null) {
playerView.onPause();
}
releasePlayer();
}
}
@Override
protected void onDestroy() {
super.onDestroy();
adsLoader.release();
}
...
}
Pronto! Agora você está solicitando e exibindo anúncios com o SDK do IMA. Para saber mais sobre outros recursos do SDK, consulte os outros guias ou as amostras no GitHub.