BuzzAd-Benefit SDK 인터스티셜(Interstitial)을 WebView로 연동하기
이 문서는 WebView에 구현한 버튼을 통해 Android 또는 iOS에서 인터스티셜 지면을 실행시키는 방법을 설명합니다.
- 1 개요
- 2 준비
- 3 Android에서 구현
- 4 iOS 에서 구현
개요
아래 가이드의 준비와 같이 Web에 버튼을 구현한 후, Android에서 구현 혹은 iOS에서 구현을 참고하여 각각의 플랫폼에서 인터스티셜 지면을 표시할 수 있습니다.
준비
우선 WebView에서 인터스티셜 지면을 표시하기 위한 버튼을 구현합니다.
<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 정의
public interface BuzzAdBenefitJSBridge {
void showInterstitial();
}
Step 2. JavascriptInterface 추가 및 showInterstitial 구현
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 정의
Step 2. ScriptMessageHandler 추가 및 showInterstitial 메시지 처리 로직 구현