> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/ssp-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adpopcornssp.gitbook.io/ssp-sdk/undefined-2/extra-guide/coupang-click-reward-page-guide.md).

# 쿠팡 클릭 이벤트 페이지 연동 가이드

## 1. 이벤트 페이지 URL 연동

{% code overflow="wrap" %}

```
https://click-reward.adpopcorn.com/sample?identifier={adid_or_idfa}
```

{% endcode %}

* 이벤트 페이지 URL은 매체별로 구분됩니다. 
* 이벤트 페이지의 주소는 사업팀(<pm@adpopcorn.com>)을 통해 전달됩니다.
* <mark style="color:red;">**(필수) identifier에 android의 경우 adid, ios일 경우 idfa를 넘겨주어야 합니다.**</mark>

## 2. 웹뷰 내 JavascriptInterface 설정

이벤트 페이지의 원활한 동작을 위해 아래 가이드를 참고하여 JavascriptInterface 설정을 진행해 주어야 합니다.

### 2.1 공통 사항

* 호출은 **APSSPClickReward** 객체로 호출합니다. 이에 아래와 같이 각 OS 환경에 맞게 APSSPClickReward 를 등록해 주어야 합니다.&#x20;

{% tabs %}
{% tab title="Android" %}

<pre class="language-java"><code class="lang-java"><strong>webView = new WebView(context.getApplicationContext());
</strong>webView.addJavascriptInterface(this, "APSSPClickReward");
</code></pre>

{% endtab %}

{% tab title="iOS" %}

<pre class="language-objectivec" data-overflow="wrap"><code class="lang-objectivec">wkContentController = [[WKUserContentController alloc]init];
[wkContentController addScriptMessageHandler:self name:@"APSSPClickReward"];

webViewConfiguration = [[WKWebViewConfiguration alloc]init];
webViewConfiguration.userContentController = wkContentController;

<strong>webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen     mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) configuration:webViewConfiguration];
</strong></code></pre>

{% endtab %}
{% endtabs %}

### 2.2 Interfaces

#### 2.2.1 closeWebView()

* 설명 : 이벤트 페이지의 상단 백버튼 클릭 시, 호출되며 현재의 웹뷰 화면을 종료 처리해 주어야 합니다.
* 아래 샘플 코드를 참고해, 매체사의 개발환경에 맞게 변형하여 처리해 줍니다.

{% tabs %}
{% tab title="Android" %}

```java
@JavascriptInterface
public void closeWebView(){
    finish();
}
```

{% endtab %}

{% tab title="iOS" %}

```objectivec
#pragma mark WKUIDelegate
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message
{
    if([message.name isEqualToString:@"APSSPClickReward"]){
        id JSON;
        if ([[message body] isKindOfClass:[NSString class]]) {
            id strJson = [message body];
            NSData *nsData = [strJson dataUsingEncoding:NSUTF8StringEncoding];
            JSON = [NSJSONSerialization JSONObjectWithData:nsData options:0 error:nil];
        }
        else
        {
            JSON = [message body];
        }
        
        NSString *action = [self checkNilToBlankString:[JSON valueForKey:@"action"]];
        if([action isEqualToString:@"closeWebView"])
        {
            [webView loadHTMLString:@"" baseURL:nil];
            [webView stopLoading];
            webView.UIDelegate = nil;
            webView.navigationDelegate = nil;
            [webView removeFromSuperview];
            webView = nil;
            [self.navigationController popViewControllerAnimated:NO];
        }
    }
}

- (NSString *)checkNilToBlankString:(id)target
{
    NSString *returnString = @"";
    if (!([target isEqual:[NSNull null]] || target == nil))
    {
        returnString = target;
    }
    
    return returnString;
}
```

{% endtab %}
{% endtabs %}

#### 2.2.2 adClicked()

* 설명 : 이벤트 페이지의 광고를 클릭 한 시점에 발생하는 이벤트입니다.
* 클릭 이벤트 발생 시, 매체사가 원하는 동작 처리를 할 때 사용 가능하며, 아래 샘플 코드를 참고해, 매체사의 개발환경에 맞게 변형하여 처리해 줍니다.&#x20;

{% tabs %}
{% tab title="Android" %}

```java
@JavascriptInterface
public void adClicked(){
    // 리워드 지급
}
```

{% endtab %}

{% tab title="iOS" %}

```objectivec
#pragma mark WKUIDelegate
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message
{
    if([message.name isEqualToString:@"APSSPClickReward"]){
        id JSON;
        if ([[message body] isKindOfClass:[NSString class]]) {
            id strJson = [message body];
            NSData *nsData = [strJson dataUsingEncoding:NSUTF8StringEncoding];
            JSON = [NSJSONSerialization JSONObjectWithData:nsData options:0 error:nil];
        }
        else
        {
            JSON = [message body];
        }
        
        NSString *action = [self checkNilToBlankString:[JSON valueForKey:@"action"]];
        if([action isEqualToString:@"closeWebView"])
        {
            [webView loadHTMLString:@"" baseURL:nil];
            [webView stopLoading];
            webView.UIDelegate = nil;
            webView.navigationDelegate = nil;
            [webView removeFromSuperview];
            webView = nil;
            [self.navigationController popViewControllerAnimated:NO];
        }
        else if([action isEqualToString:@"adClicked"])
        {
            // 리워드 지급 처리 등
        }
    }
}

- (NSString *)checkNilToBlankString:(id)target
{
    NSString *returnString = @"";
    if (!([target isEqual:[NSNull null]] || target == nil))
    {
        returnString = target;
    }
    
    return returnString;
}
```

{% endtab %}
{% endtabs %}

### 2.3 쿠팡 광고 클릭에 대한 처리

아래 설정이 누락될 경우, 광고 클릭 시, 웹뷰 내에서 광고 페이지로 랜딩됩니다. 이에 반드시 연동을 진행해 주어야 합니다.

{% tabs %}
{% tab title="Android" %}

<pre class="language-java"><code class="lang-java">
private void setWebViewSetting(){
      webView = new WebView(context.getApplicationContext());
<strong>      webView.addJavascriptInterface(this, "APSSPClickReward");
</strong><strong>      webView.getSettings().setJavaScriptEnabled(true);
</strong><strong>      webView.setWebViewClient(new WebViewClient() {
</strong>          @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;
          }
      });
}
</code></pre>

{% endtab %}

{% tab title="iOS" %}

<pre class="language-objectivec"><code class="lang-objectivec">#pragma mark WKUIDelegate
- (nullable WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures
{
    NSString *requestString = navigationAction.request.URL.absoluteString;
    if(navigationAction.navigationType == WKNavigationTypeLinkActivated ||
       navigationAction.navigationType == WKNavigationTypeOther)
    {
        NSURL *requestURL = [NSURL URLWithString:requestString];
        if(@available(iOS 10, *))
        {
            [[UIApplication sharedApplication] openURL:requestURL options:@{} completionHandler:^(BOOL success) {
                if (success) {
                    [_webView stopLoading];
                }
            }];
        }
        else
        {
            [[UIApplication sharedApplication] openURL:requestURL];
            [_webView stopLoading];
        }
    }
    return nil;
}

#pragma mark - WKNavigationDelegate
<strong>- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
</strong>{
    NSString *requestString = navigationAction.request.URL.absoluteString;
    if(navigationAction.navigationType == WKNavigationTypeLinkActivated)
    {
        decisionHandler(WKNavigationActionPolicyCancel);
        NSURL *requestURL = [NSURL URLWithString:requestString];
        if(@available(iOS 10, *))
        {
            [[UIApplication sharedApplication] openURL:requestURL options:@{} completionHandler:^(BOOL success) {
                if (success) {
                    [_webView stopLoading];
                }
            }];
        }
        else
        {
            [[UIApplication sharedApplication] openURL:requestURL];
            [_webView stopLoading];
        }
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}
</code></pre>

{% endtab %}
{% endtabs %}