배너

• AdWhale SDK를 프로젝트에 추가 해야합니다.

• Banner Ad용으로 발급받은 Ad Unit ID를 사용합니다.

• 광고를 요청하기 전에 SDK 초기화를 진행합니다.

AdWhaleAdSize(Swift)	AdWhaleAdSize(ObjC)	Size (width * height)
.banner	AdWhaleAdSizeBanner	320 *50
.largeBanner	AdWhaleAdSizeLargeBanner	320 * 100
.mediumRectangle	AdWhaleAdSizeMediumRectangle	300 * 250

React-Native

1. BannerAdView.m

#import <React/RCTViewManager.h>
#import <React/RCTBridge.h>
#import <React/RCTUIManager.h>
#import <AdWhaleSDK/AdWhaleSDK.h>

@interface BannerAdViewContainer : UIView <AdWhaleBannerDelegate>
@property (nonatomic, strong) AdWhaleBannerAd *bannerView;
@property (nonatomic, copy) RCTBubblingEventBlock onAdLoaded;
@property (nonatomic, copy) RCTBubblingEventBlock onAdLoadFailed;
@property (nonatomic, copy) RCTBubblingEventBlock onAdClicked;
@property (nonatomic, copy) NSString *adSize;
@property (nonatomic, copy) NSString *placementUid;
@property (nonatomic, assign) BOOL shouldLoadAd;
@end

@implementation BannerAdViewContainer

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _adSize = @"BANNER320x50";
        _placementUid = @"";
        _shouldLoadAd = NO;
    }
    return self;
}

- (void)setAdSize:(NSString *)adSize {
    _adSize = adSize;
    [self updateAdSize];
}

- (void)setPlacementUid:(NSString *)placementUid {
    _placementUid = placementUid;
    [self.bannerView setAdUnitID:placementUid];
}

- (void)setShouldLoadAd:(BOOL)shouldLoadAd {
    _shouldLoadAd = shouldLoadAd;
    if (shouldLoadAd) {
        [self loadAd];
    }
}

- (void)updateAdSize {
    if (!self.bannerView) return;
    CGFloat width = 320;
    CGFloat height = 50;
    if ([_adSize isEqualToString:@"BANNER320x100"]) height = 100;
    else if ([_adSize isEqualToString:@"BANNER300x250"]) height = 250;
    CGRect frame = CGRectMake((UIScreen.mainScreen.bounds.size.width - width) / 2, 0, width, height);
    self.bannerView.frame = frame;
    if ([_adSize isEqualToString:@"BANNER320x50"]) [self.bannerView setAdSize:AdWhaleAdSizeBanner];
    else if ([_adSize isEqualToString:@"BANNER320x100"]) [self.bannerView setAdSize:AdWhaleAdSizeLargeBanner];
    else if ([_adSize isEqualToString:@"BANNER300x250"]) [self.bannerView setAdSize:AdWhaleAdSizeMediumRectangle];
}

- (void)loadAd {
    if (!self.bannerView) {
        CGFloat width = 320;
        CGFloat height = 50;
        if ([_adSize isEqualToString:@"BANNER320x100"]) height = 100;
        else if ([_adSize isEqualToString:@"BANNER300x250"]) height = 250;
        CGRect frame = CGRectMake((UIScreen.mainScreen.bounds.size.width - width) / 2, 0, width, height);
        self.bannerView = [[AdWhaleBannerAd alloc] initWithFrame:frame];
        [self addSubview:self.bannerView];
        [self updateAdSize];
        [self.bannerView setAdUnitID:self.placementUid ?: @""];
        [self.bannerView setRootViewController:RCTPresentedViewController()];
        [self.bannerView setDelegate:self];
    }
    [self.bannerView load];
}

// MARK: - AdWhaleBannerDelegate
- (void)bannerViewDidReceiveAd:(AdWhaleBannerAd *)bannerView {
    if (self.onAdLoaded) self.onAdLoaded(@{});
}
- (void)bannerView:(AdWhaleBannerAd *)bannerView didFailToReceiveAdWithError:(NSError *)error {
    if (self.onAdLoadFailed) self.onAdLoadFailed(@{@"statusCode": @0, @"message": error.localizedDescription ?: @""});
}
- (void)bannerViewDidRecordImpression:(AdWhaleBannerAd *)bannerView {}
- (void)bannerViewWillPresentScreen:(AdWhaleBannerAd *)bannerView {
    if (self.onAdClicked) self.onAdClicked(@{});
}
- (void)bannerViewWillDismissScreen:(AdWhaleBannerAd *)bannerView {}
- (void)bannerViewDidDismissScreen:(AdWhaleBannerAd *)bannerView {}

@end

@interface BannerAdView : RCTViewManager
@end

@implementation BannerAdView
RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(onAdLoaded, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onAdLoadFailed, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onAdClicked, RCTBubblingEventBlock)
RCT_EXPORT_VIEW_PROPERTY(adSize, NSString)
RCT_EXPORT_VIEW_PROPERTY(placementUid, NSString)
RCT_EXPORT_VIEW_PROPERTY(shouldLoadAd, BOOL)

- (UIView *)view {
    return [[BannerAdViewContainer alloc] init];
}
@end 

2. React Native 연동 코드

BannerAd.tsx

import React, { Component } from 'react';
import { View, Button, StyleSheet, Dimensions, Text, TouchableOpacity } from 'react-native';
import { requireNativeComponent } from 'react-native';

const windowWidth = Dimensions.get('window').width;

const styles = StyleSheet.create({
  container: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingTop: 20,
  },
  buttonContainer: {
    width: '100%',
  },
  buttonWrapper: {
    marginBottom: 5,
    width: '80%',
    alignSelf: 'center',
  },
  adWhaleMediationAdViewStyle: {
    height: 250,
    width: windowWidth,
    backgroundColor: 'yellow',
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
});

const radioStyles = StyleSheet.create({
  radioGroup: {
    justifyContent: 'space-around',
    marginBottom: 10,
  },
  radioButton: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  outerCircle: {
    height: 24,
    width: 24,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
  },
  innerCircle: {
    height: 12,
    width: 12,
    borderRadius: 6,
    backgroundColor: '#000',
  },
});

interface BannerAdProps {
  style?: any;
  onAdLoaded?: (event: any) => void;
  onAdLoadFailed?: (event: any) => void;
  onAdClicked?: (event: any) => void;
}

interface BannerAdState {
  isReload: boolean;
  selectedSize: string;
}

const BannerAdView = requireNativeComponent<any>('BannerAdView');

class BannerAd extends Component<BannerAdProps, BannerAdState> {
  state: BannerAdState = {
    isReload: false,
    selectedSize: 'BANNER320x50',
  };

  placementUid = '배너 광고 AD_UNIT_ID 입력';

  onPressBannerLoadButton = () => {
    console.log(`[adwhale] [sample UI] 배너 광고 로드 요청`);
    this.setState(prevState => ({ isReload: !prevState.isReload }));
  }

  _onAdLoaded = (event: any) => {
    console.log(`[adwhale] [sample UI] 배너 광고 로드 성공`);
    this.setState({ isReload: false });
  }

  _onAdLoadFailed = (event: any) => {
    const { statusCode, message } = event.nativeEvent;
    console.error(`[adwhale] [sample UI] 배너 광고 로드 실패: statusCode=${statusCode}, message=${message}`);
    this.setState({ isReload: false });
  }

  _onAdClicked = (event: any) => {
    console.log(`[adwhale] [sample UI] 배너 광고 클릭`);
  }

  handleSizeChange = (size: string) => {
    console.log(`[adwhale] [sample UI] 배너 크기 변경: size=${size}`);
    this.setState({ selectedSize: size });
  }

  getBannerHeight = (size: string) => {
    switch (size) {
      case 'BANNER320x50':
        return 50;
      case 'BANNER320x100':
        return 100;
      case 'BANNER300x250':
        return 250;
      default:
        return 50;
    }
  };

  render() {
    const { selectedSize } = this.state;
    const bannerHeight = this.getBannerHeight(selectedSize);

    return (
      <View style={styles.container}>
        <Text style={styles.title}>배너 광고</Text>
        <View style={radioStyles.radioGroup}>
          {['BANNER320x50', 'BANNER320x100', 'BANNER300x250'].map(size => (
            <TouchableOpacity
              key={size}
              style={radioStyles.radioButton}
              onPress={() => this.handleSizeChange(size)}
            >
              <View style={radioStyles.outerCircle}>
                {selectedSize === size && <View style={radioStyles.innerCircle} />}
              </View>
              <Text>{size}</Text>
            </TouchableOpacity>
          ))}
        </View>

        <View style={styles.buttonContainer}>
          <View style={styles.buttonWrapper}>
            <Button title="Banner load" onPress={this.onPressBannerLoadButton} />
          </View>
        </View>

        <View
          style={{
            width: windowWidth,
            height: 250,
            backgroundColor: 'yellow',
            marginBottom: 20,
            alignItems: 'center',
            justifyContent: 'flex-end',
          }}
        >
          <BannerAdView
            style={{
              width: windowWidth,
              height: bannerHeight,
              backgroundColor: 'transparent',
            }}
            placementUid={this.placementUid}
            adSize={selectedSize}
            shouldLoadAd={this.state.isReload}
            onAdLoaded={this._onAdLoaded}
            onAdLoadFailed={this._onAdLoadFailed}
            onAdClicked={this._onAdClicked}
          />
        </View>
      </View>
    );
  }
}

export default BannerAd; 

App.tsx

import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import BannerAd from './src/components/BannerAd';

export default function App() {
  return (
    <SafeAreaView style={styles.safeArea}>
      <View style={styles.mainViewStyle}>
        <View style={styles.contentViewStyle}>
            <BannerAd />
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: 'white'
  },
  mainViewStyle: {
    flex: 1,
    marginTop: 50
  },
  contentViewStyle: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'                
  },
}); 

Expo