[팝업] 팝업 추가하기

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

 

① 팝업 추가하기

팝업 리스트에서 [팝업 추가] 버튼을 클릭하면 팝업 템플릿을 선택하는 화면으로 이동해요.

 

 

② 템플릿 선택하기

팝업의 다양한 템플릿을 선택하는 단계에요. 스타일과 디자인 템플릿 중에서 선택할 수 있어요.

 

❶ 팝업명

팝업명에 커서를 올리거나, 클릭하여 팝업명을 수정할 수 있어요.

 

❷ 디바이스 선택

  • 모바일 팝업과 피시 팝업을 구분하여 설정할 수 있는 버튼이에요.

 

❸ 팝업의 단계 버튼

  • 팝업을 꾸미는 각 단계로 이동할 수 있는 버튼이에요.
  • 팝업의 다양한 템플릿을 선택하는 템플릿, 원하는 목적에 따라 팝업을 꾸밀 수 있는 꾸미기, 원하는 위치와 시간을 설정할 수 있는 노출 설정, 팝업을 노출시킬 수 있는 스크립트 추가의 단계가 있어요.

 

❹ 카테고리 선택

  • 스타일 선택과 디자인 템플릿 선택으로 나누어져 있어요.
  • 스타일 선택은 이미지, 로고, 텍스트 등의 스타일 조합을 선택할 수 있고, 디자인 템플릿 선택은 각 카테고리 주제에 맞는 디자인 된 팝업을 선택할 수 있는 것이에요.

 

 

③ 꾸미기

 

❶ 모드 선택

  • 기본 모드 : 쉽고 간편하게 수정할 수 있는 모드에요.
  • 고급 모드 : 원하는 컨셉과 방향에 맞게 디자인, 레이아웃 등을 수정할 수 있는 모드에요.

 

❷ 본문 이미지

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

 

 

④ 노출 설정

꾸며놓은 템플릿의 원하는 위치와 시간을 설정할 수 있는 단계에요. 필수 단계는 아니에요.

 

❶ 노출 정보

  • 배경 레이어, 노출 위치, 애니메이션 등 팝업이 어떻게 노출될지를 설정할 수 있어요.

 

❷ 스케줄 설정

  • 바로 공개할지, 예약 공개를 할지 설정할 수 있어요.

 

❸ 노출 대상

  • 특정 도메인과 페이지에 노출할 수 있도록 설정할 수 있어요.
  • 특정 브라우저로 접속한 사용자에게만 캠페인을 비공개할 수 있어요.

 

 

⑤ 스크립트 추가

스크립트를 추가해야 사이트에 팝업을 노출할 수 있어요.

*이미 추가 완료하셨다면 바로 오른쪽 상단 [등록] 버튼을 클릭하세요.

 

 

❶ 코드앤버터 스크립트 설치 방법

방법 1. HTML 방식을 사용할 수 있는 경우

<script> (function (co,de,n,but,t,e,r){!n[co]&&(n[co]=function(){ (n[co].q=n[co].q||[]).push(arguments);});e=t.createElement(but); e.async=true;e.src=de;r=t.getElementsByTagName(but)[0]; r.parentNode.insertBefore(e, r); })(“CodenButter”, “<https://buttr.dev/butter.js>”, window, “script”, document); window.CodenButter(“boot”, { siteId: “litysesthx”, auto: true }); window.CodenButter(“mount”); </script>
  1. HTML 코드에서 <HEAD> 태그를 찾아요.
  2. 위의 코드앤버터 스크립트를 복사하고 <HEAD> 태그 사이에 붙여 넣으세요. (<HEAD>와 </HEAD> 사이)
  3. 수정한 사항을 저장해요.
  4. 이제 웹사이트를 새로고침하면 팝업이 노출된 것을 확인할 수 있어요.

 

❷ 다른 방법은 없나요?

방법 2. HTML 방식을 사용할 수 없는 경우 (SCRIPT 방식)

(function (co,de,n,but,t,e,r){!n[co]&&(n[co]=function(){ (n[co].q=n[co].q||[]).push(arguments);});e=t.createElement(but); e.async=true;e.src=de;r=t.getElementsByTagName(but)[0]; r.parentNode.insertBefore(e, r); })(“CodenButter”, “<https://buttr.dev/butter.js>”, window, “script”, document); window.CodenButter(“boot”, { siteId: “litysesthx”, auto: true}); window.CodenButter(“mount”);
  1. 위의 코드를 복사하고 사용중인 스크립트 코드에 추가하거나 <SCRIPT> 태그 사이에 붙여 넣으세요. (<SCRIPT>와 </SCRIPT> 사이)
    *브라우저 개발자 모드 콘솔에서 테스트로 사용할 수 있습니다.

 

 

⑥ 팝업 공개하기

 

 

❶ 팝업 등록 후 돌아온 리스트 화면에서, 등록한 팝업의 [공개] 버튼을 클릭해 주세요.

  • 리스트에서 공개 상태여야 팝업이 정상적으로 노출돼요.

 

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

 

이 글이 도움 되셨나요?
+1
0
+1
0
+1
0
[통계] 통계 살펴보기
[팝업/배너] 노출 조건 설정 가이드