하이브리드 앱에서 Click 처리에 대한 문의

changhoh0708 commented 2 years ago

하이브리드 앱으로 된 경우(일부 영역은 native, 일부 영역은 mobile web) click event 시 mobile web 영역만 landing url 로 이동하여 기능성에 문제가 생기고 있는데 window.gladsdk.event.AD_CLICKED 이벤트로 landing url을 전달받아 새로운 웹뷰 or oem 브라우저를 열어 처리할 수 있는 방법이 있을 지 문의 드립니다.

changhoh0708 commented 2 years ago

해결 방안을 찾았습니다. 감사합니다.

sungwook-kwon commented 2 years ago

@changhoh0708 님 안녕하세요.

답변 드리려고 했는데 해결 방안을 찾으셨군요. 혹시 어떤 방식으로 해결 하셨는지 공유 가능하실까요? 참고로 저희가 생각하는 두가지 방안에 대해서 안내 드립니다.

클릭 랜딩을 앱에서 핸들링 할 수 있도록 광고 유형에 맞는 인터페이스를 아래와 같이 제공 또는 준비중에 있습니다. 배너와 네이티브 스타일이 모두 나갈 수 있다면, 아래 두 인터페이스를 모두 활용하는 방법이 있을 것 같습니다.

SDK 인터페이스 활용 방안

NATIVE - 오픈 완료

var adSlot = window.gladsdk.findAdSlot('div-1');
adSlot.setNativeClickHandler(function (curl, furl) {
  // curl : click url(string), furl: fallback url(string)
  console.debug('curl', curl, 'furl', furl);
});

BANNER - 7월초 오픈 예정

var adSlot = window.gladsdk.findAdSlot('div-1');
adSlot.setClickHandler(curl: string, furl?: string, ext?: any): void {
  ...
}

단, BANNER 광고에 대한 클릭 핸들링은 광고 마크업이 <a href= 로 구성되어 있는 경우에만 동작하며 간혹 target.addEventListener("click", () => {}) 의 이벤트 바인딩으로 구성된 외부 네트워크 광고의 경우 클릭 핸들러가 동작하지 않고 내부 인앱웹뷰에서 랜딩될 수 있습니다.

Android / iOS WebView API 활용 방안

SDK 인터페이스를 활용하는 방법외에 Android(shouldOverrideUrlLoading) 또는 iOS(WKNavigationAction) APP 에서 WebView 랜딩 URL을 인터셉트 하는 방법도 있을것 같습니다.

changhoh0708 commented 2 years ago

안녕하세요. 제가 처리하고자 했던 방법은 APP 재배포를 통한 웹뷰 설정 수정입니다. APP 배포 없이 해결할 수 있다면 더 좋을 듯 합니다.

가이드 감사드립니다.

다만, 위에 공유해주신 SDK 인터페이스 활용 방안을 어떻게 적용해야 할지 다시 문의 드립니다. 아래와 같은 오류가 확인됩니다.

scheduler.development.js:171 Uncaught TypeError: window.gladsdk.findAdSlot is not a function at NaverAd.js:40:1 at invokePassiveEffectCreate (react-dom.development.js:23487:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at flushPassiveEffectsImpl (react-dom.development.js:23574:1) at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1) at flushPassiveEffects (react-dom.development.js:23447:1) at react-dom.development.js:23324:1 at workLoop (scheduler.development.js:417:1) at flushWork (scheduler.development.js:390:1) at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)

sungwook-kwon commented 2 years ago

@changhoh0708 SDK 인터페이스를 찾지 못하는것 같네요. 혹시 아래와 같이 함수 실행큐 window.gladsdk.cmd.push 내부에서 호출되고 있는지 확인 부탁드립니다.

참고로 현재는 setNativeClickHandler 핸들러만 제공하고 있습니다.

<script async src="https://ssl.pstatic.net/tveta/libs/glad/prod/gfp-core.js"></script>
<script>
  window.gladsdk = window.gladsdk || { cmd: [] };

  window.gladsdk.cmd.push(function () {
    var adSlotInfo = {
      adUnitId: 'ADUNIT_ID',
      adSlotElementId: 'DIV_ID',
    };

    var adSlot = window.gladsdk.defineAdSlot(adSlotInfo);

    adSlot.setNativeClickHandler(function (curl, furl) {
      // curl : click url(string), furl: fallback url(string)
      console.debug('curl', curl, 'furl', furl);
    });
  });
</script>

cc. @naver/namsdk-dev

changhoh0708 commented 2 years ago

가이드 감사드립니다. 동작 확인 하였습니다. 혹시, BANNER_TYPE에 대한 일정 확인이 가능할까요?

sungwook-kwon commented 2 years ago

@changhoh0708 님

BANNER 의 clickHandler 개발은 완료 되었으나 현재 QA 진행중에 있어 SDK 릴리즈 일정이 결정되지 않았습니다. 현재 진행 상황으로 보아 7월중 릴리즈 예상는데요. 일정 확정되면 아래 레포를 통해 공유 드리도록 하겠습니다.

https://github.com/naver/nam-sdk-web

참고로 SDK Repository 가 위 경로로 변경 되었으니 참고 부탁드립니다.

jh24-kim commented 2 years ago

@changhoh0708 님 안녕하세요.

clickHandler 인터페이스가 포함된 버전의 SDK가 릴리즈 안료되었습니다. 아래 예제 코드를 확인하시어 적용하시면 됩니다. https://github.com/naver/nam-sdk-web/blob/main/examples/setClickHandler.html

만일 문의 사항이 있으면 해당 레포의 이슈로 문의 부탁드리겠습니다.

보다 자세한 가이드는 아래 주소를 참조하시면 됩니다. https://naver.github.io/nam-sdk-guide/web/common/additional_api#%ED%81%B4%EB%A6%AD-%ED%95%B8%EB%93%A4%EB%9F%AC-%EB%93%B1%EB%A1%9D

c.c. @sungwook-kwon

naver / glad-sdk-web