SDK Documentation
HomeBlogSign up
Español
Español
  • 🏠Inicio
  • 🧪Ad Units de prueba
  • Privacidad
    • ✅Google Data Safety
  • Android SDK
    • ⌨️Integración del SDK
      • App Open
      • Banner
      • Interstitial
      • Rewarded
      • Native (Google)
      • Targeting
    • 🙎Consentimiento del usuario
    • 🔒Privacidad
    • 🛠️ProGuard
  • iOS SDK
    • ⌨️Integración del SDK
      • App Open
      • Banner
      • Interstitial
      • Rewarded
      • Native (Google)
    • 🙍Consentimiento del usuario
    • 🔓Privacidad
  • Unity SDK
    • ⌨️Integración del SDK
      • App Open
      • Banner
      • Interstitial
      • Rewarded
      • Targeting
    • 🙎Consentimiento del usuario
    • 🔓Privacidad
  • Flutter SDK
    • ⌨️Integración del SDK
      • App Open
      • Banner
      • Interstitial
      • Rewarded
      • Native (Google)
      • Targeting
    • 🙎Consentimiento del usuario
    • 🔓Privacidad
  • React Native
    • ⌨️Integración del SDK
      • App Open
      • Banner
      • Interstitial
      • Rewarded
      • Targeting
    • 🙎Consentimiento del usuario
    • 🔓Privacidad
  • WEB SDK
    • ⌨️Integración del SDK
Con tecnología de GitBook
En esta página
  • Integración
  • Eventos del listener
  1. Flutter SDK
  2. Integración del SDK

Native (Google)

AnteriorRewardedSiguienteTargeting

Última actualización hace 1 año

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 , 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
⌨️
documentación