스마트 팝업 제작, 어렵지 않아요! 여러 개의 팝업을 한 영역에서 슬라이드 방식으로 보여줄 수 있는 그룹 팝업을 만들어 보세요. 사용자 경험을 해치지 않으면서 필요한 팝업을 노출할 수 있어요.
그룹 팝업 추가는 이렇게 이루어져요 ☕️
그룹 팝업 추가는 이렇게 이루어져요 ☕️공통 스크립트 추가 → 그룹 팝업 영역 추가 → 팝업 추가
① 공통 스크립트 설치
- 웹사이트에 코드앤버터 공통 스크립트가 설치 완료된 상태여야 그룹 팝업 추가가 가능해요. 이미 추가 완료하셨겠지만, 아직 설치하지 않으셨다면 설치 가이드를 참고해 주세요.
② 그룹 팝업 영역 추가
- 그룹 팝업을 내 웹사이트의 어떤 위치에서 보여줄지 결정해 팝업을 추가할 영역을 만드는 과정이에요.
③ 팝업 추가
- 2번에서 추가한 그룹 팝업 영역에서 노출할 팝업을 만들어 추가해요. 추가한 팝업은 2번에서 설정한 내 웹사이트의 위치에서 보여질 거예요.
그룹 팝업은 두 가지 형태로 활용할 수 있어요.
① 랜덤 노출되는 팝업 만들기 (2개 이상의 팝업을 랜덤으로 노출하기)
- 디자인 → 슬라이드 선택 단계에서 슬라이드 없음을 선택해요.
- 슬라이드 없음을 선택하고, 해당 영역에 1개의 팝업을 추가하면 👉 공개 상태인 경우에 해당하는 노출 기간 동안 1개 팝업이 노출돼요.
- 슬라이드 없음을 선택하고, 해당 영역에 2개 이상의 팝업을 추가하면 👉 공개 상태인 경우에 해당하는 노출 기간 동안 2개 이상의 팝업이 랜덤으로 노출돼요.
- 랜덤 노출 비율은 100%에서 팝업 개수에 따라 나눠져요.
② 슬라이드 형태의 팝업 만들기 (2개 이상의 팝업을 슬라이드 형태로 노출하기)
- 디자인 → 슬라이드 선택 단계에서 A~D타입을 선택해요.
- A~D타입을 선택하고, 슬라이드로 노출할 2개 이상의 팝업을 추가하면 👉 선택한 A~D타입에 따라 2개 이상의 팝업이 순환 노출돼요.
그룹 팝업 영역 추가하기
오른쪽 상단 [+팝업 영역 추가] 버튼을 클릭해요.
그룹 팝업 영역 에디터 알아보기
그룹 팝업 영역 에디터는 크게 3개 열로 나눠져요.
① 팝업 영역 설정
- 팝업 영역 디자인, 노출 설정 등을 설정해요.
② 영역 상세 설정
- 1번의 팝업 영역 설정에서 상세 설정이 필요한 경우 사용돼요.
- 기본값으로 디자인의 팝업 모양 상세 설정이 보여져요.
③ 미리보기
- 선택한 설정과 디자인이 적용된 화면을 미리볼 수 있어요.
그룹 팝업 영역 설정하기
👀 꼭 알아두세요.
|
디바이스
- 해당 그룹 팝업 영역을 노출할 디바이스를 선택해요. Mobile / PC 중 선택할 수 있어요.
디자인
- 팝업 타입
- 기본 : 화면의 가운데에서 팝업이 보여져요.
- 하단 : 화면의 하단에서 팝업이 보여져요.
- 상단 : 화면의 상단에서 팝업이 보여져요.
- 디자인
- 팝업 모양 : 팝업 사이즈를 설정할 수 있어요.
- 자동 맞춤 팝업 : 등록한 팝업 이미지 사이즈에 따라 자동으로 모양이 맞춰져요. 가로 사이즈는 510px로 고정돼요.
- 슬라이드 선택 : 슬라이드를 보여줄 타입을 선택할 수 있어요.
- 슬라이드 없음 : 슬라이드 방식을 사용하지 않아요. 그룹 팝업 제작 시 슬라이드 없음을 선택하면 등록한 팝업이 랜덤으로 노출돼요.
- 버튼 선택
- 팝업의 닫기 / 오늘 하루 보지 않기 버튼 디자인을 선택할 수 있어요.
- 팝업 모양 : 팝업 사이즈를 설정할 수 있어요.
- 꾸미기
- 슬라이드 버튼
- 슬라이드의 버튼색 / 배경색을 설정할 수 있어요.
- 하단 원형 페이지네이션
- 하단 원형 페이지네이션의 포인트 / 기본 / 배경색을 설정할 수 있어요.
- 슬라이드 영역
- 팝업 영역의 둥근 테두리를 설정할 수 있어요.
- 상세 수정
- 기본으로 제공하는 항목을 포함하여 더 상세한 수정이 필요한 경우 사용할 수 있어요.
- 슬라이드 버튼
설정
- 배치
- 배경 레이어 : 컬러와 투명도를 조정할 수 있어요.
- 가로 너비 : 팝업 영역의 가로 너비를 조정할 수 있어요.
- 순서 : 웹사이트에서의 팝업 영역 노출 순서(z-index)를 설정할 수 있어요.
- 노출 위치 : 우측 하단, 좌측 상단 등 팝업 타입에서 선택한 기본/하단/상단보다 더 상세하게 팝업 위치를 설정할 수 있어요.
- 가로 조정 / 세로 조정 : 팝업 위치를 더 상세하게 조정할 수 있어요.
- 상단 여백 : 팝업 크기만큼 페이지 상단에 여백을 넣을 수 있어요.
- 그림자 영역 제거 : 팝업 영역의 그림자 효과를 위한 추가 여백 영역을 제거할 수 있어요.
- 애니메이션 : 팝업 영역이 노출될 때의 애니메이션 효과를 추가하거나 삭제할 수 있어요.
- 타입 : 애니메이션 타입을 선택할 수 있어요.
- 속도 : 애니메이션 속도를 선택할 수 있어요.
- 슬라이드
- 전환 속도 : 숫자가 작을 수록 빠르게 전환되고, 숫자가 클수록 느리게 전환돼요.
- 슬라이드 순환 : 마지막 슬라이드 이후에 첫 슬라이드로 돌아가는 기능이에요.
- 자동 슬라이드 : 설정된 대기 시간 후에 슬라이드가 자동으로 넘어가는 기능이에요.
- 대기 시간 : 숫자가 작을 수록 한 팝입이 보여지는 시간이 짧아지고, 숫자가 클수록 한 팝업이 보여지는 시간이 길어져요.
- 조건
- 도메인, 유입 경로 등 해당 팝업 영역의 공개 조건 및 제외 조건을 설정할 수 있어요.
- 스케줄
- 해당 팝업 영역을 바로 공개하거나 예약 공개할 수 있어요.
- 시점
- 공개 지연 : 사용자가 페이지 진입 후 입력한 시간만큼 기다린 후 팝업 영역을 공개해요.
- 이탈 감지 : 사용자가 페이지를 이탈하려는 움직임을 감지하면 팝업 영역을 공개해요. (이탈 감지 기능은 2024.11 현재 PC 캠페인에서만 사용 가능합니다.)
- 스크롤 : 사용자가 입력한 범위 만큼 스크롤을 내린 후 팝업 영역을 공개합니다.
팝업 추가하기
오른쪽 상단 [+팝업 추가] 버튼을 클릭해요.
① 꾸미기
- 본문 프레임
- 팝업으로 사용할 이미지 혹은 영상을 추가할 수 있어요.
- 이미지
- 확장자 jpg, jpeg, png, sgv, gif 파일을 사용할 수 있어요.
- 용량 3MB 미만의 파일만 업로드할 수 있어요.
- 영상 (베타기능 BETA*)
- 확장자 mp4, wmv, webm, mov 파일을 사용할 수 있어요.
- 용량 30MB 미만의 파일만 업로드할 수 있어요.
- 영상은 1분까지만 보여줄 수 있어요. 1분 이상의 영상을 업로드 하더라도 영상의 1분까지만 보여요.
- 이미지
- 팝업을 클릭하면 연결되는 링크를 추가할 수 있어요.
- 팝업으로 사용할 이미지 혹은 영상을 추가할 수 있어요.
🤲 Tip
- 고급 모드에서 더 상세한 설정이 가능해요.
② 노출 설정
- 스케줄 설정
- 일정 없음
- 해당 팝업의 노출 일정이 없는 상태예요.
- 해당 팝업을 노출할 일정이 아직 정해지지 않았다면 일정 없음을 선택하고 확인 → 등록하세요.
- 예약 공개
- 해당 팝업의 공개 일정을 선택해요. 공개 시작일시와 종료일시를 설정할 수 있어요.
- 해당 팝업을 무기한으로 노출하고자 한다면 예약 기간에서 시작일시만 설정한 뒤 확인 → 등록하세요.
- 일정 없음
- 노출 대상
- 도메인, 유입 경로 등 해당 팝업의 공개 조건 및 제외 조건을 설정할 수 있어요.
모두 완료했다면 오른쪽 상단 [등록] 버튼을 클릭하세요.
🤲 Tip
- 노출 설정 단계에서 기본 설정값은 앞서 추가한 팝업 영역 설정에서의 값이에요.
③ 등록하기
리스트
① 해당 그룹 팝업 영역(캠페인)에 속한 팝업들의 정보를 확인할 수 있어요.
② 캘린더 페이지로 진입해요. 아래에서 자세한 내용을 확인하세요.
캘린더
① Live 행 알아보기
- 노출 순서
- 가장 위의 행에 위치한 팝업이 첫 번째로 노출돼요.
- 캘린더 설정하기
- 만든 팝업을 노출할 일정만큼 드래그해요.
- 캘린더에서 팝업 노출 일정을 클릭해 팝업 노출 스케줄을 수정할 수 있어요.
- 캘린더에서 설정한 일정과 팝업 추가 단계에서 설정한 스케줄은 동기화돼요.
④ 공개하기
- 팝업을 공개 상태로 변경하세요.
- 그룹 팝업 영역(캠페인)을 공개 상태로 변경하세요.
(베타기능 BETA* : 별도 알림 없이 상황에 따라 기능 사용에 제한이 생길 수 있어요.)
이 글이 도움 되셨나요?
+1
+1
+1
