# 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](https://developers.google.com/admob/flutter/native?hl=es#platform_setup), con la única diferencia de utilizar `GoogleNativeAdFactory` en lugar de `NativeAdFactory` .

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

```kotlin
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:

```kotlin
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:

```dart
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:

```dart
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:

```dart
// 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
// El anuncio ha generado un ingreso
GoogleNativeAdEvent.REVENUE_PAID
```