Help Center/Details/

Template rendering Feed Ads

Introduction

Template rendering information flow: The scene should be displayed interspersed with the application content in the application content stream, and the advertising content should be distinguished from other content in the application to prevent accidental clicks.

Supported ad sizes: Developers can select multiple templates and multiple sizes on the CSJ platform. Template rendering information flow ads support developers to adjust and edit

Permission:

**Template rendering information flow advertisement: ** Provided by default

Template rendering information flow advertisement

Instructions for use

The template information flow advertisement uses the BUNativeExpressAdManager object to call loadAd to request the advertisement, and uses the BUNativeExpressAdView object to render the advertisement. By setting the BUNativeExpressAdViewDelegate agent, it obtains callbacks such as advertisement, display, click, and close.

Create an ad slot object and request an ad

BUNativeExpressAdManager

You need to pass in the ad slot object when requesting an ad, and the ad slot ID must be passed in when the ad slot object is created

Required parameters:

Field Definition Field Name Field Type Remarks
BUAdSlot / / Basic information configuration, see case for details
adSize Ad size CGSize Ad size, width can be set to screen width, height can be directly set to 0 when adaptive

Before requesting ads, you need to configure the basic information of BUAdSlot ads, use BUNativeExpressAdManager to create objects, and use BUNativeExpressAdManager to call loadAd to request ads

BUAdSlot *slot1 = [[BUAdSlot alloc] init];
slot1.ID = self.viewModel.slotID;
slot1.AdType = BUAdSlotAdTypeFeed;
BUSize *imgSize = [BUSize sizeBy:BUProposalSize_Feed228_150];
slot1.imgSize = imgSize;
slot1.position = BUAdSlotPositionFeed;
// self.nativeExpressAdManager can be reused
 if (!self.nativeExpressAdManager) {
    self.nativeExpressAdManager = [[BUNativeExpressAdManager alloc] initWithSlot:slot1 adSize:CGSizeMake(self.widthSlider.value, self.heightSlider.value)];
    }
self.nativeExpressAdManager.adSize = CGSizeMake(self.widthSlider.value, self.heightSlider.value);
self.nativeExpressAdManager.delegate = self;
NSInteger count = (NSInteger)self.adCountSlider.value;
[self.nativeExpressAdManager loadAdDataWithCount:count];

Note:

  1. self.nativeExpressAdManager can be reused
  2. AdSize of the size of the template information flow is recommended width is set to screen width, height is set to 0 or the height of the platform checked Do not set the size at will, otherwise it may fail to pull or the advertisement may be deformed
  3. Template information flow ads can be requested for multiple ads at the same time, maximum number of requests is 3
  4. The default setting of the template information flow advertisement imgSize is BUProposalSize_Feed228_150

Receive ads loading results

BUNativeExpressAdViewDelegate

Callback Method Notes
The error code returned by nativeExpressAdFailToLoad
nativeExpressAdViewRenderFail Rendering failure, network or hardware reasons cause rendering failure, you can replace the mobile phone or network environment test. It is recommended to upgrade to the latest version of the CSJ platform
nativeExpressAdSuccessToLoad Ad view loaded successfully
nativeExpressAdViewRenderSuccess Rendering success

By setting the BUNativeExpressAdViewDelegate agent, you can get callbacks such as ads, display, click, and close. For other proxy methods, please refer to the section of BUDExpressFeedViewController class#pragma mark-BUNativeExpressAdViewDelegate in Demo

Display ads

Since the official Demo uses tableView for the insertion and display of advertisements, you can update the relevant insertion display of the advertisement by directly updating the data source. It is recommended that the developer perform the rendering and display of the advertisement after receiving the nativeExpressAdSuccessToLoad callback to ensure smooth playback and smooth display. , The user experience is better. Therefore, if you do not use this method for the display of information flow advertisements, remember not to forget addSubview to add advertising objects to display the advertisements.

Display news feed ads

Timing

After receiving the nativeExpressAdSuccessToLoad callback, the advertisement will be rendered and displayed, and the data source will be refreshed.

-(void)nativeExpressAdSuccessToLoad:(BUNativeExpressAdManager *)nativeExpressAd views:(NSArray<__kindof BUNativeExpressAdView *> *)views {
    [self.expressAdViews removeAllObjects];//[Important] You cannot save too many views, you need to manually release the unused ones at the right time, otherwise the memory will be too large
    if (views.count) {
        [self.expressAdViews addObjectsFromArray:views];
        [views enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            BUNativeExpressAdView *expressView = (BUNativeExpressAdView *)obj;
            expressView.rootViewController = self;
            // important: WKWebview will be rendered here. It is recommended to preload at most three ads at a time. If there are more than 3, it will cause WKWebview rendering to fail.
            [expressView render];
        }];
    }
    [self.tableView reloadData];
}

Note: In order to avoid excessive memory from triggering the system optimization mechanism, it is recommended to perform the removal operation of remove at the appropriate time. Currently the SDK is implemented using WKWebView. This recommendation is not limited to template information flow ads, other ads are also applicable , To ensure that unused advertisements will be released at the right time

Dislike callback description

-(void)nativeExpressAdView:(BUNativeExpressAdView *)nativeExpressAdView dislikeWithReason:(NSArray<BUDislikeWords *> *)filterWords {
    //[Important] You need to remove the view in this callback after clicking the fork, otherwise, the user may click the fork to be invalid
    [self.expressAdViews removeObject:nativeExpressAdView];
    NSUInteger index = [self.expressAdViews indexOfObject:nativeExpressAdView];
    NSIndexPath *indexPath=[NSIndexPath indexPathForRow:index inSection:0];
    [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];
}

-(void)nativeExpressAdViewDidRemoved:(BUNativeExpressAdView *)nativeExpressAdView {
//[Important] If the developer receives this callback, it means that the CSJ will actively close the ad. After the ad is removed, the developer needs to adapt the interface
  NSUInteger index = [self.expressAdViews indexOfObject:nativeExpressAdView];
  [self.expressAdViews removeObject:nativeExpressAdView];
  NSIndexPath *indexPath=[NSIndexPath indexPathForRow:index inSection:0];
  NSIndexPath *placeholderIndexPath = [NSIndexPath indexPathForRow:index + 1 inSection:0];
  [self.tableView deleteRowsAtIndexPaths:@[indexPath, placeholderIndexPath] withRowAnimation:UITableViewRowAnimationFade];
}

Note:

  1. Remember not to forget to set the rootViewController of the BUNativeExpressAdView object, ensure that the currently passed in rootViewController is not empty, and make sure that self.nativeExpressAdManager has made reuse judgment, otherwise there may be occasional dislike callback method failure Anomalous scene

Precautions

  1. self.nativeExpressAdManager can be reused
  2. The size of the template information flow adSize is recommended to set the width to the screen width, set the height to 0 or set the height of the platform check. Do not set the size at will, otherwise it may fail to pull or the ad may be deformed.
  3. In order to avoid excessive memory from triggering the system optimization mechanism, it is recommended to perform the remove operation at the right time
  4. Don't forget to set the rootViewController of the BUNativeExpressAdView object to ensure that the currently passed rootViewController is not empty

resource

For detailed access, please refer to the BUDExpressFeedViewController class in Demo, refer to the loadData method for the ad loading request part, and the nativeExpressAdSuccessToLoad method for the ad display rendering part.

Did the content solve your problem?
Contact us