Interface personalizada com o SDK do IMA para Android

Este guia mostra como implementar sua própria interface personalizada usando o SDK do IMA para Android. Para fazer isso, você precisa desativar a interface padrão, configurar uma nova interface personalizada e preencher a nova interface com as informações do anúncio recebidas do SDK.

Observação: sua conta do Google Ad Manager precisa estar ativada para usar esse recurso. Consulte seu gerente de contas para mais informações.

Observação :este exemplo se baseia no BasicExample do IMA para Android.

Desativar a interface do anúncio

Para mostrar uma interface personalizada, primeiro você deve desativar a interface de anúncio default. Para fazer isso, chame AdsRenderingSettings.setDisableUi() e transmita AdsRenderingSettings para AdsManager.init():

MyActivity.java

ImaSdkFactory mSdkFactory = ImaSdkFactory.getInstance();
AdsManager mAdsManager;

@Override
public void onAdsManagerLoaded(AdsManagerLoadedEvent adsManagerLoadedEvent) {
    mAdsManager = adsManagerLoadedEvent.getAdsManager();

    ...
    AdsRenderingSettings settings = mSdkFactory.createAdsRenderingSettings();
    settings.setDisableUi(true);
    mAdsManager.init(settings);
}

Em seguida, sempre que você precisar decidir se quer mostrar a interface personalizada, confira se há um anúncio e chame Ad.isUiDisabled() para conferir se a interface de anúncio padrão foi desativada.

Mostrar interface personalizada

Depois que a interface padrão for desativada, a próxima etapa será mostrar uma interface de anúncio personalizado. Para este exemplo, adicione uma nova RelativeLayout ao layout do player de vídeo. Em seguida, mostre esse layout quando um anúncio estiver em reprodução e oculte-o quando nenhum anúncio estiver em reprodução.

Adicione o código abaixo ao arquivo de layout do fragmento:

fragment_video.xml

<com.google.ads.interactivemedia.v3.samples.samplevideoplayer.SampleVideoPlayer
    android:id="@+id/sampleVideoPlayer"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
<RelativeLayout
        android:id="@+id/customUi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="invisible">
                <TextView
                    android:id="@+id/adCounter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@android:color/holo_green_light"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentLeft="true"
                    android:text="@string/ad_counter" />
                <Button
                  android:id="@+id/learnMoreButton"
                  android:background="@android:color/holo_green_light"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentTop="true"
                  android:text="@string/learn_more"
                  android:layout_alignParentRight="true" />
                <Button
                  android:id="@+id/skipButton"
                  android:background="@android:color/holo_green_light"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_alignParentBottom="true"
                  android:text="@string/skip_ad"
                  android:enabled="false"
                  android:layout_alignParentRight="true" />
</RelativeLayout>

Em seguida, adicione o código ao Activity para usar a interface personalizada. Para atualizar a IU, crie um Handler de timer e um Runnable para ser executado nele.

MyActivity.java

// The view containing the custom UI.
private View mCustomUi;
// The timer handler.
private Handler mTimerHandler = new Handler();

// The Runnable that runs your custom UI update loop.
private Runnable mTimerRunnable = new Runnable() {
    @Override
    public void run() {
        updateCustomUi();
        mTimerHandler.postDelayed(this, 500);
    }
};

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
...
    mCustomUi = rootView.findViewById(R.id.customUi);
    mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);
}

@Override
public void onAdEvent(AdEvent adEvent) {
    ...
    switch (adEvent.getType()) {
        ...
            case STARTED:
            // Start your update loop.
            mTimerHandler.post(mTimerRunnable);
            Break;
                ...
        case COMPLETED:
            mCustomUi.setVisibility(View.INVISIBLE);
            mTimerHandler.removeCallbacks(mTimerRunnable);
            ...
    }
}

@Override
public void onPause() {
...
    // Stop ad UI update loop.
    mTimerHandler.removeCallbacks(mTimerRunnable);
}

@Override
Public void onResume() {
...
    // Start ad UI update loop.
    mTimerHandler.post(mTimerRunnable);
}

Contador de anúncios e botão "Pular"

Agora defina a função updateCustomUi() para preencher a interface com informações do anúncio. Os detalhes variam de acordo com o formato do anúncio, mas geralmente você inclui o contador de anúncios e um botão "Pular" ou "Pular" se o anúncio for pulável. Adicione o seguinte:

MyActivity.java

private void updateCustomUi() {
    // Runs from the update loop to update the custom UI.
    Ad ad = mAdsManager.getCurrentAd();
    if (ad != null && ad.isUiDisabled()) {
        // Show the UI.
        Log.i(LOGTAG, "UI disabled, show custom UI!");
        AdPodInfo podInfo = ad.getAdPodInfo();
        VideoProgressUpdate update = mAdsManager.getAdProgress();
        SimpleDateFormat format = new SimpleDateFormat("mm:ss", Locale.US);

        // Handle ad counter.
        String adProgress = format.format(
                (update.getDuration() - update.getCurrentTime()) * 1000);
        String adUiString = String.format(
                Locale.US, "Ad %d of %d (%s)", podInfo.getAdPosition(),
                podInfo.getTotalAds(), adProgress);
        mAdCounterUi.setText(adUiString);

        // Handle skippable ads.
        if (ad.isSkippable()) {
            if (update.getCurrentTime() >= ad.getSkipTimeOffset()) {
                // Allow skipping.
                mSkipButton.setText(getString(R.string.skip_ad));
                mSkipButton.setEnabled(true);
            } else {
                String skipString = String.format(
                        Locale.US, "You can skip this ad in %d",
                        (int) (ad.getSkipTimeOffset() -
                                update.getCurrentTime()));
                mSkipButton.setText(skipString);
                mSkipButton.setEnabled(false);
            }
            mSkipButton.setVisibility(View.VISIBLE);
        } else {
            mSkipButton.setVisibility(View.INVISIBLE);
        }
        mCustomUi.setVisibility(View.VISIBLE);
        mCustomUi.bringToFront();
    } else {
        // Hide the UI.
        mCustomUi.setVisibility(View.INVISIBLE);
        mTimerHandler.removeCallbacks(mTimerRunnable);
    }
}

No código acima, depois de verificar se há um anúncio e chamar Ad.isUiDisabled() para verificar se a interface do anúncio padrão foi desativada, chame Ad.getAdPodInfo() e AdsManager.getAdProgress() para encontrar a posição do anúncio no conjunto e o progresso dele. Para anúncios puláveis, mostre um contador de ignorados se você ainda não puder pular o anúncio. Caso contrário, mostre um botão de pular. Confira um resumo de informações comuns de anúncios e chamadas associadas:

Informações	Call
Anúncio atual no conjunto	Ad.getAdPodInfo().getAdPosition()
Total de anúncios no conjunto	Ad.getPodInfo().getTotalAds()
É pulável de acordo com o anúncio	Ad.isSkippable()
Segundos até que o anúncio possa ser ignorado	Ad.getSkipTimeOffset() - AdsManager.getAdProgress().getCurrentTime()
Segundos restantes no anúncio	(AdsManager.getAdProgress().getDuration() - AdsManager.getAdProgress().getCurrentTime()) * 1000

O clique no botão Pular anúncio faz com que o anúncio seja ignorado. Portanto, configure essa opção junto com o botão Saiba mais:

MyActivity.java

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
...
mCustomUi = rootView.findViewById(R.id.customUi);
mAdCounterUi = (TextView) rootView.findViewById(R.id.adCounter);

// Set up the 'learn more' button handler for the custom UI.
mLearnMoreButton = (Button) rootView.findViewById(R.id.learnMoreButton);
mLearnMoreButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        // Only works if the UI has been disabled.
        mAdsManager.clicked();
    }
});

// Set up the skip button handler for the custom UI.
mSkipButton = (Button) rootView.findViewById(R.id.skipButton);
mSkipButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        mAdsManager.skip();
    }
});

A interface precisa ser desativada para que o AdsManager.clicked() funcione.

Solução de problemas

Você tem uma tag de amostra ativada para desativar a interface de anúncios?

É possível copiar o URL desta tag de amostra e colar na implementação do IMA.

Não consigo desativar a interface padrão.

Confira se você chame AdsRenderingSettings.setDisableUi() e o transmita para AdsManager. Verifique se Ad.isUiDisabled() retorna true. Além disso, sua rede precisa estar ativada no Ad Manager para desativar uma interface do anúncio. Se estiver ativado, seu VAST terá um Extension semelhante a este:

<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>

Se você ainda tiver problemas, verifique com seu gerente de contas se a ativação foi feita. Alguns tipos de anúncios exigem uma IU específica. Esses anúncios retornam com um valor <UiHideable> igual a 0. Se você encontrar isso, sua equipe de tráfego precisará fazer alterações para garantir que esses tipos de anúncios não sejam veiculados.