Versions Compared

Old Version 15

changes.mady.by.user Arthur Lee

Saved on

compared with

New Version Current

changes.mady.by.user Mason Yun

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

이 문서는 WebView에 구현한 버튼을 통해 Android 또는 iOS에서 인터스티셜 지면을 실행시키는 방법을 설명합니다.

Table of Contents

개요

아래 가이드의 준비와 같이 Web에 버튼을 구현한 후, Android에서 구현 혹은 iOS에서 구현을 참고하여 각각의 플랫폼에서 인터스티셜 지면을 표시할 수 있습니다.

준비

우선 WebView에서 인터스티셜 지면을 표시하기 위한 버튼을 구현합니다.

Code Block
<html>
<head>    
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>    
  <title>TEST</title>
</head>
<body>    
  <input type='button' onClick='showInterstitial()' value='show interstitial' />    
  <script type='text/javascript'>        
    const showInterstitial = () => {            
      var userAgent = navigator.userAgent;
      if (/android/i.test(userAgent)) {
        BuzzAdBenefitJSBridge.showInterstitial()            
      }
      if (/iPad|iPhone|iPod/.test(userAgent)) {                
        webkit.messageHandlers.BuzzAdBenefitJSBridge.postMessage('showInterstitial')            
      }        
    }    
  </script>
</body>
</html>

 

Android에서 구현

Step 1. interface 정의

Code Block
public interface BuzzAdBenefitJSBridge {
    void showInterstitial();
}

 

Step 2. JavascriptInterface 추가 및 showInterstitial 구현

Code Block
public class WebToInterstitialActivity extends AppCompatActivity implements BuzzAdBenefitJSBridge {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_to_interstitial);

        webView = findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setUseWideViewPort(true);
        webView.addJavascriptInterface(this, "BuzzAdBenefitJSBridge");
        webView.loadUrl("YOUR_URL");
    }

    final BuzzAdInterstitial buzzAdInterstitial = new BuzzAdInterstitial.Builder(YOUR_INTERSTITIAL_UNIT_ID).buildDialog();

    @Override
    @JavascriptInterface
    public void showInterstitial() {
        new Handler(getMainLooper()).post(new Runnable() {
            @Override
            public void run() {
                buzzAdInterstitial.load(new InterstitialAdListener() {
                    @Override
                    public void onAdLoadFailed(@Nullable AdError adError) {
                    }

                    @Override
                    public void onAdLoaded() {
                        buzzAdInterstitial.show(WebToInterstitialActivity.this);
                    }
                });
            }
        });
    }
}

iOS 에서 구현

Step 1. interface 정의

Code Block
languageobjective-c
#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface WebToInterstitialViewController : UIViewController

@end

NS_ASSUME_NONNULL_END

 

Step 2. ScriptMessageHandler 추가 및 showInterstitial 메시지 처리 로직 구현

Code Block
languageobjective-c
#import "WebToInterstitialViewController.h"

#import <WebKit/WebKit.h>
#import <BuzzAdBenefit/BuzzAdBenefit.h>

@interface WebToInterstitialViewController () <WKScriptMessageHandler, BZVBuzzAdInterstitialDelegate>

@property (nonatomic, strong, readonly) WKWebView *webView;
@property (nonatomic, strong, readonly) BZVBuzzAdInterstitial *buzzAdInterstitial;

@end

@implementation WebToInterstitialViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
  WKUserContentController *contentController = [[WKUserContentController alloc] init];
  [contentController addScriptMessageHandler:self name:@"BuzzAdBenefitJSBridge"];
  config.userContentController = contentController;

  _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
  NSURL *url = [NSURL URLWithString:@"YOUR_URL"];
  NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
  [_webView loadRequest:urlRequest];
  [self.view addSubview:_webView];
  
  _buzzAdInterstitial = [BZVBuzzAdInterstitial interstitialWithBlock:^(BZVBuzzAdInterstitialBuilder * _Nonnull builder) {
    builder.unitId = @"YOUR_INTERSTITIAL_UNIT_ID";
    builder.type = BZVBuzzAdInterstitialDialog;
  }];
  _buzzAdInterstitial.delegate = self;
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  if ([message.body isEqualToString:@"showInterstitial"]) {
    // Show Interstitial
    [_buzzAdInterstitial load];
  }
}

#pragma mark - BZVBuzzAdInterstitialDelegate
- (void)BZVBuzzAdInterstitialDidLoadAd:(BZVBuzzAdInterstitial *)interstitial {
  // 할당된 광고가 있으면 호출됩니다.
  // Interstitial 광고를 화면에 표시합니다.
  [interstitial presentOnViewController:self];
}

- (void)BZVBuzzAdInterstitialDidFailToLoadAd:(BZVBuzzAdInterstitial *)interstitial withError:(NSError *)error {
  // 할당된 광고가 없으면 호출됩니다.
}

- (void)BZVBuzzAdInterstitialDidDismiss:(UIViewController *)viewController {
  // Interstitial 지면이 종료되면 호출됩니다.
  // 필요에 따라 추가 기능을 구현하세요.
}

@end

...