애니빌드.LAB
매뉴얼
마케팅 모바일 / 앱 전용 팝업 설정
- Anybuild
- 2022-08-01 10:48:00
- hit4692
- http://wdev.anybuild.co.kr/bbs/faq/7313
모바일 / 앱 전용 팝업에 대해 안내드리겠습니다.
(PC용은 마케팅지원 > 팝업이벤트 관리에서 기존에 사용하시던 팝업 이벤트를 사용해 주시면 됩니다.)
모바일 / 앱 팝업의 경우 1개의 그룹에 여러가지의 장면/텍스트 등을 삽입하여 관리가 가능한 기능입니다.
각 장면별로 팝업, 통합하여 슬라이드로 출력이 가능합니다.
자, 이제 모바일 / 앱 팝업을 생성해 보겠습니다.
관리자 페이지에서 아래의 위치 마케팅지원 > 팝업이벤트 관리 > [모바일 / 앱 팝업 탭] 에서 확인이 가능합니다.
- 페이지 하단에 주의사항이 있으니 꼭 확인해 보시고 등록을 하시기 바랍니다.
- 팝업 그룹은 1개만 활성화가 가능합니다. (그룹 내에 여러개의 이미지 또는 내용을 넣을 수 있으니 아래의 메뉴얼을 꼭! 확인해 주세요.)
그룹의 경우 팝업내용이 아닌 팝업설정에 대한 내용입니다. 각 설정별 안내를 해드리겠습니다.
1. 레이아웃과 노출 관련
팝업 시작일, 만료일
- 팝업 전체의 일정을 관리할 수 있습니다. 해당 기간이 이 포함되지 않는 날짜에 홈페이지 접속시 팝업은 노출되지 않습니다.
팝업 그룹명
- 관리자페이지에서 관리용으로 사용됩니다.
팝업 최대 넓이
- 화면이 큰 디바이스에서 등록한 내용 또는 이미지에 따라 최대 사이즈를 지정할 수 있습니다.
- 이미지가 300 * 300라고 가정했을 때 디바이스 크기가 해당 이미지 보다 훨씬 크다면 최대 사이즈인 300px로 지정하여 이미지가 깨지거나 의미 없이 크게 노출되는 것을 제한할 수 있습니다.
팝업창 배경 투명도, 색상
- 아래의 이미지를 제외한 영역부분의 투명도와 색상을 설정할 수 있습니다.
팝업창 여백
- 아래의 이미지를 제외한 영역부분에 여백을 더 추가할 수 있습니다.
- 이미지가 300 * 300라고 가정했을 때 디바이스 화면이 300px 이라면 300px - 좌우 여백(20) = 이미지 사이즈(260)가 됩니다.
- 좌우에 여백을 준다면 아래의 이미지와 같이 출력됩니다.
2. 팝업창 주요기능 설정
장면별 스크롤 유무
- 모바일 / 앱 팝업의 경우 디바이스 사이즈보다 세로 크기가 더 큰 장면을 등록하였다면 자동으로 스크롤이 생성됩니다. 해당 스크롤에 대한 안내 표시를 할지 말지를 지정할 수 있습니다.
- 아래의 이미지와 같이 스크롤이 있는 컨텐츠라면 하단에 스크롤이 가능하다는 표시가 2초정도 노출이 됩니다.
팝업창 닫기버튼
- X 버튼의 위치, 배경색상, X 색상을 지정할 수 있습니다.
특정기간 열지않기
- 기간별로 노출하지 않게 설정이 가능합니다. 1일의 경우 '오늘 하루 열지 않기', 2일 이상의 경우 'n일동안 열지않기' 와 같이 노출이 됩니다.
- 색상설정의 경우 아래와 같이 배경색 - 파란색, 글자색 - 노란색 과 같이 현재 이미지에 맞게 색상 설정이 가능합니다.
- 우측에 있는 닫기 버튼을 숨기거나 노출할 수 있습니다.
참고사항) '닫기버튼'과 '특정기간 열지않기'의 경우 둘중 한개는 꼭 사용함으로 설정이 되어야 그룹생성이 가능합니다.
노출 방식
- 슬라이드는 한개의 닫기버튼, 특정기간 열지않기를 공유합니다. 즉, 한번만 닫으면 모든 장면이 닫힙니다.
- 장면별 팝업의 경우 장면별로 각각의 버튼이 활성화되며 한개를 닫아도 다른 장면은 확인이 가능합니다.
3. 슬라이드 설정
방향 네비게이션, 페이지 네비게이션
- 색상, 위치, 모양등 설정이 가능하며 위의 설정과 같이 했을 경우 아래와 같이 출력됩니다.
- 페이지 네비게이션의 경우 위치 표시용이며 클릭이벤트는 없습니다.
4. 장면등록하기
- 장면 등록 위치는 아래와 같습니다. 그룹 리스트 페이지에서 우측에 보시면 관리란에 '장면 관리' 버튼이 있습니다. 해당버튼을 누르면 장면 설정이 가능합니다.
장면은 이미지, 텍스트 두가지 종류 추가가 가능합니다.
이미지 장면
- 이미지 등록을 할 수 있으며 이미지를 클릭 또는 터치시 이동이 가능하게 Link 값을 추가할 수 있습니다.
텍스트 장면
- HTML, 소스편집기, 텍스트 편집기를 지원합니다.
공통사항
- 그룹 전체를 관리하는 시작일과 만료일이 있지만 장면별로도 시작일과 만료일을 설정할 수 있습니다.
- 예를 들면 5개의 장면이 있고 1개의 장면을 조금 빨리 내려야 하는 상황이라면 별도로 기간을 설정해 주시면 됩니다.
- 또는 이미 4개의 팝업이 활성화 되어있고 특정시간에는 1개 더 출력을 해야된다면 미리 설정해 노출시킬 수 있습니다.
주의사항)
jQuery가 활성화된 홈페이지에서만 출력이 가능합니다.
특정 기간 열지 않기의 경우 캐시(Cookie)가 아닌 로컬스토리지(localStorage)를 사용하기 때문에 캐시를 삭제해도 다시 나타나지 않습니다.
로컬스토리지의 경우 구글에 검색해보시면 브라우저에서 삭제방법, 사용방법등이 나와있습니다.
장면을 모두 이미지로 하셨을 경우 꼭 비율을 맞춰 올리는 것을 권장합니다. 비율이 다를경우 제일 큰 이미지를 기준으로 레이아웃이 형성됩니다.














열기 닫기