Native Ads iOS Setup - cleveradssolutions/CAS-Flutter GitHub Wiki

Native ads are presented to users using UI components native to the platform: a View on Android or a UIView on iOS.

This guide shows you how to load, display, and customize native ads using platform-specific code.

1. Layout the views
2. Implement Native Ad Factory
3. Register Native Ad Factory in CAS Plugin
4. Load ad content with factory ID

Layout the views

The first step is to lay out the UIViews that will display native ad assets. You can do this in the Xcode Interface Builder as you would when creating any other xib file. Create a new View xib file in ios project.

Set Custom Class value to CASNativeView. This is the ad view class that is used to display a NativeAdContent.

You'll also need to set the custom class for the CASMediaView, which is used to display the video or image for the ad.

Assign unique tag IDs to the asset views. The example image below sets the ID to 100 for the Media View.

[!TIP]
For an example of configuring your CASNativeAdView layout, see NativeAdView.xib.

[!NOTE]
Note that all asset views for a given native ad should be rendered inside the CASNativeView layout.
Please review the description and requirements of native ad assets on CAS iOS wiki page.

Implement Native Ad Factory

Create a new class that implements the CASNativeAdViewFactoryprotocol from clever_ads_solutions module. Implement the createNativeAdView function, in which you need to create and return the CASNativeView.

Register all the views by tag ID you use in the layout to the adView, and the CAS SDK will automatically populate them with ad content, or make the view invisible if the corresponding asset is not provided in the ad content.

import clever_ads_solutions // CAS Flutter module
import CleverAdsSolutions // CAS iOS SDK
import Foundation

class NativeAdFactoryExample: NSObject, CASNativeAdViewFactory {
    func createNativeAdView(for adContent: NativeAdContent,
                            customOptions: [String: Any]) -> CASNativeView? {
        let adView = Bundle.main.loadNibNamed(
            "NativeAdView", owner: nil
        )!.first as! CASNativeView

        adView.registerMediaView(tag: 100)
        adView.registerIconView(tag: 101)
        adView.registerHeadlineView(tag: 102)
        adView.registerAdLabelView(tag: 103)
        adView.registerBodyView(tag: 104)
        adView.registerCallToActionView(tag: 105)
        adView.registerAdvertiserView(tag: 106)
        adView.registerStoreView(tag: 107)
        adView.registerPriceView(tag: 108)
        adView.registerStarRatingView(tag: 109)
        adView.registerReviewCountView(tag: 110)

        return adView
    }
}

The CAS Flutter plugin will automatically call adView.setNativeAd(nativeAd) later in any case.

You can find more details about the implementation of platform native ad view on the CAS iOS wiki page.

Register Native Ad Factory in CAS Plugin

Each CASNativeAdViewFactory implementation is required to be registered with a factoryId, a unique String identifier, when calling application(_:didFinishLaunchingWithOptions:). The factoryId will be used later when loading a native ad from Dart code.

A CASNativeAdViewFactory can be implemented and registered for each unique native ad layout used by your app, or a single one can handle all layouts.

Once you've created NativeAdFactoryExample, set up yourAppDelegate as follows:

import clever_ads_solutions
import Flutter
import UIKit

@main
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)

        // Register map of NativeAdFactory to CAS Flutter Plugin
        CASMobileAdsPlugin.nativeAdFactories = [
            "nativeFactoryIdExample": NativeAdFactoryExample(),
        ]

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

Load ad content with factory ID

After you've added your platform-specific code, turn to Dart to load ads.

• Make sure factoryId match the ID you registered earlier.
• сustomOptions are optional parameters for creating your native ad view. These parameters will be passed as a Map to the ad view creation function on both Android and iOS.

class NativeAdExampleState extends State<NativeAdExample> {
  AdViewInstance? _nativeAd;
  
  void _loadAd() {
    CASNativeContent.load( 
      factoryId: 'nativeFactoryIdExample',  
      customOptions: {  
        'exampleOptionKey': 'exampleValue',  
      },
      onAdLoaded: (AdViewInstance ad) { 
        // Called when an ad is successfully loaded. 
        print('$ad loaded'); 
        setState(() { 
          _nativeAd = ad;
        });
      },  
    );
  }
}

---

🔗 Next
Use native ads as described on the Get Started page.