Native Express Ads

You can use AdMob to display Native Express ads in your C++ apps. Native Express ads are similar to banners in that they're rectangular ads; however, they provide you with more control over the ad's presentation details (things like image sizes, fonts, colors, and so on) by uploading a CSS template for your ad unit. This approach helps you display ads that look natural in your app.

This guide shows you how to create, request, and display a Native Express ad.

Prerequisites

If this is your first time setting up AdMob and Firebase in your C++ app, check out the AdMob C++ Get Started guide for step-by-step instructions on integrating your app with AdMob and Firebase.

Interact with the Google Mobile Ads SDK

Set up the ad unit IDs

When writing C++ code that is supported on both iOS and Android, you may need to use preprocessor directives to define code that should only be compiled on a specific OS. For displaying Native Express ads on both iOS and Android, it is recommended that you create a new ad unit ID for each OS and each unique ad placement. The following ad unit IDs were created for iOS and Android and are configured to always serve test ads:

#if defined(__ANDROID__)
// Android Native Express ad unit ID.
const char* kNativeExpressAdUnit = "ca-app-pub-3940256099942544/1072772517";
#else
// iOS Native Express ad unit ID.
const char* kNativeExpressAdUnit = "ca-app-pub-3940256099942544/2562852117";
#endif

Set up a Native Express ad view

Add the following header to your app's C++ code:

#include "firebase/admob/native_express_ad_view.h"

Declare and instantiate a NativeExpressAdView object:

firebase::admob::NativeExpressAdView* ad_view;
ad_view = new firebase::admob::NativeExpressAdView();

Rather than forcing you to choose between fixed ad sizes, Native Express ads offer several template sizes, each with a range of height and width values, to better fit the layout of your app. See Choose a size for more information on the template sizes.

Create an AdSize and initialize the Native Express ad view:

firebase::admob::AdSize ad_size;
ad_size.ad_size_type = firebase::admob::kAdSizeStandard;
ad_size.width = 320;
ad_size.height = 220;
// my_ad_parent is a reference to an iOS UIView or an Android Activity.
// This is the parent UIView or Activity of the Native Express ad view.
ad_view->Initialize(static_cast<firebase::admob::AdParent>(my_ad_parent), kNativeExpressAdUnit, ad_size);

Request a Native Express ad

In order to request a Native Express ad, you will need to create an AdRequest struct. See Create an AdMob ad request for an example on targeting and customizing ad requests.

After creating the ad request, pass the AdRequest struct to the NativeExpressAdView::LoadAd() method:

ad_view->LoadAd(my_ad_request);

Note: A single `AdRequest` struct can be reused for multiple calls.

Use Futures to monitor the completion status of method calls

Futures provide you with a way to determine the completion status of your previous NativeExpressAdView method calls. When a call is made to the NativeExpressAdView::Initialize() method, for example, a new Future is created and returned. Apps can poll the status of the Future to determine if the initialization of the NativeExpressAdView has completed. Once the Future is complete, you are ready to request the Native Express ad by calling the NativeExpressAdView::LoadAd() method.

if (ad_view->InitializeLastResult().status() ==
    firebase::kFutureStatusComplete &&
    ad_view->InitializeLastResult().error() ==
    firebase::admob::kAdMobErrorNone) {
  ad_view->LoadAd(my_ad_request);
}

Most methods in the NativeExpressAdView class have a corresponding "last result" method that apps can use to retrieve the most recent Future for a given action. The NativeExpressAdView::LoadAd() method, for example, has a corresponding method called NativeExpressAdView::LoadAdLastResult(). It returns a Future that can be used to check the status of the last call to the NativeExpressAdView::LoadAd() method. If its status is complete and its error code is firebase::admob::kAdMobErrorNone, then you're ready to make the Native Express ad view visible by calling the NativeExpressAdView::Show() method:

if (ad_view->LoadAdLastResult().status() ==
    firebase::kFutureStatusComplete &&
    ad_view->LoadAdLastResult().error() ==
    firebase::admob::kAdMobErrorNone) {
  ad_view->Show();
}

You can also register callbacks to be invoked when a Future is completed. This code snippet uses a function pointer for the callback:

// Initialize the Native Express ad.
ad_view->Initialize(static_cast<firebase::admob::AdParent>(my_ad_parent), kNativeExpressAdUnit, ad_size);

// Registers the OnCompletion callback. user_data is a pointer that is passed verbatim
// to the callback as a void*. In this example, we pass the Native Express ad object to be
// used in the OnCompletionCallback function.
ad_view->InitializeLastResult().OnCompletion(OnCompletionCallback, ad_view /*user_data*/);

// The OnCompletion callback function.
static void OnCompletionCallback(const firebase::Future<void>& future, void* user_data) {
  // Called when the Future is completed for the last call to the NativeExpressAdView::Initialize()
  // method. If the error code is firebase::admob::kAdMobErrorNone, then you're ready to
  // load the Native Express ad.
  firebase::admob::NativeExpressAdView* ad_view = static_cast<firebase::admob::NativeExpressAdView*>(user_data);
  if (future.error() == firebase::admob::kAdMobErrorNone) {
    ad_view->LoadAd(my_ad_request);
  }
}

Use a listener to be notified of ad lifecycle events

AdMob provides an abstract NativeExpressAdView::Listener class that you can extend and pass to the NativeExpressAdView::SetListener() method in order to be notified of changes to a Native Express ad view's presentation state and bounding box.

Below is an example implementation of a class that extends the NativeExpressAdView::Listener class:

class ExampleNativeExpressAdViewListener
    : public firebase::admob::NativeExpressAdView::Listener {
public:
  ExampleNativeExpressAdViewListener() {}

  void OnPresentationStateChanged(
      firebase::admob::NativeExpressAdView* ad_view,
      firebase::admob::NativeExpressAdView::PresentationState state) override {
    // This method gets called when the Native Express ad view's
    // presentation state changes.
  }

  void OnBoundingBoxChanged(
      firebase::admob::NativeExpressAdView* ad_view,
      firebase::admob::BoundingBox box) override {
    // This method gets called when the Native Express ad view's bounding
    // box changes.
  }
};

What's next

Learn how to monetize your app with AdMob and make sure to replace the test ad unit IDs used in this guide with your own ad unit IDs. Native Express ad units are created at apps.admob.com.

For an overview of Native Express ads and for more information on choosing a template size for your ad units, see the Overview of native ads express help center article.

Send feedback about...

AdMob by Google
AdMob by Google