> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/offerwall/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/offerwall/publisher/app-sdk/web-sdk/native.md). # 네이티브 상품 연동 ## Web SDK 네이티브 상품 연동 웹 환경에서 네이티브 상품을 연동하는 방법을 안내해요. 네이티브는 매체의 UI에 자연스럽게 녹아드는 광고 형태예요. *** ### 사전 준비 * Web SDK 기본 설정 완료 (SDK 로드, 초기화) → [**\[기본 설정\]**](/offerwall/publisher/app-sdk/web-sdk/default-settings.md) *** ### 전체 흐름
단계내용소요 시간
Step 1네이티브 광고 노출약 3분
*** ### Step 1. 네이티브 광고 노출 광고를 노출할 `div` 요소에 `id`를 설정하고, `createNative`로 인스턴스를 생성한 후 `display`를 호출해요. > 실행 스크립트는 `` 요소의 하단에 삽입하는 것을 권장해요. #### 인스턴스 생성 함수 | 함수명 | 설명 | | ------------ | --------------- | | createNative | 네이티브 지면 인스턴스 생성 | #### 인스턴스 생성 파라미터 | 속성 | 타입 | 필수 | 설명 | | --- | ------ | -- | ----- | | PID | string | 필수 | 지면 ID | #### 액션 정의 (필수) 개인정보 동의 체크 방식: Web SDK에서 오퍼월 로드 시 localStorage에서 `offerwall_privacy_agreement`의 상태('true' 또는 'false')를 읽어 개인정보 팝업을 노출해요. | 액션명 | 설명 | 전달 데이터 | 비고 | | -------------------- | ---------- | ------ | ------------------------------------------------------------------- | | closeOfferwall | 오퍼월 닫기 | - | | | openWebBrowser | 외부 브라우저 열기 | url | | | onAgreePrivacy | 개인정보 동의 | - | localStorage에 key: `offerwall_privacy_agreement`, value: 'true' 추가 | | onDisagreePrivacy | 개인정보 동의 철회 | - | localStorage에 key: `offerwall_privacy_agreement`, value: 'false' 추가 | | openNewInAppBrowser | 인앱 브라우저 열기 | url | | | closeNewInAppBrowser | 인앱 브라우저 닫기 | - | | #### 이벤트 정의 (선택) | 이벤트명 | 설명 | | ---------------------- | -------------- | | onOfferwallLoadSuccess | 오퍼월 로드 성공 | | onOfferwallLoadFailed | 오퍼월 로드 실패 | | onNativeLoadSuccess | 네이티브 로드 성공 | | onNativeLoadFailed | 네이티브 로드 실패 | | onAdClicked | 네이티브 캠페인 클릭 감지 | #### onNativeLoadFailed 에러 코드 | 코드 | 설명 | | ---- | -------------- | | 200 | 알 수 없는 오류 | | 1000 | 참여 가능한 캠페인이 없음 | | 1003 | 네트워크 오류 발생 | > `onNativeLoadFailed` 이벤트를 받은 경우, 광고 영역을 숨김 처리하는 것을 권장해요. #### 연동 예제 ```html
``` *** ### 관련 가이드 * Web SDK 기본 설정 → [**\[기본 설정\]**](/offerwall/publisher/app-sdk/web-sdk/default-settings.md) * 오퍼월 상품 연동 → [**\[오퍼월 상품 연동\]**](/offerwall/publisher/app-sdk/web-sdk/offerwall.md) * 브릿지 상품 연동 → [**\[브릿지 상품 연동\]**](/offerwall/publisher/app-sdk/web-sdk/bridge.md)