*공지사항-알림

Coupang Partners - 다이나믹 배너

[][][] 2020. 11. 18. 23:55

Coupang Partners - 다이나믹 배너

다이나믹 배너

개요

Coupang Partners 다이나믹 위젯의 태그는 HTML 코드 조각이며, 실제로는 스크립트 태그라서 모든 웹 기술과 함께 사용할 수 있습니다. WebView로 웹사이트 내 페이지 혹은 어플리케이션에 태그를 삽입할 수 있습니다. 본 가이드의 목적은 웹 페이지나 WebView에 태그를 어떻게 추가하는지 설명하는 것입니다.

 

태그 샘플

Coupang Partners 다이나믹 위젯의 태그는아래와 같습니다.

<script src="https://ads-partners.coupang.com/g.js"></script> <script> new PartnersCoupang.G({ id: 1 }); </script>

다이나믹 배너 메뉴를 통해 https://partners.coupang.com 에서 태그를 추가할 수 있습니다.

 

웹 페이지에서 활용

웹 페이지에 코드를 붙여넣기 전에 해당 페이지를 완전히 컨트롤할 수 있어야 합니다. 즉, 타겟 페이지의 HTML 소스 코드를 수정할 수 있어야 합니다. 단 네이버 블로그는 스크립트 태그를 지원하지 않습니다. 타겟 페이지에 지정된 광고 영역이 있는 경우 간편하게 태그 코드를 복사해서 입력하면 됩니다. 아니면 Container 요소로 해당 태그를 포장(예를 들어 위치/크기 등을 명시)할 수 있으나, 이는 선택 사항입니다. 페이지가 렌더링되면 쿠팡 파트너스 태그에서 광고 렌더링을 위한 iframe을 생성하며, iframe이 <script> 자체의 previous sibling으로 삽입됩니다. 웹 페이지의 소스 코드를 저장하고 최종 효과를 확인해주세요. 다이나믹 위젯은 반응형(Responsive)이라 모든 크기에 맞출 수 있습니다. (최소 80x80에서 최대 2,000x2,000) 최종 위젯의 모습은 아래와 같고 다양한 크기로 등록됩니다.

 

Parent Container의 크기는 위젯에 맞춰야 하며 위젯 인스턴스를 생성할 때는 아래에 보시는 것처럼 해당 위젯의 크기를 명시해야 합니다.

 

어플리케이션에서의 활용

쿠팡 파트너스의 광고가 게재되는 모바일 어플리케이션의 경우 현재는 WebView를 사용해야 합니다. 기본적으로 사용자가 WebView에서 광고 상품을 클릭할 때 쿠팡 어플리케이션 및 관련 view에 대한 route가 오픈되는데, 최종 링크의 형식이 http 혹은 https가 아니라 market://혹은 coupang:// 처럼 WebView로는 처리할 수 없는 스키마(schema)인 경우 링크 탐색(Navigation)을 메뉴얼로 처리해야 합니다. WebView 내에서 광고를 제대로 렌더링하기 위해서는, 광고 위젯의 container로서 <div> 또는 <ins> 등의 HTML 요소로 스크립트 태그를 포장해야 합니다.

 

1. iOS

iOS의 경우 OS 버전 9.0 이상에서 쿠팡 태그를 WebView에 추가할 수 있습니다. WKWebView와 UIWebView 둘다 작동 가능하나, UIWebView가 OS 버전 12부터 사용 중지됐기 때문에 WKWebView를 사용할 것을 권장합니다. 그리고 태그를 하기와 같이 로딩하세요. 광고 내 상품을 클릭했을 때 쿠팡 앱/웹페이지를 열기 위해, 다음과 같은 단계를 따라야 합니다.

let html = """ <div style="height: 120px;"> <script src="https://ads-partners.coupang.com/g.js"></script> <script> new PartnersCoupang.G({ id: 1 }); </script> </div> """ webView.loadHTMLString(html, nil)

 

1.1 UIWebView

UIWebView를 사용한다면, 뷰 컨트롤러를 위해 UIWebViewDelegate를 실행해야 하며, WebView의 네비게이션 작동을 차단하기 위해 shouldStartLoadWith 메소드를 추가해야 합니다.

func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool { if navigationType == UIWebViewNavigationType.linkClicked { if #available(iOS 10.0, *) { UIApplication.shared.open(request.url!, options: [:], completionHandler: nil) } else { UIApplication.shared.openURL(request.url!) } return false } return true }

 

1.2 WKWebView

UIWebView를 사용한다면, 뷰 컨트롤러를 위해 UIWebViewDelegate를 실행해야 하며, WebView의 네비게이션 작동을 차단하기 위해 shouldStartLoadWith 메소드를 추가해야 합니다.

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Swift.Void) { if(navigationAction.navigationType == WKNavigationType.linkActivated) { let url = navigationAction.request.url; if #available(iOS 10.0, *) { UIApplication.shared.open(url!, options: [:], completionHandler: nil) } else { UIApplication.shared.openURL(url!) } } decisionHandler(.allow) }

 

2. Android

안드로이드에서는 간단히 WebView를 사용할 수 있습니다.

  • JavaScript 활성화
  • 신규 WebViewClient 를 설정하고, shouldOverrideUrlLoading을 사용해 다음과 같이 오버라이드합니다

 

WebView webView = findViewById(R.id.webView); webView.getSettings().setJavaScriptEnabled(true); webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) { Intent intent = new Intent(Intent.ACTION_VIEW, request.getUrl()); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_SINGLE_TOP); startActivity(intent); return true; } });

String html = "<div style=\"height: 120px\">\n" + "\t\t\t\t \n" + "\t\t\t\t<script>\n" + "\t\t\t\t\tnew PartnersCoupang.G({\n" + "\t\t\t\t\t\t\"id\": 1\n" + "\t\t\t\t\t});\n" + "\t\t\t\t</script>\t\t\n" + "\t\t</div>"; webView.loadData(html, "text/html", "UTF8");

 

커스터마이징 가이드

다이나믹 배너에서 생성 태그는 다음과 같습니다.

<script src="https://ads-partners.coupang.com/g.js"></script> <script> new PartnersCoupang.G({ id: 1 }); </script>

 

위와 같이 오직 id만 파라미터로 명시되어 있고,폭,높이, 경계선과 같은 기타 파라미터는 서버 사이드에서 가져오며, id를 통해 추출할 수 있습니다. 그러나 필요한 경우, 기타 파라미터를 오버라이드할 수 있으며, 오버라이드 가능한 파라미터는 다음과 같습니다.

  • width, 위젯의 가로 픽셀, 배율 값도 사용 가능
  • height, 위젯의 세로 픽셀
  • bordered, 위젯의 경계선 표시 여부, 해당 값은 true 또는 false로만 설정
  • subId, 이 파라미터는 네트워크 업체만 해당합니다. 대부분 사용자의 경우 이 값이 필요하지 않습니다
  • deviceId, 이 파라미터는 고객 관심 기반 배너를 이용 할 때 모바일 기기의 adid/idfa를 사용합니다.

 

태그 예시

<script src="https://ads-partners.coupang.com/g.js"></script> <script> new PartnersCoupang.G({ id: 1, width: '100%', height: 120, bordered: false, subId: '12345678', deviceId: 'beaab7f6-4bd3-11ea-b4d9-1c36bbeced53' }); </script>

 

 

저작자표시