Native (Google)

Los anuncios nativos son un tipo de anuncio que puede ser mostrado con el mismo estilo visual del resto de la app, lo que permite una integración natural y no-intrusiva con la interfaz de usuario.

Actualmente, desde Wortise ofrecemos la posibilidad de utilizar los anuncios nativos de la plataforma de anuncios de Google, de una manera directa y sencilla.

Integración

En primer lugar, es necesario crear una clase Java (o Kotlin) que implemente un objeto GoogleNativeAdFactory. Este objeto contendrá un método que recibirá un NativeAd de Google y devolverá un objeto NativeAdView con al anuncio nativo renderizado.

Este paso es muy similar al explicado por Google en su propia documentación, con la única diferencia de utilizar GoogleNativeAdFactory en lugar de NativeAdFactory .

A continuación, se muestra un ejemplo de implementación de esta clase:

import android.graphics.Color
import android.view.LayoutInflater
import android.widget.TextView
import com.google.android.gms.ads.nativead.NativeAd
import com.google.android.gms.ads.nativead.NativeAdView

class NativeAdFactoryExample(private val layoutInflater: LayoutInflater)
    : GoogleNativeAdFactory {

    override fun createNativeAd(nativeAd: NativeAd): NativeAdView {
        val adView = layoutInflater.inflate(R.layout.my_native_ad, null) as NativeAdView
        
        val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
        val bodyView     = adView.findViewById<TextView>(R.id.ad_body)
    
        headlineView.setText(nativeAd.headline)

        bodyView.setText(nativeAd.body)
    
        adView.setBackgroundColor(Color.YELLOW)
        adView.setNativeAd(nativeAd)
        adView.setBodyView(bodyView)
        adView.setHeadlineView(headlineView)
        
        return adView
    }
}

Una vez implementada, hay que registrar esta clase dentro de MainActivity como en el siguiente ejemplo:

import com.wortise.ads.flutter.natives.GoogleNativeAdManager
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity: FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        GoogleNativeAdManager.registerAdFactory(
            "test-factory", NativeAdFactoryExample(layoutInflater))
    }

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)

        GoogleNativeAdManager.unregisterAdFactory("test-factory")
    }
}

En este ejemplo, test-factory es el identificador que se le asigna al objeto GoogleNativeAdFactory y que debe ser utilizado más tarde al crear un anuncio nativo en Flutter.

A continuación, para solicitar un anuncio nativo, es necesario realizar una integración por código como la siguiente:

import 'package:wortise/google_native_ad.dart';

GoogleNativeAd _interstitialAd;

// Se crea un native

// Es necesario especificar el ID del objeto "GoogleNativeAdFactory" indicado
// anteriormente
_nativeAd = GoogleNativeAd('test-native', 'test-factory', (event, args) {
  // Este listener será invocado cuando se produzca algún evento
});

// Se solicita la carga de un anuncio
await _nativeAd.loadAd();

Una vez el anuncio nativo ha sido cargado con éxito, es necesario crear un widget de tipo AdWidget que debe ser añadido a la interfaz de la app.

Este paso se puede implementar como se muestra en el siguiente ejemplo:

import 'package:wortise/ad_widget.dart';
import 'package:wortise/google_native_ad.dart';

GoogleNativeAd? _nativeAd;

AdWidget? _nativeWidget;
  
// Se crea un native
_nativeAd = GoogleNativeAd('test-native', 'test-factory', (event, args) {
  // Se recibe un evento indicando una carga exitosa
  if (event == GoogleNativeAdEvent.LOADED) {
    // Se crea un widget "AdWidget" con el anuncio nativo
    // Este widget se debe añadir a la interfaz de la app para mostrar el anuncio
    setState(() => _nativeWidget = AdWidget(ad: _nativeAd!));
  }
});

Eventos del listener

El listener asignado a un GoogleNativeAd puede recibir los siguientes eventos:

// El anuncio ha sido clickeado
GoogleNativeAdEvent.CLICKED
// El anuncio no se ha podido cargar
GoogleNativeAdEvent.FAILED_TO_LOAD
// El anuncio ha generado una impresión
GoogleNativeAdEvent.IMPRESSION
// El anuncio ha sido cargado
GoogleNativeAdEvent.LOADED