Hybrid App

해당 연동 가이드는 하이브리드 환경 내에서 SDK 기능을 제공해 주는 가이드 문서입니다.

1. SDK 설치

1.1 Android

기본 설정

위 링크에 안내되어 있는 SDK Gradle 설치 및 AndroidManaifest.xml 설정을 완료해 줍니다.
AdPopcornSSP v3.9.0 버전부터 지원합니다.

1.2 iOS

기본 설정

위 링크에 안내되어 있는 SDK 설치 및 IDFA 설정을 완료해 줍니다.
iOS v2.10.7 버전부터 지원합니다.

2. 네이티브 웹뷰 연동

2.1 WebView 내 Javascript interface 설정

WebView 내 Javascript 설정을 활성화 및 AdPopcornSSPJsBridge 관련 세팅을 진행합니다.

반드시, name은 AdPopcornSSPJsBridge로 선언해 주어야 웹(HTML)과 통신이 이루어집니다.

private WebView hybridWebView;

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

    hybridWebView = (WebView) findViewById(R.id.hybrid_webview);

    hybridWebView.getSettings().setJavaScriptEnabled(true);
    hybridWebView.getSettings().setDomStorageEnabled(true);	
    hybridWebView.addJavascriptInterface(new AdPopcornSSPJsBridge(this, hybridWebView), "AdPopcornSSPJsBridge");							
}

private lateinit var hybridWebView: WebView

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_hybrid)
    
    hybridWebView = findViewById<WebView>(R.id.hybrid_webview)

    hybridWebView.apply {
        settings.javaScriptEnabled = true
        settings.domStorageEnabled = true
    
        addJavascriptInterface(
            AdPopcornSSPJsBridge(this@HybridActivity, this), 
            "AdPopcornSSPJsBridge"
        )
    }
}

#import "AdPopcornSSPWKScriptMessageHandler.h"

@interface AdPopcornRewardController() <WKNavigationDelegate, WKUIDelegate>
{

}

@implementation AdPopcornRewardController

- (void)viewDidLoad {
		webViewConfiguration = [[WKWebViewConfiguration alloc] init];
    wkContentController = [[WKUserContentController alloc] init];

    AdPopcornSSPWKScriptMessageHandler *scriptMessageHandler = [[AdPopcornSSPWKScriptMessageHandler alloc] init]; 
    [wkContentController addScriptMessageHandler:scriptMessageHandler name:@"AdPopcornSSPJsBridge"];
    [webViewConfiguration setUserContentController:wkContentController];
    
    webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:webViewConfiguration];
    // scriptMessageHandler에 webView와 vc설정 (필수)
    scriptMessageHandler.webView = webView;
    scriptMessageHandler.viewController = self;

    webView.navigationDelegate = self;
    webView.uiDelegate = self;
}

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate{
    
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
                
        let webConfiguration = WKWebViewConfiguration()        
        let contentController = WKUserContentController()
        
        let scriptMessageHandler = AdPopcornSSPWKScriptMessageHandler()
        scriptMessageHandler.viewController = self
        contentController.add(scriptMessageHandler, name: "AdPopcornSSPJsBridge")
        webConfiguration.userContentController = contentController

        // WKWebView 초기화
        webView = WKWebView(frame: .zero, configuration: webConfiguration)

	// scriptMessageHandler에 webView와 vc설정 (필수)
        scriptMessageHandler.webView = webView
	scriptMessageHandler.viewController = self
        
        webView.navigationDelegate = self // 네비게이션 델리게이트 설정
        webView.uiDelegate = self // 네비게이션 델리게이트 설정        
    }
}

3. 웹 Javacript API 연동

3.1 기본 연동

3.1.1 초기화

SDK 초기화 시 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.init();    
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'init'
    })
}

3.1.2 해제 API(Only Android)

SDK 해제 시 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.destroy();    
} 
else if (ios) {
    // Not Supported
}

3.2 전면 광고

3.2.1 전면 광고 요청

전면 형태의 광고 요청이 필요할 때 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.loadInterstitial(appKey, placementId);
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'loadInterstitial',
        appKey: appKey,
        placementId: placementId
    })
}

appKey : 앱키
placementId: 지면키

3.2.2 전면 광고 노출

전면 광고 노출 시 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.showInterstitial(appKey, placementId);
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'showInterstitial',
        appKey: appKey,
        placementId: placementId
    })
}

appKey : 앱키
placementId: 지면키

3.2.3 전면 광고 이벤트

전면 광고 관련 이벤트를 받고자 할 때 사용됩니다.

<body>
  <!-- ... -->
  <script>
    const handleNativeEvent = (e: CustomEvent) => {
      const eventData = e.detail.data;
      console.log(e.detail.data);
      // {
      //   EventName: `OnInterstitialLoaded`,
      //   Data:`{"placementId":"5jb921hjk4j2k4b"}`,
      // }
      // Android
      if (eventData && typeof eventData === 'object' && eventData.EventName) {
            const eventName = eventData.EventName;
            const dataString = eventData.Data;

            try {
                // 'Data' 속성에 담긴 JSON 문자열을 파싱
                const parsedData = JSON.parse(dataString);
                logMessage = `📢 ${eventName} 이벤트 발생: \n` + JSON.stringify(parsedData, null, 2);
            } catch (error) {
                // 'Data'가 JSON 형식이 아닌 경우
                logMessage = `📢 ${eventName} 이벤트 발생: \n` + `Raw Data: ${dataString}`;
            }
        }
    };

    window.addEventListener('NativeEvent', handleNativeEvent);
  </script>
</body>

(전면) 지원되는 이벤트

Event

설명

OnInterstitialLoaded (- placementId)

전면 광고 로드 성공

OnInterstitialLoadFailed (- placementId, errorCode)

전면 광고 로드 실패

OnInterstitialOpened (- placementId)

전면 광고 노출 성공

OnInterstitialOpenFailed (- placementId, errorCode)

전면 광고 노출 실패

OnInterstitialClosed (- placementId)

전면 광고 닫기

OnInterstitialClicked (- placementId)

전면 광고 클릭

3.3 전면 비디오 광고

3.3.1 전면 비디오광고 요청

전면 형태의 비디오광고 요청이 필요할 때 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.loadInterstitialVideo(appKey, placementId);
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'loadInterstitialVideo',
        appKey: appKey,
        placementId: placementId
    })
}

appKey : 앱키
placementId: 지면키

3.3.2 전면 비디오광고 노출

전면 비디오광고 노출 시 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.showInterstitialVideo(appKey, placementId);
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'showInterstitialVideo',
        appKey: appKey,
        placementId: placementId
    })
}

appKey : 앱키
placementId: 지면키

3.3.3 전면 비디오 광고 이벤트

전면 비디오광고 관련 이벤트를 받고자 할 때 사용됩니다.

<body>
  <!-- ... -->
  <script>
    const handleNativeEvent = (e: CustomEvent) => {
      const eventData = e.detail.data;
      console.log(e.detail.data);
      // {
      //   EventName: `OnInterstitialLoaded`,
      //   Data:`{"placementId":"5jb921hjk4j2k4b"}`,
      // }
      // Android
      if (eventData && typeof eventData === 'object' && eventData.EventName) {
            const eventName = eventData.EventName;
            const dataString = eventData.Data;

            try {
                // 'Data' 속성에 담긴 JSON 문자열을 파싱
                const parsedData = JSON.parse(dataString);
                logMessage = `📢 ${eventName} 이벤트 발생: \n` + JSON.stringify(parsedData, null, 2);
            } catch (error) {
                // 'Data'가 JSON 형식이 아닌 경우
                logMessage = `📢 ${eventName} 이벤트 발생: \n` + `Raw Data: ${dataString}`;
            }
        }
    };

    window.addEventListener('NativeEvent', handleNativeEvent);
  </script>
</body>

(전면 비디오) 지원되는 이벤트

Event

설명

OnInterstitialVideoAdLoaded (- placementId)

전면 비디오 광고 로드 성공

OnInterstitialVideoAdLoadFailed (- placementId, errorCode)

전면 비디오 광고 로드 실패

OnInterstitialVideoAdOpened (- placementId)

전면 비디오 광고 노출 성공

OnInterstitialVideoAdOpenFailed (- placementId, errorCode)

전면 비디오 광고 노출 실패

OnInterstitialVideoAdClosed (- placementId)

전면 비디오 광고 닫기

OnInterstitialVideoAdClicked (- placementId)

전면 비디오 광고 클릭

3.4 리워드 비디오 광고

3.4.1 리워드 비디오광고 요청

리워드 비디오광고 요청이 필요할 때 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.loadRewardVideo(appKey, placementId);
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'loadRewardVideo',
        appKey: appKey,
        placementId: placementId
    })
}

appKey : 앱키
placementId: 지면키

3.4.2 리워드 비디오광고 노출

리워드 비디오광고 노출 시 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.showRewardVideo(appKey, placementId);
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'showRewardVideo',
        appKey: appKey,
        placementId: placementId
    })
}

appKey : 앱키
placementId: 지면키

3.4.3 리워드비디오 광고 이벤트

리워드비디오광고 관련 이벤트를 받고자 할 때 사용됩니다.

<body>
  <!-- ... -->
  <script>
    const handleNativeEvent = (e: CustomEvent) => {
      const eventData = e.detail.data;
      console.log(e.detail.data);
      // {
      //   EventName: `OnInterstitialLoaded`,
      //   Data:`{"placementId":"5jb921hjk4j2k4b"}`,
      // }
      // Android
      if (eventData && typeof eventData === 'object' && eventData.EventName) {
            const eventName = eventData.EventName;
            const dataString = eventData.Data;

            try {
                // 'Data' 속성에 담긴 JSON 문자열을 파싱
                const parsedData = JSON.parse(dataString);
                logMessage = `📢 ${eventName} 이벤트 발생: \n` + JSON.stringify(parsedData, null, 2);
            } catch (error) {
                // 'Data'가 JSON 형식이 아닌 경우
                logMessage = `📢 ${eventName} 이벤트 발생: \n` + `Raw Data: ${dataString}`;
            }
        }
    };

    window.addEventListener('NativeEvent', handleNativeEvent);
  </script>
</body>

(리워드 비디오) 지원되는 이벤트

Event

설명

OnRewardVideoAdLoaded (- placementId)

리워드 비디오 광고 로드 성공

OnRewardVideoAdLoadFailed (- placementId, errorCode)

리워드 비디오 광고 로드 실패

OnRewardVideoAdOpened (- placementId)

리워드 비디오 광고 노출 성공

OnRewardVideoAdOpenFailed (- placementId, errorCode)

리워드 비디오 광고 노출 실패

OnRewardVideoPlayCompleted (- placementId)

리워드 비디오 광고 재생 완료

OnRewardVideoAdClosed (- placementId)

리워드 비디오 광고 닫기

OnRewardVideoAdClicked (- placementId)

리워드 비디오 광고 클릭

3.5 비디오 믹스 광고

3.5.1 비디오 믹스광고 요청

비디오 믹스 광고 요청이 필요할 때 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.loadVideoMix(appKey, placementId);
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'loadVideoMix',
        appKey: appKey,
        placementId: placementId
    })
}

appKey : 앱키
placementId: 지면키

3.5.2 비디오 믹스광고 노출

비디오 믹스광고 노출 시 사용되는 API 입니다.

if (typeof window.AdPopcornSSPJsBridge === 'undefined') {
    return;
}

if (Android) {
    window.AdPopcornSSPJsBridge.showVideoMix(appKey, placementId);
} 
else if (ios) {
    window.webkit.messageHandlers.AdPopcornSSPJsBridge.postMessage(JSON.stringify({
        action: 'showVideoMix',
        appKey: appKey,
        placementId: placementId
    })
}

appKey : 앱키
placementId: 지면키

3.5.3 비디오 믹스광고 이벤트

비디오 믹스광고 관련 이벤트를 받고자 할 때 사용됩니다.

<body>
  <!-- ... -->
  <script>
    const handleNativeEvent = (e: CustomEvent) => {
      const eventData = e.detail.data;
      console.log(e.detail.data);
      // {
      //   EventName: `OnInterstitialLoaded`,
      //   Data:`{"placementId":"5jb921hjk4j2k4b"}`,
      // }
      // Android
      if (eventData && typeof eventData === 'object' && eventData.EventName) {
            const eventName = eventData.EventName;
            const dataString = eventData.Data;

            try {
                // 'Data' 속성에 담긴 JSON 문자열을 파싱
                const parsedData = JSON.parse(dataString);
                logMessage = `📢 ${eventName} 이벤트 발생: \n` + JSON.stringify(parsedData, null, 2);
            } catch (error) {
                // 'Data'가 JSON 형식이 아닌 경우
                logMessage = `📢 ${eventName} 이벤트 발생: \n` + `Raw Data: ${dataString}`;
            }
        }
    };
    window.addEventListener('NativeEvent', handleNativeEvent);
  </script>
</body>

(비디오 믹스) 지원되는 이벤트

Event

설명

OnRewardVideoAdLoaded (- placementId)

비디오 믹스 광고 로드 성공

OnRewardVideoAdLoadFailed (- placementId, errorCode)

비디오 믹스 광고 로드 실패

OnRewardVideoAdOpened (- placementId)

비디오 믹스 광고 노출 성공

OnRewardVideoAdOpenFailed (- placementId, errorCode)

비디오 믹스 광고 노출 실패

OnRewardVideoPlayCompleted (- placementId)

비디오 믹스 광고 재생 완료

OnRewardVideoAdClosed (- placementId - campaignType : 2(전면), 4(리워드 비디오), 6(전면 비디오))

비디오 믹스 광고 닫기

OnRewardVideoAdClicked (- placementId)

비디오 믹스 광고 클릭

Previous릴리즈노트 NextUnity

Last updated 13 days ago

Was this helpful?