Native (Google)

The native ads are a kind of ad that can be shown using the same visual style like the rest of the app, which allows a natural and non-intrusive integration with the user interface.

Currently, Wortise provides the possibility of use the native ads from Google's ad platform, in a simple and direct way.

Integration

First of all, it is needed to create a Java (or Kotlin) class that implements a GoogleNativeAdFactory object. This object will contain a method that will receive a NativeAd from Google and will return a NativeAdView object with the rendered native ad.

This step is very similar to the one explained by Google in their own documentation, with the only difference of using GoogleNativeAdFactory instead of NativeAdFactory.

Below we show an implementation example of this class:

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
    }
}

Once implemented, this class has to be registered inside the MainActivity as in the following example:

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")
    }
}

In this example, test-factory is the identifier that is assigned to the GoogleNativeAdFactory object, which should to be used later when creating a native ad in Flutter.

Next, to request a native ad, it is needed to make a code integration like the following:

import 'package:wortise/google_native_ad.dart';

GoogleNativeAd _interstitialAd;

// Create a native

// It is needed to specifiy the ID of the "GoogleNativeAdFactory" object that
// was set before
_nativeAd = GoogleNativeAd('test-native', 'test-factory', (event, args) {
  // This listener will be invoked when an event happens
});

// Request an ad
await _nativeAd.loadAd();

Once the native ad has been successfully loaded, it is needed to create an AdWidget widget that must be added to the app's interface.

This step can be implemented like in the following example:

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

GoogleNativeAd? _nativeAd;

AdWidget? _nativeWidget;
  
// Create a native
_nativeAd = GoogleNativeAd('test-native', 'test-factory', (event, args) {
  // An event is recevied to notify a successful load
  if (event == GoogleNativeAdEvent.LOADED) {
    // Create an "AdWidget" widget with the native ad
    // This widget must be added to the app's interface to display the ad
    setState(() => _nativeWidget = AdWidget(ad: _nativeAd!));
  }
});

Listener events

The assigned listener to an GoogleNativeAd can receive the following events:

// The ad has been clicked
GoogleNativeAdEvent.CLICKED
// The ad could not be loaded
GoogleNativeAdEvent.FAILED_TO_LOAD
// The ad has generated an impression
GoogleNativeAdEvent.IMPRESSION
// The ad has been loaded
GoogleNativeAdEvent.LOADED