Native Banner Ads in Unity

The native banner ad API allows you to build a customized experience for showing a native ad without the advertiser's creative assets, such as image, video, or carousel content. Similar to native ads, you will be able to construct a custom view where the ad is shown. Unlike banner ads, native banner ad API provides a native layout experience so you have full control of customizing the layout for components inside the ad.

In this guide we will implement the following native banner ad placement. You will create a native banner ad with the following components:

View #1: AdChoices Icon

View #2: Sponsored Label

View #3: Ad Icon

View #4: Ad Title

View #5: Social Context

View #6: Call-to-Action button




Native Banner Ad Steps

Step 1: Requesting a Native Banner Ad

Step 2: Creating your Native Banner Ad Layout

Step 3: Populating your Layout Using the Ad's Metadata

Step 1: Requesting a Native Banner Ad

The first step toward displaying a native banner ad is to create an NativeBannerAd object in a C# script attached to a GameObject.

...
using AudienceNetwork;
...
public class NativeBannerAdTest : MonoBehaviour
{
    private NativeBannerAd nativeBannerAd;

    // UI elements in scene
    [Header("Text:")]
    public Text advertiserName;
    public Text sponsored;
    public Text socialContext;
    [Header("Images:")]
    public GameObject iconImage;
    [Header("Buttons:")]
    // This doesn't have be a button - it can also be an image
    public Button callToActionButton;
    [Header("Ad Choices:")]
    public AdChoices adChoices;

    ...

    public void LoadAd()
    {
        if (this.nativeBannerAd != null) {
            this.nativeBannerAd.Dispose();
        }

        // Create a native ad request with a unique placement ID (generate your own on the Facebook app settings).
        // Use different ID for each ad placement in your app.
        this.nativeBannerAd = new AudienceNetwork.NativeBannerAd("YOUR_PLACEMENT_ID");

        // Wire up GameObject with the native banner ad. The game object should be a child of the canvas.
        nativeBannerAd.RegisterGameObject(gameObject);

        // Set delegates to get notified on changes or when the user interacts with the ad.
        nativeBannerAd.NativeAdDidLoad = (delegate() {
            // Register game objects for interactions.
            // IconImage will be used for impression logging.
            // CallToActionButton will be used for click logging.
            nativeBannerAd.RegisterGameObjectsForInteraction((RectTransform)iconImage.transform,
                    (RectTransform)callToActionButton.transform);
            Debug.Log("Native banner ad loaded.");
            adChoices.SetAd(nativeBannerAd);
            advertiserName.text = nativeBannerAd.AdvertiserName;
            sponsored.text = nativeBannerAd.SponsoredTranslation;
            socialContext.text = nativeBannerAd.SocialContext;
            callToActionButton.GetComponentInChildren<Text>().text = nativeBannerAd.CallToAction;
        });
        nativeBannerAd.NativeAdDidDownloadMedia = (delegate() {
            Debug.Log("Native banner ad media downloaded");
        });
        nativeBannerAd.NativeAdDidFailWithError = (delegate(string error) {
            Debug.Log("Native banner ad failed to load with error: " + error);
        });
        nativeBannerAd.NativeAdWillLogImpression = (delegate() {
            Debug.Log("Native banner ad logged impression.");
        });
        nativeBannerAd.NativeAdDidClick = (delegate() {
            Debug.Log("Native banner ad clicked.");
        });

        // Initiate a request to load an ad.
        nativeBannerAd.LoadAd();

        Debug.Log("Native banner ad loading...");
    }
    ...
}

We will be coming back later to add code to the NativeAdDidLoad callback.

Step 2: Creating your Native Banner Ad Layout

The next step is to extract the ad metadata and use its properties to build your customized native UI.

Please consult our guidelines for native ads when designing native banner ads in your app.

In your scene or Prefab, you can create a GameObject as a container for the native ad, and add the elements mentioned in at the beginning of this document:

...
public class NativeBannerAdTest : MonoBehaviour
{
    private NativeBannerAd nativeBannerAd;

    [Header("Text:")]
    public Text advertiserName;
    public Text sponsored;
    public Text socialContext;
    [Header("Images:")]
    public GameObject iconImage;
    [Header("Buttons:")]
    public Button callToActionButton;
    [Header("Ad Choices:")]
    public AdChoices adChoices;

    ...
}

Here is how they can be associated with the views in the editor:

Notice that for the Ad Choices icon you can use the AdChoices Prefab provided by the Audience Network Unity SDK. For the ad icon, simply create empty GameObject with desired location and size, the Audience Network Unity SDK will handle populating it with the image.

Step 3: Populating your Layout Using the Ad's Metadata

Scenario 1: Immediately display the ad once it is loaded successfully. Modify the NativeAdDidLoad callback above to retrieve the Native Banner Ad's properties and display it as follows:

...
public class NativeBannerAdTest : MonoBehaviour
{
    private NativeBannerAd nativeBannerAd;

    // UI elements in scene
    [Header("Text:")]
    public Text advertiserName;
    public Text sponsored;
    public Text socialContext;
    [Header("Images:")]
    public GameObject iconImage;
    [Header("Buttons:")]
    public Button callToActionButton;
    [Header("Ad Choices:")]
    public AdChoices adChoices;

    ...

    // Load Ad button
    public void LoadAd()
    {
        if (this.nativeBannerAd != null) {
            this.nativeBannerAd.Dispose();
        }

        // Create a native ad request with a unique placement ID (generate your own on the Facebook app settings).
        // Use different ID for each ad placement in your app.
        this.nativeBannerAd = new AudienceNetwork.NativeBannerAd("YOUR_PLACEMENT_ID");

        // Wire up GameObject with the native banner ad. The game object should be a child of the canvas.
        nativeBannerAd.RegisterGameObject(gameObject);

        // Set delegates to get notified on changes or when the user interacts with the ad.
        nativeBannerAd.NativeAdDidLoad = (delegate() {
            // Register game objects for interactions.
            // IconImage will be used for impression logging.
            // CallToActionButton will be used for click logging.
            nativeBannerAd.RegisterGameObjectsForInteraction((RectTransform)iconImage.transform,
                    (RectTransform)callToActionButton.transform);
            Debug.Log("Native banner ad loaded.");

            adChoices.SetAd(nativeBannerAd);
            advertiserName.text = nativeBannerAd.AdvertiserName;
            sponsored.text = nativeBannerAd.SponsoredTranslation;
            socialContext.text = nativeBannerAd.SocialContext;
            callToActionButton.GetComponentInChildren<Text>().text = nativeBannerAd.CallToAction;
        });
        ...

        // Initiate a request to load an ad.
        nativeBannerAd.LoadAd();

        Debug.Log("Native banner ad loading...");
    }
    ...
}

The SDK will log the impression and handle the click automatically.

Scenario 2: Display the ad in a few seconds or minutes after it is successfully loaded. You should check whether the ad has been invalidated before displaying it.

In case of not showing the ad immediately after the ad has been loaded, the developer is responsible for checking whether or not the ad has been invalidated. Once the ad is successfully loaded, the ad will be valid for 60 mins. You will not get paid if you are showing an invalidated ad.

In such scenario, you can use another function to show the ad instead doing that directly in the NativeAdDidLoad callback directly. For example:

public class NativeBannerAdTest : MonoBehaviour
{
    private NativeBannerAd nativeBannerAd;
    ...

    public void LoadAd()
    {
        ...
        this.nativeBannerAd = new AudienceNetwork.NativeBannerAd("YOUR_PLACEMENT_ID");
        ...
        nativeBannerAd.NativeAdDidLoad = (delegate() {
            Debug.Log("Native banner ad loaded!");
        });
        ...
        nativeBannerAd.LoadAd();
    }

    // Another function to show the ad
    public void ShowAd()
    {
        if (this.nativeBannerAd == null || !this.nativeBannerAd.IsValid()) {
            return;
        }
        // Register game objects for interactions.
        // IconImage will be used for impression logging.
        // CallToActionButton will be used for click logging.
        nativeBannerAd.RegisterGameObjectsForInteraction((RectTransform)iconImage.transform,
        (RectTransform)callToActionButton.transform);
        Debug.Log("Native banner ad loaded.");

        adChoices.SetAd(nativeBannerAd);
        advertiserName.text = nativeBannerAd.AdvertiserName;
        sponsored.text = nativeBannerAd.SponsoredTranslation;
        socialContext.text = nativeBannerAd.SocialContext;
        callToActionButton.GetComponentInChildren<Text>().text = nativeBannerAd.CallToAction;
    }
    ...
}

Next Steps

Follow our guides for integrating different Ad Formats in your Unity app:

Once you're ready to go live with your app and monetize, submit your app for review after ensuring it it complies with Audience Network policies and the Facebook community standards.