노하우잇 » 마케팅 & 테크 실무 꿀팁 » 이탈 감지 팝업 (Exit-Intent Popup)

이탈 감지 팝업 (Exit-Intent Popup)

글쓴이 /
🔥 03. 퍼포먼스 마케팅 & 디지털 광고 유료 광고 및 미디어 바잉

이탈 감지 팝업 (Exit-Intent Popup)

Exit-Intent Popup

💡 3줄 핵심 꿀팁 요약

이탈 감지 팝업(Exit-Intent Popup)은 유저가 브라우저 상단으로 커서를 움직여 이탈하려는 의도를 보일 때 할인 혜택을 제시하여 즉각적인 전환을 유도하는 최후의 방어선입니다. 마우스 좌표 감지 이벤트를 활용해 CVR을 평균 3~5%p 개선할 수 있습니다.

💡 3줄 핵심 꿀팁 요약

이탈 감지 팝업(Exit-Intent Popup)은 유저가 브라우저 상단으로 커서를 움직여 이탈하려는 의도를 보일 때 할인 혜택을 제시하여 즉각적인 전환을 유도하는 최후의 방어선입니다. 마우스 좌표 감지 이벤트를 활용해 CVR을 평균 3~5%p 개선할 수 있습니다.

📖 개념 정의 및 실무 적용

웹사이트에 유입된 트래픽의 90% 이상은 구매나 회원가입 없이 그냥 이탈합니다. 이 유저들을 그대로 놓치면 높은 비용을 들여 확보한 유료 광고(Paid Media) 트래픽의 효율이 급격히 떨어지게 됩니다. 이탈 감지 팝업은 이미 페이지를 떠나려는 ‘고객의 마지막 순간’을 포착하여 무조건적인 이탈을 막고, 닫기 직전의 유저에게 특별 할인 쿠폰이나 리드 수집 폼을 노출함으로써 구매 전환율(CVR)을 극적으로 끌어올리는 핵심 마테크(MarTech) 전략입니다.

💻 실무 활용 코드 스니펫 (JAVASCRIPT)

document.addEventListener('mouseleave', function(e) { if (e.clientY <= 0) { var exitPopup = document.getElementById('exit-intent-popup'); if (exitPopup && !localStorage.getItem('exit_popup_shown')) { exitPopup.style.display = 'block'; localStorage.setItem('exit_popup_shown', 'true'); } } });

⚡ 5분 만에 적용하는 실행 스텝

  1. GTM(Google Tag Manager)에 접속하여 새로운 Custom HTML 태그를 생성합니다.
  2. 제공된 JavaScript 코드를 삽입하고, 트리거로 'All Pages' 또는 주요 랜딩 페이지를 지정합니다.
  3. 웹사이트에 ID가 'exit-intent-popup'인 CSS 기반의 팝업 요소를 미리 생성하고 초기 상태를 display: none으로 설정합니다.
  4. 미리보기(Preview) 모드에서 브라우저 상단으로 마우스를 빠르게 이동시켜 팝업이 정상 노출되는지 테스트 후 배포합니다.
🚀 실무자만 아는 한 끗 차이 Pro Tip

모바일 환경에서는 마우스 커서가 없으므로 '스크롤 속도 감지(Scroll Velocity)' 또는 '체류 시간 30초 이상' 조건을 결합하여 모바일 전용 이탈 감지 로직을 구현해야 합니다. 또한, localStorage를 활용해 동일 유저에게 하루에 1회까지만 노출하도록 제어하여 피로도를 낮추세요.

⚠️ 흔히 하는 실수 및 주의사항

초보자가 가장 흔히 저지르는 실수는 모바일 접속 환경을 고려하지 않고 desktop 마우스 이벤트만 심어 모바일 유저의 이탈을 전혀 잡지 못하는 것입니다. 반드시 모바일 대응 스크롤 이벤트를 함께 적용해야 합니다. 또한, 팝업이 너무 자주 뜨면 브랜드 신뢰도가 하락하므로 쿠키/로컬스토리지 기반의 노출 빈도 제한(Frequency Capping)을 반드시 설정하세요.

❓ 자주 묻는 질문 (FAQ)

Q. 데스크톱과 모바일에서 이탈 감지 팝업을 동시에 구현하려면 어떻게 하나요?

A. 데스크톱에서는 마우스 Y좌표가 0 이하로 올라갈 때(mouseleave) 작동하는 스크립트를 쓰고, 모바일에서는 유저가 페이지를 위로 빠르게 스크롤(Scroll Up)하거나 30초 이상 체류했을 때 팝업이 뜨도록 조건문을 분기하여 구현해야 합니다.

Q. 팝업을 띄웠는데 오히려 이탈률이 더 높아지고 사이트 체류 시간이 줄어듭니다.

A. 페이지가 로드되자마자 팝업을 띄우거나, 유저가 원하는 정보를 찾기도 전에 방해 요소로 작용했을 가능성이 높습니다. 최소 15초 이상의 체류 시간이나 특정 스크롤 깊이(예: 50% 이상 스크롤)를 충족한 유저에게만 이탈 감지 스크립트가 활성화되도록 딜레이 조건을 추가하세요.

위로 스크롤