1. Addapptr Avatar Addapptr
  2. AATKit iOS
  3. Native Ads Sample

Wiki

Clone wiki

Native Ads Sample / Special Native Characteristics of Ad Networks AATKit 2

View History

Special Native Characteristics of Ad Networks

Index

Facebook

For Facebook native ads to work, you must use the new native ads API introduced in AATKit 2.69.0. Also, special view classes need to be used for icon and main image views- both should be instances of FBMediaView.

Google

Important: The old way of implementing Google native ads (AppInstallAds and ContentAds) will be deprecated in a later release. To decide which way of implementing you want to use for your app, you can hand over this information to the AATKit via the Info.plist:

  • Set up a dictionary AATKitConfiguration in the Info.plist
  • Set up a BOOL UseGoogleUnifiedAds inside AATKitConfiguration
  • Set UseGoogleUnifiedAds to the desired value

Note: The default value for the absence of this key will change:

  • AATKit 2.67.0-beta5: NO
  • AATKit > 2.67.0-beta5: YES

Google Native Ads

Native ads in the GoogleMobileAds SDK are required to be encapsulated within a parent view of a specific type: GADNativeAdView

#!objective-c
/// Base class for native ad views. Your native ad view must be a subclass of this class and must
/// call superclass methods for all overridden methods.
@interface GADUnifiedNativeAdView : UIView

/// This property must point to the unified native ad object rendered by this ad view.
@property(nonatomic, strong, nullable) GADUnifiedNativeAd *nativeAd;

/// Weak reference to your ad view's headline asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *headlineView;
/// Weak reference to your ad view's call to action asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *callToActionView;
/// Weak reference to your ad view's icon asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *iconView;
/// Weak reference to your ad view's body asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *bodyView;
/// Weak reference to your ad view's store asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *storeView;
/// Weak reference to your ad view's price asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *priceView;
/// Weak reference to your ad view's image asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *imageView;
/// Weak reference to your ad view's star rating asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *starRatingView;
/// Weak reference to your ad view's advertiser asset view.
@property(nonatomic, weak, nullable) IBOutlet UIView *advertiserView;
/// Weak reference to your ad view's media asset view.
@property(nonatomic, weak, nullable) IBOutlet GADMediaView *mediaView;
/// Weak reference to your ad view's AdChoices view. Must set adChoicesView before setting
/// nativeAd, otherwise AdChoices will be rendered in the publisher's preferredAdChoicesPosition as
/// defined in GADNativeAdViewAdOptions.
@property(nonatomic, weak, nullable) IBOutlet GADAdChoicesView *adChoicesView;

@end

Mandatory asset to display: 

#!objective-c
#pragma mark - Must be displayed if available

@property(nonatomic, readonly, copy, nullable) NSString *headline;

An Example for binding the native ad assets:

func setupGoogleAd() {
    guard let nativeAd = nativeAd else {
        return
    }
    AATKit.setTrackingView(nativeAdContainerView,
                           for: nativeAd,
                           mainImageView: googleMediaView,
                           iconView: iconView,
                           ctaView: callToActionLabel)
    // Title
    headlineLabel.text = AATKit.getNativeAdTitle(nativeAd) ?? "-"
    nativeAdContainerView.headlineView = headlineLabel
    // Ad Icon
    loadImage(for: iconView, imageUrlString: AATKit.getNativeAdIconURL(nativeAd))
    nativeAdContainerView.iconView = iconView
    // Body
    bodyView.text = AATKit.getNativeAdDescription(nativeAd) ?? "-"
    nativeAdContainerView.bodyView = bodyView
    // Ad Identifier
    storeView.text = AATKit.getNativeAdAdvertiser(nativeAd) ?? "-"
    nativeAdContainerView.storeView = storeView
    //Media View
    nativeAdContainerView.mediaView = googleMediaView
    // Advertiser
    advertiserLabel.text = AATKit.getNativeAdAdvertiser(nativeAd) ?? "-"
    nativeAdContainerView.advertiserView = advertiserLabel

    //callToActionLabel
    callToActionLabel.text = AATKit.getNativeAdCall(toAction: nativeAd) ?? ""
    nativeAdContainerView.callToActionView = callToActionLabel
}

Important: Please assign your googleMediaView to the GADNativeAdView to let Google display the body view properly

How to use native ads of Google with the AATKit?

1. Create your own .xib file, which should be of class GADNativeAdView

Screen Shot 2018-09-24 at 11.03.48.png

2. Connect your UIView elements to the respective properties of the GADNativeAdView. The header file can be found in the AdMob folder of the AATKit's subSDKs folder

NavigatorAatFolder copy.png

If you imported AATKit via cocoapods, the folder is located in the Pods folder of the Pods project:

NavigatorPods copy.png

Referencing outlets

XibReferencingOutlets.png

Important: Please use the "mediaView" outlet and a view of class GADMediaView in your .xib file instead of using the "imageView" outlet and a view of class UIImageView in your .xib file.
Beginning 2018-10-29, Google will only provide the main image or video for the GADMediaView. The media for your GADMediaView will load automatically, so you don't need to (and shouldn't) use [AATKit getNativeAdImageURL:nativeAd] to download the main image anymore.
That also means, Google will stop providing images for the "imageView" outlet. The "iconImage" outlet is not affected.

InMobi

For the impression tracking to work correctly, please assign the tracking view to your native ad, right before you intend to show it.

Objective-C: 

#!objective-c
id nativeAd = ...
UIView *nativeBanner = [YourNativeBannerView new];

//position view here...

[AATKit setTrackingView: nativeBanner forNativeAd: nativeAd];

[self.view addSubview: nativeBanner];
[self.view bringSubviewToFront: nativeBanner];
Swift: 
#!swift
let nativeBanner: UIView = YourNativeBannerView()

//position view here...

AATKit.setTrackingView(nativeBanner, for: nativeAd)

view.addSubview(nativeBanner)
view.bringSubviewToFront(nativeBanner)

AppLovinMax

To use ApplovinMax NativeAd you need to do the following:

  • Your custom view containing the UI components to bind must subclass from MANativeAdView.

  • Next, assign unique tag IDs to the subviews of your custom views. These IDs will be used in the next integration step.

  • Next, bind the subviews using unique tag IDs with an instance of MANativeAdViewBinder. AppLovin does not guarantee a network will return certain assets. 

#!objective-c
MANativeAdViewBinder *binder = [[MANativeAdViewBinder alloc] initWithBuilderBlock:^(MANativeAdViewBinderBuilder *builder) {
        builder.titleLabelTag = YOUR_TITLE_LABEL_TAG;
        builder.bodyLabelTag = YOUR_BODY_LABLE_TAG;
        builder.callToActionButtonTag = YOUR_CALL_TO_ACTION_LABEL_TAG;
        builder.iconImageViewTag = YOUR_ICON_IMAGE_VIEW_TAG;
        builder.mediaContentViewTag = YOUR_MEDIA_VIEW_CONTENT_VIEW_TAG;
        builder.advertiserLabelTag = YOUT_ADVERTISER_LABEL_TAG;
    }];
[nativeAdView bindViewsWithAdViewBinder: binder];
  • Next call setTrackingView when you need to display the ad

#!objective-c
[AATKit setTrackingView:nativeAdView forNativeAd:nativeAd mainImageView:imageView iconView:iconView CTAView:ctaButton];
*** note CTAView has to be an UIButton instance for AppLovinMax to work

Code Samples

Retrieve the network of a native ad

Objective-C: 

#!objective-c
- (void)AATKitHaveAd:(NSObject<AATKitPlacement> *)placement
{
    NSObject<AATKitNativeAd>* nativeAd = [AATKit getNativeAdForPlacement:placement];

    if ([self isGoogleNativeAd:nativeAd]) {
        …
    }
…
}
Swift: 
#!swift
func aatKitHaveAd(_ placement: AATKitPlacement) {
    if let nativeAd = AATKit.getNativeAd(for: placement) {
        if isGoogleNativeAd(nativeAd: nativeAd) {
            print("Google Native Ad")
        }
    }
}

Change Native Ad preferredAdChoicesPosition

  • You can choose from the following values: top_right - top_left - bottom_right - bottom_left

Objective-C: 

[AATKit setAdChoicesIconPosition:top_left];

Swift: 

AATKit.setAdChoicesIconPosition(.bottom_left)

Check if the NativeAd is a Google Native Ad

Objective-C: 

#!objective-c
- (BOOL)isGoogleNativeAd:(NSObject<AATKitNativeAd>*)nativeAd
{
    if ([AATKit getNativeAdNetwork:nativeAd] == AATAdMob) {
        return YES;
    }
    if ([AATKit getNativeAdNetwork:nativeAd] == AATDFP) {
        return YES;
    }
    return NO;
}
Swift: 
#!swift
func isGoogleNativeAd(nativeAd: AATKitNativeAdProtocol) -> Bool {
    return (AATKit.getNativeAdNetwork(nativeAd) == .AATAdMob) || (AATKit.getNativeAdNetwork(nativeAd) == .AATDFP)
}

Instantiate the xib

Objective-C: 

#!objective-c
GADNativeAdView* nativeAdView = [[[NSBundle mainBundle] loadNibNamed:@"GoogleNativeAd" owner:nil options:nil] firstObject];
[self.view addSubview:nativeAdView];
Swift: 
#!swift
guard let nativeAdView: GADNativeAdView = Bundle.main.loadNibNamed("GoogleNativeAd", owner: nil, options: nil)?.first as? GADNativeAdView else {
    return
}
view.addSubview(nativeAdView)

Assign the xib instance to the native ad

Objective-C: 

#!objective-c
[AATKit setTrackingView:nativeAdView forNativeAd:nativeAd];
Swift: 
#!swift
AATKit.setTrackingView(nativeAdView, for: nativeAd)

Retrieve the assets from the native ad

  • You can retrieve thee assets from the native ad and assemble them to your xib instance. Also see the Google code example for this: AdMob Native Ad documentation Objective-C: 
    #!objective-c
((UILabel*)nativeAdView.headlineView).text = [AATKit getNativeAdTitle:nativeAd];
((UILabel*)nativeAdView.bodyView).text = [AATKit getNativeAdDescription:nativeAd];
((UILabel*)nativeAdView.advertiserView).text = [AATKit getNativeAdAdvertiser:nativeAd];
((UILabel*)nativeAdView.callToActionView).text = [AATKit getNativeAdCallToAction:nativeAd];
NSString* iconImageUrl = [AATKit getNativeAdIconURL:nativeAd];
[self downloadImageForUrlString:iconImageUrl forImageView:(UIImageView*)nativeAdView.iconView];
    Swift: 
    #!swift
(nativeAdContainerView.headlineView as? UILabel)?.text = AATKit.getNativeAdTitle(nativeAd)
(nativeAdContainerView.bodyView as? UILabel)?.text = AATKit.getNativeAdDescription(nativeAd)
(nativeAdContainerView.advertiserView as? UILabel)?.text = AATKit.getNativeAdAdvertiser(nativeAd)
(nativeAdContainerView.callToActionView as? UILabel)?.text = AATKit.getNativeAdCall(toAction: nativeAd)
let iconImageUrl = AATKit.getNativeAdIconURL(nativeAd)
downloadImage(for: adIconImageView, imageUrlString: iconImageUrl)
    Important: Please disable user interactions of your UIButton elements, as per Google's documentation.

An example for implementing downloadImageForUrlString

Objective-C: 

#!objective-c
- (void)downloadImageForUrlString:(NSString*)urlString forImageView:(UIImageView*)imageView
{
NSURL* url = [NSURL URLWithString:urlString];
NSURLSession* urlSession = [NSURLSession sharedSession];
NSURLSessionDataTask* downloadTask = [urlSession dataTaskWithURL:url completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
        dispatch_async(dispatch_get_main_queue(), ^{
            imageView.image = [UIImage imageWithData:data];
        });
    }];
    [downloadTask resume];
}
Swift: 
#!swift
func downloadImage(for imageView: UIImageView, imageUrlString: String?) {
    guard let urlString = imageUrlString,
        let url = URL(string: urlString) else {
            return
    }
    DispatchQueue.global().async {
        guard let data = try? Data(contentsOf: url),
            let image = UIImage(data: data) else {
            return
        }
        DispatchQueue.main.async {
            imageView.image = image
        }
    }
}

Remove the tracking view from your native ad

Objective-C: 

#!objective-c
[AATKit removeTrackingViewForNativeAd:nativeAd]
Swift: 
#!swift
AATKit.removeTrackingView(for: nativeAd)

Updated