[팝업] 팝업 추가하기

쉽고 간편한 스마트 팝업 추가 방법을 알려드려요. 천천히 따라와 보세요!

 

👀 꼭 알아두세요.

선택한 옵션에 따라 화면에 노출되는 옵션이 다를 수 있어요. 에디터 내에서 안내하는 가이드를 참고할 수 있어요.

 

팝업 추가는 이렇게 이루어져요 ☕️

공통 스크립트 추가 → 팝업 추가

 

① 공통 스크립트 추가(설치)하기

  • 웹사이트에 코드앤버터 공통 스크립트가 설치 완료된 상태여야 팝업 추가가 가능해요. 이미 추가 완료하셨겠지만, 아직 설치하지 않으셨다면 설치 가이드를 참고해 주세요.

 

② 팝업 추가하기

  • 팝업을 만들어 추가해요. 추가한 팝업은 1번의 공통 스크립트를 설치한 웹사이트에서, 각 팝업 캠페인에서 설정한 노출 조건에 따라 보여질 거예요.

 

 

팝업 에디터(편집) 알아보기 🔎

팝업 에디터는 크게 3개 열로 나뉘어요.

 

 

① 팝업 설정

  • 팝업을 노출할 디바이스, 등록할 팝업의 템플릿 사용 여부, 꾸미기, 배치 등을 설정해요.

 

② 영역 상세 설정

  • 1번의 팝업 설정에서 상세 설정이 필요한 경우 사용돼요.
  • 기본값으로 디자인의 템플릿 상세 설정 화면이 보여져요.

 

③ 미리보기

  • 선택한 설정과 디자인이 적용된 화면을 미리 볼 수 있어요.

 

 

팝업 추가하기 🎨

오른쪽 상단 [+팝업 추가] 버튼을 클릭해요.

 

디바이스 선택

  • 해당 팝업을 노출할 디바이스를 선택해요.
  • Mobile / PC 중 선택할 수 있어요.

 

디자인

템플릿

  • 팝업 타입, 모양 등을 직접 선택하는 <기본> 템플릿과

 

  • 미리 디자인되어 있는 팝업 템플릿을 사용하는 <디자인> 템플릿 중 선택할 수 있어요.

 

❶ 선택한 템플릿의 상세 설정을 진행해요.

  • 기본
    • 타입
      • 중앙 : 화면의 가운데에서 팝업이 보여져요.
      • 하단 : 화면의 하단에서 팝업이 보여져요.
      • 상단 : 화면의 상단에서 팝업이 보여져요.
    • 모양
      • 팝업 사이즈를 설정해요.
      • 자동 맞춤 : 등록한 팝업 이미지 사이즈에 따라 자동으로 모양이 맞춰져요.
    • 버튼 : 팝업의 버튼 추가 여부와 버튼 타입을 선택해요.
    • 닫기 버튼 : 팝업의 닫기 및 특정 기간 보지 않기 버튼 타입을 선택해요.
  • 디자인
    • 다양한 디자인 템플릿을 카테고리에 따라 편리하게 확인하고 사용할 수 있어요.

 

❷ 선택한 설정에 따른 팝업을 미리 볼 수 있어요. 실시간으로 반영돼요.

 

꾸미기

❶ 팝업의 이미지, 제목, 내용, 버튼 및 링크를 추가해요.

  • 이미지
    • 팝업으로 사용할 이미지 혹은 영상을 추가해요.
      • 이미지
        • 확장자 jpg, jpeg, png, sgv, gif 파일을 사용할 수 있어요.
        • 용량 3MB 미만의 파일만 업로드할 수 있어요.
      • 영상 (베타기능 BETA*)
        • 확장자 mp4, wmv, webm, mov 파일을 사용할 수 있어요.
        • 용량 30MB 미만의 파일만 업로드할 수 있어요.
        • 영상은 1분까지만 보여줄 수 있어요. 1분 이상의 영상을 업로드 하더라도 영상의 1분까지만 보여요.

 

❷ 상세 수정에서 더 상세한 편집이 가능해요. 요소들의 위치, 모양, 컬러 등을 변경할 수 있어요.

 

👀 꼭 알아두세요.

선택한 옵션에 따라 화면에 노출되는 옵션이 다를 수 있어요. 에디터 내에서 안내하는 가이드를 참고할 수 있어요.

 

 

설정

배치 캠페인이 어디에서, 어떻게, 어떤 방식으로 보일지 설정하기

❶ 팝업의 배치 형태, 화면에서의 노출 위치, 여백, 팝업이 나타날 때 보여지는 애니메이션 타입 등을 설정해요.

 

조건 캠페인을 어떤 조건에서 노출할지 설정하기

❶ 팝업의 노출 조건을 추가해요.

  • 어떤 페이지에서, 어떤 특성을 가진 사용자에게 등과 같이 팝업을 노출하거나 제외할 조건을 설정할 수 있어요.
  • 노출 조건 설정 가이드 에서 모든 조건과 활용 예시를 확인할 수 있어요.

 

스케줄 캠페인의 노출 시작 시점과 공개 기간 설정하기

❶ 팝업의 노출 스케줄을 설정해요.

  • 바로 공개
    • 해당 팝업을 공개 설정하는 시점부터 바로 공개해요.
  • 예약 공개
    • 해당 팝업을 공개할 일정을 선택해요. 공개 시작일시와 종료일시를 설정할 수 있어요.

 

시점 캠페인이 어떤 특정한 상황에서 노출될지 설정하기

❶ 팝업의 공개 시점을 설정해요.

  • 사용자가 특정 액션을 했을 때 팝업이 나타나도록 설정할 수 있어요.
    • 공개 지연
      • 페이지 진입 후 n초 후에 캠페인 공개하기
    • 이탈 감지
      • 사용자의 웹페이지 이탈이 감지되면 캠페인 공개하기
    • 스크롤
      • 사용자가 페이지의 n% 이상 스크롤 했을 때 캠페인 공개하기

 

피로도 캠페인의 노출 빈도를 고객이 캠페인을 마주하는 횟수 기준으로 조정해 고객의 피로도 낮추기

❶ 피로도 기능의 사용 여부를 선택해요.

  • 사용하지 않음(토글이 회색인 상태) 상태가 기본값으로 설정되어 있어요.

 

❷ 기간을 숫자로 입력해요.

  • 기간은 최대 365(일)까지 입력할 수 있어요.

 

❸ 횟수를 숫자로 입력해요.

 

👀 꼭 알아두세요.

  • 기간을 기준으로 피로도가 조정돼요.
    • 예: 노출 횟수를 10번으로, 기간을 3일로 설정한 상태에서 3일이 지나면 설정한 노출 횟수와 상관없이 설정한 기간이 종료되었으므로 캠페인 노출이 중단돼요.
  • 캠페인을 수정하면 기간과 횟수가 초기화돼요.

 

 

팝업 공개하기 🥳

  • 에디터에서 작업을 마쳤다면, 오른쪽 위 [등록] 버튼을 클릭하세요.

 

  • 리스트로 돌아와 [공개] 버튼을 클릭하세요.

 

(베타기능 BETA* : 별도 알림 없이 상황에 따라 기능 사용에 제한이 생길 수 있어요.)

 

이 글이 도움 되셨나요?
+1
0
+1
0
+1
0
[이지캔버스] 이지캔버스 가이드
💜 식스샵 프로 사용자를 위한 코드앤버터 사용 가이드