로딩중
세팅 가이드

shop by (basic, pro)

스크립트 삽입 세팅

NHN커머스의 이커머스 플랫폼, shop by에서 팝업, 배너, 게시판을 통해 룰렛·래플·복불복 이벤트, 퀴즈 캠페인, 체험단 모집과 같은 프로모션을 게시하고 운영하는 방법을 안내합니다.

1. 스크립트 복사

  1. 대시보드 > 프로모션 관리에서 스크립트 보기를 선택해 스크립트를 복사하세요.

    프로모션 스크립트 복사 버튼 위치 설명 스크린샷

2. 팝업창 등록

  1. Shop by 어드민의 디자인 > 디자인 설정 > 팝업창 관리에서 목록 위 팝업창 등록을 선택하세요.

    NHN Shop by 어드민 페이지 중 팝업창 등록 버튼 위치 설명 스크린샷
  2. 기본정보
    • 오늘 하루 보이지 않음 항목의 사용을 해제하세요.
    • 팝업 유형을 일반팝업으로 선택하세요.
    • 팝업 내용을 입력하는 에디터 상단의 코드보기(</>)를 선택 후 복사한 프로모션 스크립트를 붙여넣기 하세요.

    NHN Shop by 팝업창 설정 중 기본항목 부분 예시 스크린샷
  3. 노출 페이지 설정
    • 팝업 노출 페이지를 개별설정으로 선택하세요.
    • PC웹 노출 페이지로 상품 리스트 페이지를 선택한 후 파라메터 값으로 popup을 입력하세요.
    • 모바일웹 노출 페이지로 상품 리스트 페이지를 선택한 후 파라메터 값으로 popup을 입력하세요.
    • 모바일앱 노출 페이지로 상품 리스트 페이지를 선택한 후 파라메터 값으로 popup을 입력하세요.

    NHN Shop by 팝업창 설정 중 노출 페이지 설정 부분 예시 스크린샷
  4. PC웹
    • 팝업창 종류를 윈도우 팝업창으로 선택하세요.
    • 창크기를 100% X 100%로 설정하세요.

    NHN Shop by 팝업창 설정 중 PC웹 설정 부분 예시 스크린샷
  5. 모바일웹, 모바일앱
    • PC웹 내용과 동일하게 적용을 체크하세요.
    • 팝업창 종류를 고정 레이어창으로 선택하세요.

    NHN Shop by 팝업창 설정 중 모바일웹,모바일앱 설정 부분 예시 스크린샷
  6. 하단의 [저장] 버튼을 누르면 설정한 내용이 팝업에 적용됩니다.

3. 적용된 팝업 확인하기

  1. Shop by 어드민의 팝업창 관리에서 등록된 팝업번호를 확인하세요. NHN Shop by 팝업창 관리 화면 중 팝업번호 노출 부분 스크린샷
  2. 상점 도메인 뒤에 /design-popup?popupNo=팝업번호를 붙인 주소로 접속하여 적용된 팝업을 확인하세요. NHN Shop by에 적용된 팝업을 확인할 수 있는 팝업 접속 URL 구조 설명 스크린샷

4. 적용된 팝업창 연결 방법

4-1. 배너와 팝업창 연결하기
  1. 대시보드 > 디자인 관리 > 스킨 배너 관리에서 적용을 원하는 배너 그룹을 선택하여 스킨 배너 수정 화면으로 이동하세요. NHN Shop by 스킨 배너를 수정할 수 있는 경로 설명 스크린샷
  2. 프로모션이 적용된 팝업창과 연결할 스킨 배너 이미지의 링크 주소를 아래와 같이 설정하세요.
     
    javascript:window.open('/design-popup?popupNo=팝업번호');
    NHN Shop by 스킨 배너 이미지와 디프로모션 적용 팝업창을 연결할 수 있는 링크주소 설정 예시 스크린샷
  3. 수정 내용을 저장하고 쇼핑몰에 적용된 배너를 클릭해 설정한 프로모션 팝업창으로 이동하는지 확인하세요. NHN Shop by 메인 배너에 적용된 디프로모션 팝업창 예시 스크린샷
4-2.게시글의 내용으로 팝업창 연결하기
  1. 대시보드 > 게시판 관리 > 게시글 관리에서 신규 게시글 등록을 클릭하세요. NHN Shop by 게시글 등록 위치를 설명하는 스크린샷
  2. 에디터의 Link1 버튼을 눌러 게시글에 링크를 삽입하세요.
    • Text to display : 링크를 표시할 문구2를 입력하세요.
    • URL : /design-popup?popupNo=팝업번호3를 입력하세요.
    • Insert Link4 버튼을 누르면 설정한 링크가 게시글 본문에 삽입됩니다.
    NHN Shop by 게시글에 링크를 삽입하는 예시 스크린샷
  3. 에디터의 Code View(</>)1 버튼을 눌러 삽입된 링크 속성의 target 값을 popup2으로 변경하세요.
     

    변경 전 : <a href="/design-popup?popupNo=팝업번호" target="_blank">디프로모션 이벤트 바로가기</a>

    변경 후 : <a href="/design-popup?popupNo=팝업번호" target="popup">디프로모션 이벤트 바로가기</a>

    NHN Shop by 게시글 링크 속성을 변경하는 예시 스크린샷
  4. 작성한 게시글을 저장한 후 등록된 게시글 내용의 링크를 클릭해 설정한 프로모션 팝업창으로 이동하는지 확인하세요. NHN Shop by 등록된 게시글 확인 방법 안내 스크린샷

URL연결 세팅

디프로모션에서 제공하는 URL을 게시해 프로모션 운영을 원하실 경우 프로모션 관리 > 운영 환경 설정 > 운영 환경 에서 앱 설치 안함을 선택해 주세요.

URL연결을 URL 현재 Shop by 연동 환경에서는 URL연결 운영 방법을 지원하지 않고 있습니다. 카카오톡, 블로그, 카페 등에 디프로모션에서 제공하는 URL을 게시해 프로모션 운영을 원하실 경우 프로모션 관리 > 운영 환경 설정 > 운영 환경 에서 앱 설치 안함을 선택해 주세요.

참고하세요.
프로모션의 상태가 운영 예약중인 경우 준비중 이미지가 노출되며, 설정한 운영 기간에 도달하면 자동으로 프로모션이 노출됩니다.
운영 예약중에는 대시보드 > 프로모션 관리에서 미리 보기로 프로모션을 테스트할 수 있습니다.
참고하세요.
스크립트 세팅이 곤란한 경우 세팅 대행을 신청하세요.
  • 당신만을 위한 프로모션

    우리의 기술력과 크리에이티브로 당신의 회사에
    온·오프라인의 프로모션을 기획하여 런칭하는 날을
    기다리고 있습니다.

  • 파트너를 위한 프로모션

    디프로모션이 클라이언트에게
    유용하게 사용될 수 있다는 것에 확신합니다.
    클라이언트들에게 새로운 경험의 마케팅을 소개하세요.