홈페이지 이벤트웹룰렛팝업 이벤트이벤트 설치스크립트 삽입iframe리드 수집

홈페이지에 이벤트 붙이는 3가지 방법 — 스크립트·HTML·링크

룰렛·경품 이벤트를 우리 홈페이지에 붙이는 방법은 결국 셋 중 하나입니다. 무엇을 고를 수 있는지는 홈페이지가 무엇을 허용하느냐로 정해집니다. 스크립트 한 줄·HTML 모달·링크 버튼의 차이, "링크를 팝업으로 띄울 수 없는" 이유, 참여율을 가르는 자동 노출까지. 기술 담당자 없이도 판단할 수 있게 정리했습니다.

Touchlike 팀 · · 읽기 6분
홈페이지에 이벤트 붙이는 3가지 방법 — 스크립트·HTML·링크

이벤트를 기획하고 경품까지 정했는데, 막상 "우리 홈페이지에 어떻게 붙이죠?" 에서 막히는 경우가 많습니다. 대행사는 "스크립트 한 줄만 넣으시면 됩니다" 라고 하고, 홈페이지 관리 업체는 "저희 쪽은 스크립트 삽입이 안 됩니다" 라고 합니다. 양쪽 말이 다 맞습니다.

이 글은 우리 홈페이지에 무엇을 넣을 수 있는지를 먼저 확인하고, 거기에 맞는 방법을 고르는 순서를 정리한 것입니다. 기술 담당자가 없어도 판단할 수 있게 썼습니다.

먼저, 방법은 세 가지뿐입니다

이벤트 팝업을 홈페이지에 붙이는 방법은 표현만 다를 뿐 결국 셋 중 하나입니다. 그리고 무엇을 고를 수 있는지는 홈페이지가 무엇을 허용하느냐로 정해집니다.

홈페이지에 넣을 수 있는 것 방법 방문자가 보는 모습
스크립트 (JavaScript) 스크립트 한 줄 페이지 위에 팝업이 자동으로 뜬다
HTML 만 HTML 모달 · 페이지 안에 삽입 버튼을 누르면 팝업이 뜬다
링크만 이벤트 주소를 배너·버튼에 연결 새 탭이 열린다

1. 스크립트 한 줄 — 가장 매끄럽고 참여율이 높다

홈페이지 공통 영역에 한 줄을 넣으면 방문자에게 이벤트 팝업이 뜹니다. 워드프레스, 카페24, 아임웹, 윅스 모두 관리자 화면에 "외부 스크립트" 또는 "헤더/푸터 삽입" 칸이 있습니다.

<script src="https://tlike.kr/embed.js" data-event="이벤트키" defer></script>

이 방법의 장점은 방문자가 홈페이지를 떠나지 않는다는 것, 그리고 자동으로 노출된다는 것입니다. 두 번째가 생각보다 큽니다. 버튼을 눌러야만 참여할 수 있는 이벤트는 애초에 관심 있는 사람만 들어옵니다. 자동으로 한 번 보여주면 "이런 게 있었네" 하는 사람까지 들어옵니다.

닫아도 우측 하단에 작은 버튼으로 남기 때문에 다시 들어올 여지도 있습니다. 홈페이지 디자인은 전혀 바뀌지 않고, 이벤트가 끝나면 그 한 줄만 지우면 됩니다.

주의할 점

  • 홈페이지 주소가 https 로 시작해야 합니다. http 사이트에서는 브라우저가 차단합니다.
  • 보안 정책(CSP)을 쓰는 사이트라면 웹 담당자에게 해당 도메인 허용을 요청해야 합니다.
  • 네이버 모두, 스마트스토어처럼 외부 스크립트를 지원하지 않는 서비스에서는 쓸 수 없습니다.

2. HTML 만 가능하다면 — 버튼 클릭 팝업

스크립트는 막혀 있지만 HTML 블록은 넣을 수 있는 경우가 꽤 있습니다. 이때는 이벤트 페이지를 iframe 으로 품은 모달을 HTML 과 CSS 만으로 만들 수 있습니다. 자바스크립트 없이도 체크박스와 CSS 만으로 여닫는 방식이 동작합니다.

페이지 한가운데에 이벤트를 섹션처럼 박아두는 방법도 있습니다. 팝업 대신 이벤트 안내 영역이 페이지의 일부로 들어가는 형태입니다. 분양 안내 페이지나 이벤트 전용 페이지가 따로 있다면 오히려 이쪽이 자연스럽습니다.

다만 자동 노출은 안 되고, 화면 크기에 따라 높이를 맞추는 마감이 스크립트 방식만큼 깔끔하지 않습니다.

3. 링크만 가능하다면 — 새 탭

배너 이미지나 버튼에 이벤트 주소를 연결하는 가장 단순한 방법입니다. 누르면 새 탭에서 이벤트 페이지가 열립니다. 설치랄 것도 없어서 홈페이지를 만질 줄 아는 사람이 없어도 됩니다.

여기서 담당자들이 가장 많이 묻는 질문이 있습니다.

"버튼을 누르면 새 탭 말고 팝업으로 뜨게 할 수는 없나요?"

링크만으로는 안 됩니다. 링크는 현재 페이지를 이동시키거나 새 탭을 여는 것, 둘 중 하나만 할 수 있습니다. 보고 있는 페이지 위에 창을 덮으려면 그 페이지에서 무언가가 실행되어야 합니다. 그래서 1번이나 2번이 필요한 것이고, 바꿔 말하면 "링크를 팝업으로 띄운다" 가 곧 1번 방식입니다. 둘은 다른 제품이 아니라 같은 페이지를 어떻게 여느냐의 차이입니다.

그리고 링크 방식이 열등한 것도 아닙니다. 문자·카카오톡·SNS 로 이벤트를 뿌릴 때는 어차피 링크가 필요합니다. 이건 스크립트로는 대체할 수 없는 영역입니다.

어느 쪽이든 데이터는 같은 곳에 쌓입니다

자주 오해하는 부분이라 짚고 넘어가겠습니다. 세 방법 모두 이벤트는 이벤트 제공사의 서버에서 돌고, 참여자 정보도 그쪽 데이터베이스에 쌓입니다. 팝업이냐 새 탭이냐는 화면이 어디에 보이는지의 문제이지, 데이터가 어디에 저장되는지의 문제가 아닙니다.

그래서 "팝업 방식이라야 우리 회원 데이터와 연결된다" 는 말은 정확하지 않습니다. 회원 정보와 이벤트 결과를 묶는 것은 설치 방식과 무관한 별도의 연동 작업입니다. (이 주제는 따로 다룰 만큼 함정이 많아서 다음 글에서 이어가겠습니다.)

정리 — 세 가지 질문

상담 전에 이 세 가지만 확인하면 방식이 정해집니다.

  1. 홈페이지에 스크립트를 넣을 수 있습니까?
    관리자 화면에 "외부 스크립트", "헤더/푸터 삽입", "맞춤 코드" 같은 메뉴가 있는지 보세요. 있으면 1번으로 갑니다.
  2. 자동으로 뜨는 게 부담스럽습니까?
    브랜드 성격상 팝업이 부담스럽다면, 스크립트를 넣더라도 자동 노출을 끄고 버튼을 눌렀을 때만 열도록 설정할 수 있습니다.
  3. 문자나 카톡으로도 뿌릴 계획입니까?
    그렇다면 링크가 어차피 필요합니다. 같은 이벤트라면 홈페이지 팝업과 링크를 함께 써도 참여자 명단은 한곳에 모입니다.

실제 제안에서는 둘 중 하나를 고르기보다 같이 쓰는 경우가 많습니다. 홈페이지에는 팝업을 붙이고, 문자·카톡·SNS 에는 같은 이벤트의 링크를 뿌리는 식입니다.

마치며

설치 방식은 사소해 보이지만 참여율을 크게 가릅니다. 자동으로 한 번 뜨느냐, 방문자가 스스로 눌러야 하느냐의 차이가 그대로 참여자 수로 나타납니다. 그리고 그 선택지는 홈페이지가 무엇을 허용하느냐로 이미 절반쯤 정해져 있습니다.

이벤트를 기획하기 전에 홈페이지 관리자 화면을 한 번 열어보세요. "외부 스크립트" 칸이 있는지 없는지만 확인해도 대화가 훨씬 빨라집니다.


관련 가이드
스크래치 vs 룰렛 — 어떤 게임이 적합할까
QR 이벤트 ROI 측정 가이드
키오스크 이벤트 운영 체크리스트

터치라이크 웹룰렛은 위 세 가지 방식을 모두 지원합니다. 홈페이지 사정에 맞는 방법을 상담 단계에서 함께 확인해 드립니다.