![[네이버페이] 쇼핑몰 연동하기 -1.네이버 공통유입경로 스크립트 설치](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FeUlLM0%2FbtsjR86Z46K%2FsqcEUvTgw5Exa22dFdMELK%2Fimg.png)
네이버페이 연동은 가이드(매뉴얼)이 잘 되어있어 따라만 하면 된다고 한다.
매뉴얼을 보고도 이해가 안가면 동영상으로도 상세히 설명해준다.
게다가 연동하다가 어렵다거나,
잘 안 될 경우 네이버쪽 담당자(dl_techsupport@navercorp.com)에게 메일을 보내면 답변해준다고 하니 한 번 해보도록 하자!
# 주문 버전 선택
우리는 옵션정보나 추가상품 등 고려해야 할 사항이 많기 때문에 주문 2.1 버전으로 선택한다.
# 5단계 개발 단위 구분
동영상에서 개발 단위를 5가지로 구분하여 설명해주고 있다. 벌써 진땀이 난다..💧
0_개발 시작 전 준비하기
📌가맹점ID와 심사완료메일로 온 세가지 인증키를 확인한다.
- 가맹점ID : merchantId
- 가맹점인증키 : CERTI_KEY
- 버튼 인증키 : BUTOTN_KEY
- 네이버공통인증키 : Account_Id
📌그리고 dl_techsupport@navercorp.com 여기로 테스트 환경 세팅을 요청한다.
요청하지 않으면, 개발 시 '인증되지 않은 가맹점입니다.' 알림창이 뜬다.
1_ 네이버 공통유입경로 스크립트 설치
네이버서비스에서 공통으로 사용하는 스크립트로, 유입경로 분석을 위해서 사용한다고 한다.
주 목적인 네이버페이와는 다른 것 같지만 설치하라니까 해보도록 하겠다.
1) 네이버 공통 유입 경로 스크립트 동작방식
네이버에서 우리 쇼핑몰을 검색하면, 내가 파워포인트로 직접 만든 사이트아이콘과 함께 아래와 같이 뜬다.(뿌듯)
아직은 네이버 로그인만 연동되어있기 때문에, 사이트명 오른쪽에 N로그인 뱃지만 뜬다.
네이버페이 서비스가 오픈될 경우, N Pay 뱃지가 추가되고, 사이트로 유입될 때 GET 파라미터로 Napm이라는 값을 함께 전달한다.
이 Napm값으로 NVADID, CPAValidator, NA_CO 세가지 쿠키 값이 자동으로 생성된다. 단, 테스트 서버에서는 확인하기 어려우므로 서비스 오픈 과정에서 다시 한 번 확인이 필요하다.
- CPAValidator : 네이버쇼핑 가맹점 중 파라미터 방식으로 CPA 트래킹 사용. 주문등록 시 CPA_INFLOW_CODE 파라미터로 사용
- NVADID : 네이버 검색광고주일 때 검색광고를 통해 쇼핑몰 유입시 쿠키 생성. 주문등록 시 SA_CLICK_ID 파라미터로 사용
- NA_CO : 사이트, 쇼핑 등 검색을 통해 쇼핑몰 유입 시 쿠키 생성. 주문등록 시 NAVER_INFLOW_CODE 파라미터로 사용
2) 👁🗨설치
2-1. 공통 스크립트 파일 삽입, AccountID 설정
쇼핑몰의 모든 유입 페이지 내에 설치하여 COOKIE 값이 생성/유지될 수 있도록 개발하며, 네이버페이 버튼 스크립트보다 위에 있어야 함.
기존 소스에서 검색해보니 footer에 해당 소스가 들어가있다.
네이버페이 버튼 스크립트보다 위에 있어야 하므로 header파일로 옮겨준다.
2-2. 화이트리스트 설정
* 설정할 경우, 유입경로 추적함수 앞에 위치해야한다.
다수의 도메인을 사용하거나 패밀리 사이트를 운영하는 경우에 설정한다.
패밀리 사이트를 5개 운영중인데, 네이버쇼핑센터에는 하나의 쇼핑몰만 가입되어있어서 해당되는지는 잘 모르겠다.
음, 아무래도 다른 도메인으로 들어갈 경우 네이버유입 경로 정보가 사라질 수 있어서 설정하는거라 내 경우에는 설정하지 않아도 될 것 같다.
2-3. 유입경로 추적 함수 설정
* 네이버페이 버튼 삽입 전에 위치
유입 경로 추적 함수에 설정해야 하는 도메인은 최상위 도메인 값으로 넣어야 한다.
예를 들어 www.naver.com 인 경우 naver.com으로, 서브도메인이 shop.naver.com인 경우에도 naver.com으로 넣어준다.
입력하지 않을 경우 기본값으로 랜딩 페이지의 도메인이 사용된다.
wcs.inflow(sDomain);
2-4. 로그수집 공통함수 설정
로그수집하는 함수인데, 정확히 어떤 기능을 하는지는 모르겠지만 페이지 로딩이 끝난 시점에 로그가 전송될 수 있도록 </body>의 바로 앞에서 호출해준다. 이 코드는 footer에 삽입했다.
선택 파라미터로는 key,value 형태의 Object를 넘길 수 있으며, 주문 정보 등 추가 정보가 있을 때 입력한다.
wcs_do(oEtc);
유입경로 추적함수, 로그수집 공통함수는 각 랜딩페이지에 삽입해줘야하는데 일단은 header페이지에 다 넣어줬다.
<head>
//2-1. 공통스크립트 파일 삽입
//http
<script type="text/javascript" src="http://wcs.naver.net/wcslog.js"></script>
//https
<script type="text/javascript" src="https://wcs.naver.net/wcslog.js"></script>
//2-1. accountId 설정
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "AccountID";
//2-2. 화이트리스트(서브도메인, 패밀리사이트)설정
wcs.checkoutWhitelist=["sample.com","sample2.com"];
//2-3. 유입경로 추적함수
wcs.inflow();
</script>
</head>
<body>
//네이버페이 버튼 스크립트 설치(상품 상세페이지 or 결제페이지)
//2-4. 로그수집 공통함수 설정
<script>
wcs_do();
</script>
</body>이 정도로 해놓고,
잘 되는지는 나중에 네이버페이 서비스를 오픈했을 때 네이버에서 쇼핑몰 검색 후 pay뱃지와,
클릭해서 페이지 이동 시 napm GET파라미터가 잘 넘어오는지 확인해봐야겠다.
2_ 네이버페이 버튼 스크립트 설치
3_ 주문등록, 주문페이지 호출
4_ 상품정보 XML
5_MOBILE 버전 개발
cf. 가이드
https://developer.pay.naver.com/docs/v2/api#getstarted
네이버페이 개발자센터
응답 예 Response HTTP/1.1 200 OK { "code": "Success", "message": "", "body": { "businessNo": "2208162517", "differenceResults": [{ "differenceRequestId": "DR201810300000008013", "payHistId": "20181113NP1000488732", "orderNo": "TEST001", "sequence": "00"
developer.pay.naver.com
'WEB' 카테고리의 다른 글
| [네이버페이] 쇼핑몰 연동하기 -3.주문등록, 주문페이지 호출 (0) | 2023.03.14 |
|---|---|
| [네이버페이] 쇼핑몰 연동하기 -2.네이버페이 버튼 스크립트 설치 (1) | 2023.03.09 |