애니빌드.LAB
매뉴얼
마케팅 배너이벤트관리 (맞춤전송폼)
- Anybuild
- 2022-08-30 11:41:00
- hit4442
- http://lab.anybuild.co.kr/bbs/faq/7318
배너 이벤트 관리 맞춤전송폼 형식에 대해 안내드리겠습니다.
조금 복잡해 보일수도 있지만 이해만 하신다면 편리하게 사용이 가능합니다. 꼭 메뉴얼을 읽어보시고 해보시기를 권장합니다.
보통 홈페이지에서 하단에 위치하거나 따라다니는 전송폼을 많이 보셨을 텐데요.
배너이벤트 관리에서는 맞춤전송폼 선택과 디자인 설정만하면 PC, MOBILE, APP 모두노출이 가능합니다.
(위치는 화면 위 / 아래 또는 특정 콘텐츠의 위 / 아래만 지원이 가능합니다.)
)
※ 배너 이벤트 관리는 [마케팅 지원] 내에 있으며 메뉴가 확인되지 않으신다면 마스터 계정에서 해당 메뉴 권한을 부여해 주세요.
※ 기본 주의사항은 아래와 같습니다. 그리고 그룹 설정 페이지 곳곳에 있는 주의사항을 꼭 확인하시기 바랍니다.
)
* jQuery 기반으로 동작이 되기때문에 jQuery가 활성화 되지 않을 경우 배너가 실행되지 않습니다.
디자인관리 > 고급디자인관리 > 전체 화면구성 <head> 란에 <load target="/img_up/_addon/jquery/1.11.3/jquery.min.js"> 를 작성하시면 jQuery가 연동됩니다.
* 디자인팜 2.0의 경우 스킨에 따른 제약이 발생할 수 있습니다.
이제 본격적으로 맞춤전송폼 타입을 만들어 보겠습니다.
먼저 그룹을 생성합니다. 그룹은 폼을 감싸고 있는 레이아웃을 설정한다고 생각하시면 될듯합니다.
(그룹 생성 후에 꼭 디자인관리를 저장하셔야 항목이 활성화 됩니다. 중간에 생성을 멈추지 마시고 그룹 생성을 계속 진행해 주세요.)
기본설정)
)
1) 노출 디바이스
- 노출하고자 하는 디바이스에서만 노출이 가능합니다. 모두 노출하고 싶다면 모두 선택해 주세요.
2) 노출 페이지
- 배너 이벤트의 경우 메인과 서브로만 구분되어 집니다.
- 인트로 페이지 또는 특정 페이지만 노출/비노출 설정은 별도로 지원하지 않습니다.
3) 노출 시작일, 노출 만료일
- 그룹 자체를 해당기간에만 노출 할 수 있습니다.
- 예를 들면 특정 이벤트 페이지 링크를 걸고 싶을 때 1월 ~ 9월 사이에만 이미지 배너를 노출시켜 해당 페이지 이동을 유도할 수 있습니다.
4) 그룹명
- 별도로 노출되는 내용은 아니며 관리자가 관리할 수 있도록 그룹명을 입력해 주세요.
5) 그룹배너타입
- 3가지의 타입이 있으며 이번 게시글에서는 맞춤전송폼 타입을 안내드리고 있습니다.
6) 맞춤전송폼 선택
- 배너그룹과 연동할 맞춤전송폼을 선택해 주세요.
7) 컨텐츠 최대 넓이 (미입력시 1000px)
- 홈페이지의 컨텐츠 레이아웃에 따른 최대 넓이를 지정할 수 있습니다.
- 예를 들면 홈페이지 레이아웃이 1200px인데 '1000' 으로 설정을 했다면 아래와 같습니다.
)
- 만약 최대넓이보다 작은 화면이라면 자동으로 비율이 조정되며 아래와 같이 조정됩니다.
)
8) 위치
- 상/하단 둘중 한개만 선택이 가능하며 body 또는 '9) 삽입대상'에 따른 위치가 지정이 됩니다.
9) 삽입대상
- 삽입대상은 아래에 있는 고급설정란에서 고정여부를 '사용안함' 일때만 사용이 가능합니다.
- 만약 id="header" 컨텐츠 내에 넣고 싶다면 입력란에 '#header'를 넣으면 자동으로 해당 컨텐츠에 상/하단에 삽입이 됩니다. (CSS 작성하실때 사용하는 ID값 또는 class 값을 작성해주세요.)
- 삽입대상의 컨텐츠가 2개 이상일 경우 배너가 활성화 되지 않습니다. (삽입 대상에 '.list' 라고 지정을 했을 경우 class="list"를 가진 컨텐츠가 1개일 때만 활성화 됩니다.)
- 미입력시 'body' 가 대상으로 들어갑니다.
)
(위 이미지는 위치는 상단, 삽입대상은 '#header' 로 지정한 상태입니다.)
10) 여백
- 각각 위치별 여백을 줄 수 있습니다.
- 좌 / 우 여백은 디바이스 크기가 최대 사이즈보다 작을 때만 여백이 지정됩니다.
)
(위 이미지는 상/하 여백, 좌/우 여백 각각 30씩 값을 주었습니다. - 녹색부분이 여백으로 들어간 값입니다.)
11) 배경색상
- 배너 컨텐츠 영역을 제외한 배경색상입니다.
)
(위 이미지는 배경 검은색, 투명도 50%를 설정하였습니다.)
12) z-index
- 다른 콘텐츠에 가려 배너가 보이지 않을 경우 값을 올려 콘텐츠가 위로 올라오게끔 설정해주세요. (최대 9999)
고급설정 1)
)
1) 고정여부
- '사용함' 으로 설정시 위에서 안내드린 '9) 삽입대상' 은 무시가 되며 <body> 를 기준으로 삽입이 됩니다.
- '사용함'으로 설정시 스크롤을 하더라도 전송폼이 화면을 따라다닙니다.
- 스크롤을 올리더라도 다른 콘텐츠에 영향을 주지 않기 위해 body에 배너의 높이 만큼의 padding-top / padding-bottom 값이 지정됩니다.
(토글 버튼을 사용하실 경우 열고 닫을 수 있기 때문에 body에 padding 값은 적용되지 않습니다.)
)
(위 이미지는 위치 - 상단, 고정사용 설정으로 된 이미지입니다.)
- CSS - Top / Bottom 속성 자동 조정 대상
)
- 위의 이미지에 보시면 현재 로고와 햄버거 버튼, 검색버튼을 감싸고 있는 태그에 css position:fixed; top:0; 이 적용되어 있습니다. 콘텐츠가 상단에 고정되다 보니 배너 그룹에 가려졌습니다.
이런 콘텐츠를 위해 "CSS - Top / Bottom 속성 자동 조정 대상" 입력을 지원합니다.
- 우선 가려진 콘텐츠가 #header (ID="header") 라고 가정했을때
"CSS - Top / Bottom 속성" 자동 조정 대상에 #header 라고 입력을 하시면 아래와 같이 배너의 높이만큼 css top / bottom 값을 조정합니다.
)
(위 이미지는 고정 여부 - '사용함' 으로 설정, CSS - Top / Bottom 속성 - '#header' 를 입력했습니다.)
고정여부 참고사항)
- 고정여부 사용의 경우 같은 방향으로 1개의 배너그룹만 사용이 가능합니다.
(사용중인 배너그룹 중 이미 같은 방향으로 고정되어 있는 배너그룹이 있을 경우 설정이 불가능합니다.)
2) 랜더링시 노출여부
- 홈페이지 처음 접속했을때 노출하고 있을지 아니면 숨겨놓을지 설정이 가능합니다.
- '숨김' 으로 설정할 경우 토글버튼이 자동 활성화 됩니다.
3) 토글버튼
- 토글버튼을 통해 배너를 숨기기 / 노출하기 기능을 사용할 수 있습니다.
- 버튼을 등록하지 않았을 경우 버튼 위치에 기본 텍스트만 출력됩니다.
- 열기 버튼, 닫기 버튼 둘다 등록시에 각 상황에 맞게끔 버튼이미지가 출력됩니다.
- 토글 버튼 위치는 배너 최대사이즈에 따른 우측 또는 좌측으로 설정이 됩니다.
- 토글 버튼 사용시 "CSS - Top / Bottom 속성" 기능은 무시됩니다.
)
(위 이미지는 고정 여부 '사용함', 토글 버튼 '사용함', 토글버튼 이미지 등록 안함 으로 설정 후 열려있을 때 화면입니다.)
)
(위 이미지는 고정 여부 '사용함', 토글 버튼 '사용함', 토글 버튼 이미지 등록 안함으로 설정 후 닫혀있을 때 화면입니다.)
고급설정 2)
)
광고성 배너를 노출할 수도 있기 때문에 홈페이지 사용자 입장에서는 보고싶지 않을 수도 있습니다.
그래서 위와 같이 특정기간 열지 않기, 닫기 기능이 있습니다.
1) 배너 닫기 버튼
- 사용함으로 설정 후 색상, 위치를 지정하시면 아래와 같이 배너 닫기 버튼이 활성화 됩니다.
- 닫기 버튼을 누를 경우 현재 창에서는 사라지지만 새로고침 또는 페이지 이동시 다시 노출이 됩니다.
)
2) 특정기간 열지않기
특정기간의 경우 보통 팝업에서 많이 사용해 보셨을 텐데요.
기간설정과 타입을 설정 후 노출하면 아래와 같이 출력됩니다.
n일 동안 열지 않기를 클릭할 경우 해당 localStorage에 저장이 되며 해당 기간동안은 배너가 노출되지 않습니다.
(localStorage는 캐시와 다르므로 캐시를 삭제하더라도 다시 나타나지 않습니다.)
)
많이 길었지만 여기까지가 배너 그룹의 설정이였습니다.
맞춤전송폼의 경우 디자인설정이 별도로 있습니다. 닫지 마시고 끝까지 확인해 주세요.
폼 설정)
- 배너그룹을 생성하면 리스트 페이지에 아래와 같이 생성되며 우측에 '디자인관리' 를 클릭하시면 팝업창이 나옵니다.
)
- 아래의 팝업창에서 한줄당 컬럼수, 개인정보취급방침, 버튼위치, 항목 노출유무, 항목 필수유무, 설명 출력등을 설정할 수 있습니다.
)
스크롤을 조금내리면 설정한 값을 바로 확인할 수 있는 미리보기 화면이 있습니다.
- 설정하며 어떤식으로 노출되는지 확인하면서 설정을 해주세요.
)
1) 셀수
- 폼에서 한줄당 노출할 컬럼을 지정할 수 있습니다.
)
(위 이미지는 셀수를 '3단' 으로 설정했을 때의 화면입니다.)
2) 개인정보취급방침
- 사용함으로 할 경우 폼 하단에 자동으로 관련 input 과 문구 + 상세보기 버튼이 활성화 됩니다.
(팝업 제일 하단에 개인정보취급방침 내용을 작성해 주셔야 '상세보기' 버튼이 활성화 됩니다.)
)
- 상세보기의 경우 홈페이지 풀화면의 레이어 팝업으로 뜹니다.
- 별도의 변수, 변환 지원은 되지 않으므로 꼭 텍스트로 문구를 채워주시기 바랍니다.
)
(상세보기 버튼을 클릭하여 내용이 레이어 팝업으로 뜬 참고용 화면입니다.)
3) 버튼위치
- 버튼위치를 아래 또는 우측 두군데로 지정할 수 있습니다.
)
4) 버튼문구
- 폼의 전송버튼 문구를 변경할 수 있습니다.
5) 항목
- 맞춤전송폼에서 설정한 필수항목, 노출항목과는 별개로 설정해야 합니다.
- 각 항목별 노출유무, 필수유무, 설명 출력을 선택할 수 있습니다.
- 항목중 HTML편집기, 다중선택은 지원하지 않습니다.
디자인설정)
)
(맞춤전송폼의 경우 디자인을 꼭 입힐 수 있어야 된다고 생각하기에 CSS를 입력 가능하도록 지원합니다.)
1) CSS SELECTOR
- 배너 그룹과 맞춤전송폼 기본을 노출하기 위한 CSS 선택자를 제공합니다.
- 각 항목별 마우스를 올리면 어떤 컬럼인지 미리보기 화면에서 빨간박스로 표시해 드립니다.
)
(위 이미지는 CSS SELECTOR에 마우스를 올렸을때 미리보기 화면에서 빨간박스로 표시해드리는 화면입니다.)
- 위의 '컬럼 제목' 부분을 변경하고 싶으시다면 해당 CSS SELECTOR를 복사 후 하단 소스 입력창에 붙여넣고 css를 입혀주시면 됩니다.
- 만약 배경 이미지를 넣고 싶으시다면 FTP에 파일을 업로드 후 경로를 가져와 CSS background-image를 이용하여 이미지를 입힐 수 있습니다.
)
여기까지 읽어주시느라 고생많으셨습니다. 감사합니다.
열기 닫기