시작하기

Javascript 웹 광고 가이드

Javascript 적용하기

<html lang="ko">
<head>
    <script defer src="https://ads-static.v2.dexops.co.kr/js/dexops_agent_ads.js" data-campaign="광고 서버 URL"></script>
</head>
</html>

CDN Link

https://ads-static.v2.dexops.co.kr/js/dexops_agent_ads.js

광고 요청

Custom Element 또는 Javascript 함수 호출 선택 하여 적용

Custom Element 적용 가이드

<html lang="ko">
<head>
    <script defer src="https://ads-static.v2.dexops.co.kr/js/dexops_agent_ads.js" data-campaign="광고 서버 URL"></script>
</head>
<body>
    <!-- 고정배너는 특정 위치를 필요로 하기 때문에 특정 위치에 HTML Tag를 작성 해야 함 -->
    <!-- 그외 광고 형태는 화면에서 고정된 위치에서 보여지기 때문에 HTML Tag 위치는 중요하지 않음 -->
    <!-- 일반 웹과 Hybrid 앱(웹) 동일한 페이지에서 적용이 필요한 경우 분기 처리 필수 -->
    <div>
        <!-- channel, section, slot 은 필수  -->
        <dexops-ads-view data-channel="0" data-section="0" data-slot="0" data-top-margin="0" data-bottom-margin="0" data-left-margin="0" data-right-margin="0"></dexops-ads-view>
    </div>
    
    <!-- 광고 응답 콜백 이벤트 필요한 경우 -->
    <script>
        for (let element of document.getElementsByTagName('dexops-ads-view') ){
            element.addEventListener('dexopsAdsViewCompletion', function (ev) {
                const status = this.dataset.status; //성공 true, 실패 false
                const message = this.dataset.message; //결과 메세지
                const channel = this.dataset.channel; //채널
                const section = this.dataset.section; //섹션
                const slot = this.dataset.slot; //슬롯
            });
        }
    </script>
</body>
</html>

Javascript 적용 가이드

<html lang="ko">
<head>
    <script defer src="https://ads-static.v2.dexops.co.kr/js/dexops_agent_ads.js" data-campaign="광고 서버 URL"></script>
</head>
<body>
    <!-- 고정배너는 특정 위치를 필요로 하기 때문에 특정 위치에 HTML Tag를 작성 해야 함 -->
    <!-- 그외 광고 형태는 화면에서 고정된 위치에서 보여지기 때문에 HTML Tag 위치는 중요하지 않음 -->
    <!-- 일반 웹과 Hybrid 앱(웹) 동일한 페이지에서 적용이 필요한 경우 분기 처리 필수 -->
    <div id="ads"></div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const marginInfo = {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
            }
            
            //광고 요청       
            DeXOps.bannerView(document.getElementById('ads'), channel, section, slot, marginInfo).then( function (result) {
                console.log(result);
            }).catch( function (err) {
                console.log(err);
            });
        });
    </script>
</body>
</html>

단말 광고 ID를 이용한 광고 요청

하이브리드 앱에만 적용 가능
iOS, Android SDK를 사용하지 않고 단말의 광고 ID를 가지고 광고 요청
WebView 의 세션 스토리지에 광고 ID 와 광고 ID Type 을 저장하면 저장된 광고 ID를 가지고 광고를 요청 하게 됨
- Key : appAdId, Value: 단말 광고 ID
- Key: appAdIdType, Value: IDFA(iOS), ADID(Android)

iOS WKWebView 설정

Sample Code

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let script = WKUserScript(
            source: "window.sessionStorage.setItem('appAdId', '\("광고ID")');window.sessionStorage.setItem('appAdIdType', 'IDFA');",
            injectionTime: .atDocumentStart,
            forMainFrameOnly: true )
            
        wkWebView.configuration.userContentController.addUserScript(script)        
    }
}

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSString *script = [NSString stringWithFormat:@"window.sessionStorage.setItem('appAdId', '%@');window.sessionStorage.setItem('appAdIdType', 'IDFA');", @"광고ID"];
    WKUserScript *wkUserScript = [[WKUserScript alloc] initWithSource:script injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
    [[[self.wkWebView configuration] userContentController] addUserScript:wkUserScript];
}

@end

Android WebView 설정

Sample Code

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        webView.webViewClient = CustomWebViewClient()
    }
    
    class CustomWebViewClient: WebViewClient() {
        override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
            super.onPageStarted(view, url, favicon)

            val script = """
                javascript:window.sessionStorage.setItem('appAdId', '광고 ID');
                window.sessionStorage.setItem('appAdIdType', 'ADID');                
            """.trimIndent()
            view?.let { webView ->
                webView.post {
                    webView.evaluateJavascript(script) { result ->
                        Log.d("CustomWebViewClient", result)
                    }
                }
            }
        }
    }
}

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        webView.setWebViewClient(new CustomWebViewClient());
    }
    
    static class CustomWebViewClient extends WebViewClient {
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            String script = String.format("javascript:window.sessionStorage.setItem('appAdId', '%s');" +
                    "window.sessionStorage.setItem('appAdIdType', '%s');", "광고 ID", "ADID");
            if (view != null) {
                view.post(() -> {
                    view.evaluateJavascript(script, value -> {
                        Log.d("CustomWebViewClient", value);
                    });
                });
            }
        }
    }
}

PreviousJAVASCRIPT Next주요 함수

Last updated 1 year ago

Was this helpful?