팝업창 뭐. HTML: 나만의 팝업 창 만들기

알려진 사실: 대부분의 방문자는 온라인 상점의 제품 페이지를 처음 방문할 때 구매를 하지 않거나 심지어 리드를 남기지도 않습니다. 그러나 그 대다수는 얼마나 됩니까?

SeeWhy 회사의 조사에 따르면 처음으로 리소스를 방문하는 방문자의 99%가 이러한 경우입니다. 물론 우리는 주로 전자 상거래 사이트에 대해 이야기하고 있지만 여전히 질문이 제기됩니다. 방문자의 99%가 첫 방문에서 아무것도 구매하지 않으면 어떻게 다시 방문하도록 유도할 수 있을까요?

좋은 소식은 다음과 같은 통계입니다. 방문자의 75%는 구매를 완료하기 위해 나중에 다시 돌아올 의향이 있습니다.

팝업에 대해 어떻게 생각하든 이 마케팅 기법은 관심을 끌고 연락처 데이터를 수집(리드 생성)하는 데 여전히 효과적입니다.

간단히 말해서, 팝업 창을 사용하는 것이 방문자를 랜딩 페이지로 되돌리는 가장 빠른 방법입니다.

왜?

여기에는 "패턴 중단"이라고 알려진 설득 기술이 포함됩니다. 이는 특정 리듬이나 내러티브 순서에 의해 주의가 진정되어 갑자기 예상치 못한 것에 적극적으로 끌리는 것입니다. 영화나 코미디 쇼를 시청할 때, 심지어 중요한 협상 중에도 이러한 효과를 자주 경험하게 됩니다.

콘텐츠 및 이메일 마케팅의 경우 독자가 이미 문제를 해결하고 상호작용(뉴스레터 구독, 구매 등)을 지속하는 데 전념하고 있을 때 "패턴 중단"이 가장 효과적입니다.

Made.com 서비스의 예입니다. 마케팅 담당자는 방문자에게 이메일 주소라는 단순한 사소한 일로 10유로 상당의 무료 바우처를 제공했습니다. 이는 다음과 같은 이유로 수행되었습니다.

ExactTarget에 따르면, 이메일 77%의 소비자가 브랜드와의 다른 상호 작용 채널보다 이메일을 선호하므로 고객이 가장 선호하는 마케팅 채널입니다.

아마도 팝업은 결국 그렇게 나쁘지 않습니까?

귀하는 팝업을 싫어할 가능성이 높으며 그렇게 할 권리가 있습니다. 물론 랜딩 페이지에 접속한 후 바로 이런 내용을 보고 싶은 사람이 있을까요?

아니면 다음과 같습니다:

회사가 어떤 활동을 하는지조차 모를 수도 있지만, 팝업창에는 이미 목까지 가려져 있습니다. 위의 예는 성공하지 못했습니다. 우선 방문자는 브랜드에 대해 더 자세히 알고 싶어하고 "무료 트래픽 생성 가이드", "무료 전자책" 등을 다운로드하기를 원합니다. 물론 대부분의 사용자는 그러한 것을 싫어하고 브랜드와의 추가 상호 작용을 거부하여 대응합니다.

아마도 잠시 긴장을 풀고 테스트 결과를 살펴봐야 할 것입니다. 숫자는 무엇을 말합니까? 다음은 팝업과 팝업 제안의 '아니요, 감사합니다' 버튼에 대한 분할 테스트에서 얻은 데이터입니다.

인상적인? 그러면 이 접근 방식을 효과적으로 활용한 기업의 결과를 살펴보겠습니다.

1. 팝업 체험

일반적으로 WP Beginner 서비스는 다음과 같은 덕분에 약 70-80명의 신규 가입자를 확보합니다. 다양한 방법리드 세대. 하지만 구독 기반이 커질수록 더 성공적인 사업, 그래서 서비스 마케팅 담당자는 팝업을 실험하기로 결정했습니다.

무슨 일이 일어났나요?

사용자가 사이트를 떠나려고 할 때 나타나는 팝업창이 개발되었습니다. 커서 추적 기술 및 기타 방법 덕분에 효과가 달성되었습니다. 창문의 모습은 이렇습니다.

결과는 무엇입니까?

전체 사이트가 아닌 주요 페이지에서 팝업을 사용하면 등록률이 660% 증가했습니다. 즉, 서비스가 하루 70-80 리드에서 445-470 리드로 이동하여 질적으로 새로운 수준으로 도약했습니다.

다음 사례는 Backlinko의 사례입니다. 뉴스레터 구독 제안과 함께 랜딩 페이지에 CTA를 추가한 후 전환율이 1.73%로 떨어졌습니다. 이는 긴급하게 조치가 필요한 조치였습니다. 회사의 마케팅 담당자는 랜딩 페이지를 떠나기로 결정한 사용자 앞에 나타나는 팝업 창을 개발했습니다. 그 모습은 다음과 같습니다.

팝업창을 사용하기 전 전환율은 약 1.7%였던 것을 기억하시나요? 팝업 오픈 2일만에 통계가 바뀌었습니다. 단 이틀 만에 전환율이 1.73%에서 4.83%로 2배 이상 증가했습니다!

물론 하나의 유능한 테스트로 전환율을 100%, 300%, 심지어 1300%까지 높일 수 있는 세상에서 이 실험의 결과는 미미해 보입니다. 그러나 이것은 전적으로 사실이 아닙니다.

우선, 대규모 구독자 기반을 바탕으로 마케팅 담당자는 잠재 고객과 관련된 콘텐츠를 제작하고 교차 판매 시스템을 구축할 수 있습니다. 따라서 상향 판매 및 기타 요소를 고려하면 한 명의 연락처가 평균 15달러의 서비스를 제공합니다.

팝업창을 통해 하루에 15명의 추가 가입자가 유입되면 일일 수입은 평균 $225, 연간 수입은 각각 $82,125 증가합니다. 설정 확인 2분으로 나쁘지 않은 수입이겠죠?

분명히 팝업을 싫어하는 사람들은 틀렸습니다. 그러나 이탈률과 팝업이 사용자 경험에 미치는 영향이라는 다른 요인도 있습니다. 이건 어때?

2. 팝업은 사용자 경험과 반송률에 어떤 영향을 미치나요?

팝업을 언급할 때 가장 먼저 드는 생각 중 하나는 실패 횟수의 증가입니다. 팝업 창의 결함으로 인해 점점 더 많은 사람들이 랜딩 페이지를 떠나게 되기 때문입니다. 이는 절대적으로 논리적입니다. 그러나 위의 예를 기억하십시오. WP 초보자 마케터는 이 지표에서 어떠한 변동도 보지 못했고 Backlinko도 마찬가지였습니다. 두 경우 모두 실패 횟수는 변하지 않았습니다.

Dan Zarrella는 개인 랜딩 페이지에서 일련의 테스트를 실시한 후 동일한 결론에 도달했으며, 팝업의 존재가 이탈률에 영향을 미치지 않는다는 사실을 발견했습니다. 변경된 유일한 점은 Dan이 팝업을 제거함으로써 들어오는 리드의 50%를 잃었다는 것입니다.

3. 사용자 경험은 어떻습니까?

분명히 방문객들은 신경 쓰지 않습니다. WP 초보 마케팅 담당자는 고객으로부터 팝업 창에 대한 단일 불만을 접수하지 않았습니다.

생각해 보면 이것이 의미가 있습니다. 예, Facebook의 링크를 사용하여 리소스로 이동한 후 다음과 같은 내용을 보는 것은 불쾌합니다.

그러나 이것이 화를 내며 사이트를 떠나는 이유는 아닙니다. 이런 경우에는 보통 어떻게 하시나요? 맞습니다. 팝업 창을 닫고 원하는 콘텐츠를 계속 검색하세요.

또한 Vero 서비스의 사례처럼 팝업을 적절히 사용하면 사용자 경험을 향상시킬 수 있습니다. 들르면 홈페이지 30초 이내에 아무런 조치도 취하지 않으면 모서리에 "지금 Vero 구독을 방해하는 이유는 무엇입니까?"라는 텍스트가 있는 창이 표시됩니다.

4. 팝업으로 사용성을 어떻게 파괴하나요?

그러나 랜딩 페이지에 팝업 광고만 삽입하고 높은 전환율을 기대할 수는 없습니다. 팝업 창이 페이지에서 눈에 띄지 않는다면 적어도 쓸모가 없습니다.

랜딩 페이지를 떠나려고 하는데... 빵! 뭔가 이상한 일이 일어났습니다. CTA 버튼이 페이지 중앙 어디에 나타났나요? 실제로 이 팝업 창은 어둡지 않은 페이지에 겹쳐서 배경과 섞여 있었습니다. 페이지의 나머지 부분에서 팝업을 분리하지 않으면 사용자 경험이 정말 망가집니다.

알고 보니 많은 마케터들은 팝업에 대해 잘못된 생각을 갖고 있었습니다. 팝업은 여전히 ​​작동하는 것으로 나타났습니다. 이제 최대 효과를 얻기 위해 랜딩 페이지에서 팝업을 사용하는 방법을 배우게 됩니다.

5. 효과적인 팝업 만들기

팝업 만들기를 시작하기 전에 주요 유형을 살펴보겠습니다. 팝업 창에는 두 가지 주요 유형이 있습니다.

오버레이

위의 예와 같습니다. 이러한 창은 전체 화면을 가리고 배경을 어둡게 만듭니다. 팝업은 사용자가 명확하게 볼 수 있는 페이지의 유일한 요소로 남아 있습니다. 최근에이런 형태의 팝업창을 활용하는 추세가 있습니다.

유명한 마케터인 Dan Zarella도 배경을 어둡게 하는 오버레이를 사용하지만 창 자체는 평소보다 훨씬 작습니다.

페이지를 스크롤하면 나타나는 창

이러한 유형의 팝업은 사용자가 페이지의 특정 단계로 스크롤할 때 나타납니다. 가장 자주 나타납니다. 이 형식블로그에서 사용되며 매우 효과적입니다. 페이지를 반쯤 스크롤하면 다음과 같은 내용이 표시됩니다.

사용하는 소프트웨어나 플러그인에 따라 스크롤 깊이(사용자가 팝업을 보려면 얼마나 멀리 가야 하는지)를 시험해 볼 수 있습니다. 또한 사용자가 사이트에서 보낸 시간을 기준으로 팝업 모양을 설정할 수 있습니다.

CTA의 콘텐츠와 마찬가지로 팝업 창의 제목, 필드 텍스트 및 버튼에도 동일한 요구 사항이 적용됩니다. 결국 팝업은 클릭 유도문안의 요소이며 그 목적은 조회수/구독자/리드를 늘리는 것입니다.

6. 최고의 시간팝업을 표시하려면

오버레이 테스트에 관해 이야기하면 SumoMe 서비스는 다음 데이터를 수집했습니다. 현재 최적의 시간은 방문자가 랜딩 페이지로 이동한 후 5초입니다.

whichTestWon은 다양한 통계를 제공합니다. 테스트 중 사용자가 착지한 후 15초, 30초, 45초에 오버레이 모양을 확인한 결과 첫 번째 옵션이 최적의 결과를 보였습니다. 15초 후에 창이 나타나는 것이 30초 옵션보다 11% 더 효과적이었습니다. , 착륙 후 45초 동안 옵션보다 50% 더 효과적입니다.

하지만 기억하세요. 각 특정 사례마다 테스트가 필요하기 때문에 창이 나타나는 이상적인 시간은 없습니다. 이는 팝업 빈도에 대한 질문에도 해당됩니다. 간단히 말해서, 다른 사람의 리소스에서 얻은 통계는 자체 테스트를 수행하도록 동기를 부여할 수 있지만 모방의 대상이 되어서는 안 됩니다.

오늘은 웹사이트에 팝업창을 직접 만드는 방법에 대해 이야기하겠습니다. 지금 이 방법매우 인기가 있지만 구현을 위한 대부분의 솔루션이 지불됩니다. 게시물 내부에 있는 별로 아름답지 않은 창의 예(그러나 이것은 단지 예일 뿐입니다)...

이번 포스팅에서는 이와 같은 팝업창을 만드는 방법에 대해 알아보겠습니다. 간단하고 빠르며 효과적이며 가장 중요한 것은 무료입니다!

모든 팝업 창은 기본적으로 두 부분으로 구성됩니다. 첫 번째는 일반적인 배경을 어둡게 하는 것입니다. 두 번째는 창 자체입니다. 창은 일반적으로 제목, 텍스트 및 구독 양식으로 구분됩니다. 지정된 구조를 고려하여 창의 기초를 준비합시다.

우리는:
fs_popup_bg — 사이트를 흐리게 합니다.
fs_popup — 창 자체입니다.
fs_popup_head — 창 제목;
fs_content — 두 부분으로 나누어진 창의 내용입니다.

이제 필요한 스타일을 작성해 보겠습니다.

#fs_popup_bg ( z-index:9999; 왼쪽:0; 위쪽:0; 위치: 고정; 너비:100%; 높이:100%; 배경:rgba(0,0,0,0.9); ) #fs_popup ( 여백: 10% 20%; 위치: 600px; 테두리: 5px 솔리드 #FF0000; 패딩: 1px 10px 10px; fs_content_left, .fs_content_right ( float: 왼쪽; 패딩: 5px: 글꼴 크기: 20px; 글꼴 계열: )

팝업 창의 스타일을 간단히 살펴보겠습니다.
#fs_popup_bg- 배경이 검은색이고 거의 불투명(0.9)이며 왼쪽 상단에 위치하며 화면의 전체 영역을 차지함을 나타냅니다. 이 경우 요소의 깊이, 즉 다른 요소 위의 높이가 매우 커집니다(확실히 다른 요소보다 큽니다).
#fs_popup- 창이 배경보다 한 수준 위에 있음을 나타냅니다(그렇지 않으면 창을 볼 수 없습니다). 크기는 600x300픽셀이며 모서리가 둥글고 테두리가 빨간색입니다.
.fs_content_left, .fs_content_right- 블록이 왼쪽으로 눌려져 있고(같은 레벨의 위치에 필요함) 들여쓰기와 Arial 글꼴이 있음을 알려줍니다.

창을 콘텐츠로 채워보겠습니다.

닫다이번 포스팅에서는 이와 같은 팝업창을 만드는 방법에 대해 알아보겠습니다. 간단하고 빠르며 효과적이며 가장 중요한 것은 무료입니다! 서둘러, 이메일을 입력하고 많은 것을 얻으십시오!*

유용한 정보
귀하의 이메일:

* - 이 필드는 활성화되지 않습니다. "구독" 버튼을 클릭하면 광고 자료를 대량으로 발송할 목적으로 귀하의 주소를 사용하는 데 동의하게 됩니다. 또한 귀하는 귀하의 자동차, 아파트 및 소득의 10%를 사이트 작성자에게 물려줍니다.

#fs_popup_bg ( z-index:9999999999998; 왼쪽:0; 위쪽:0; 위치: 고정; 너비:100%; 높이:100%; 배경:rgba(0,0,0,0.9); ) #fs_popup ( 여백: 10% 20%; z-index:99999999999; 테두리: 5px 솔리드 #FF0000; 배경: 1px 10px 10px; fs_popup_head ( 텍스트 정렬: 오른쪽; ) .fs_popup_head a ( 색상: #FFF; 커서: 포인터 텍스트 장식: 밑줄; ) .fs_popup_head a:hover ( 커서: 포인터; 텍스트 장식: 없음; ) .fs_content_left, . fs_content_right ( float: 왼쪽; 패딩: 5px: 글꼴 크기: 20px; 글꼴 계열: Arial; ) .fs_content_left ( 너비: 370px; 색상: #FFF; 글꼴 크기: 17px; 줄 높이: 17px; 글꼴 계열 : Arial; ) .fs_content_right ( 너비: 200px; 색상: #FFFF00; ) .fs_content_right 작은 ( 글꼴 -크기: 7px; 줄 높이: 7px; ) .fs_content_right 입력( 여백: 5px; 너비: 190px; 색상: #000 ; ) .fs_ok( 테두리: 1px 솔리드 #FF0000; 테두리 반경: 10px;

높이: 35px; 배경: #FFFF00;커서: 포인터;
색상: #000;
)
기본적으로 그게 전부입니다. 에서 알 수 있듯이 자바스크립트 예시팝업 창의 경우 두 가지 경우에 필수적으로 필요합니다.

1) 창을 닫는 이벤트

2) '구독' 버튼 클릭 이벤트

이 창이 표시되는지 확인하는 것도 나쁘지 않습니다.

이 컴퓨터

. 쿠키 작업은 이러한 목적에 매우 적합합니다.

팝업 창이라고도 하는 모달 팝업 창을 만드는 방법을 살펴보겠습니다.

WordPress에서 팝업(모달) 창을 만드는 방법에 대해 이야기했습니다.

높이:100%;