배너를 클릭해야 글을 볼 수 있도록 하는 방법 (콘텐츠 잠금)

해외 사이트에서 스크롤하면 이메일을 입력해야 나머지 글을 읽을 수 있도록 구성되어 있는 경우가 많습니다. 워드프레스에서는 플러그인을 사용하여 이메일을 입력하거나 배너를 클릭해야 글을 볼 수 있도록 콘텐츠 잠금 기능을 쉽게 구현하는 것이 가능합니다.

예를 들어, 뉴스픽의 일부 글에서는 쿠팡 파트너스 배너를 클릭해야 글을 읽을 수 있도록 되어 있습니다. 이와 같이 구현하고 싶은 경우 뉴스레터 구독 플러그인이나 팝업 플러그인을 활용할 수 있습니다.

이외에도 파일을 다운로드하기 전에 특정 액션(예: 이메일 주소 입력, 배너 클릭, 문의 양식 제출 등)을 요구하는 경우에도 아래의 두 플러그인을 사용할 수 있습니다. 이메일 주소를 입력하여 메일링 리스트에 가입해야 파일 다운로드가 가능하도록 하려는 경우 "이메일 주소를 입력해야 다운로드 가능하도록 설정하기"를 참고하시기 바랍니다.

배너를 클릭해야 글을 볼 수 있도록 하는 방법 (콘텐츠 잠금 기능)

글을 스크롤하거나 글을 다 읽은 후에 그림과 같이 뉴스레터 구독을 요청하는 팝업이 표시되는 사이트들이 있습니다.

배너를 클릭해야 글을 볼 수 있도록 하는 방법 (콘텐츠 잠금)

해외 블로그나 뉴스 사이트에서 흔히 볼 수 있는데요. 뉴스레터 운영을 위해 이메일을 수집할 때 많이 사용되는 수법입니다.

이를 조금 응용하여 팝업을 클릭해야 글을 볼 수 있도록 구현할 수 있습니다. 이 글에서는 이러한 기능을 구현할 수 있는 두 가지 플러그인을 소개합니다.

워드프레스 인기 테마 중 하나인 Divi 테마 라이선스가 있는 경우 아래의 Bloom 플러그인 부분을 참고하시기 바랍니다.

Brave 팝업 빌더 플러그인 (무료 및 유료 플러그인)

배너를 클릭해야 글을 볼 수 있도록 하는 방법 (콘텐츠 잠금) - Brave 팝업 플러그인

Brave 팝업 빌더 플러그인은 이 블로그에서 소개한 적이 있습니다("사용이 쉬운 워드프레스 팝업 플러그인 Brave Popup Builder" 참고). 이 플러그인은 팝업뿐만 아니라 이메일 수집, 사이드바/푸터에 배너 고정 등 다양한 기능을 제공합니다.

Brave는 무료 버전과 유료 버전이 제공되며, 유료 버전에서는 스크롤 시 팝업을 표시하는 기능 등 일부 고급 기능이 제공됩니다. 또한, 애드 블록(Ad Blocker)을 감지하여 애드 블록을 해제해야 사이트 글을 볼 수 있도록 하거나 자체 컨택트 폼을 통해 사용자가 제출한 데이터를 DB에 저장하는 등의 부가 기능도 탑재되어 있습니다.

하지만 무료 버전으로도 이 글에서 설명하는 기능을 구현하는 것이 가능합니다.

팝업을 생성할 때 Promo & Sales Popups 템플릿 중에서 적당한 것을 선택하도록 합니다.

배너를 클릭해야 글을 볼 수 있도록 하는 방법 (콘텐츠 잠금) 2

무료 템플릿이 있고 PRO 템플릿이 있습니다. 무료 템플릿 중에서 적절한 것을 선택하면 됩니다.

배너 템플릿이 로드되면 적절히 수정하도록 합니다. Brave 팝업 빌더는 드래그 앤 드롭 방식으로 쉽게 팝업을 만들 수 있습니다.

프로모션 & 세일즈 팝업은 클릭하여 다른 페이지나 외부 사이트로 연결될 수 있는 버튼이 있습니다. Brave에서는 방문자들에게 배너가 표시되는 횟수와 클릭하는 횟수에 대한 통계를 제공하므로 전환율을 확인할 수 있습니다.

무료 버전은 기능이 제한적이지만 다음과 같은 기능을 설정할 수 있습니다.

  • 페이지 로드 시 팝업 표시
  • 일정 시간이 경과한 후에 팝업 표시 (예: 20초 후에 팝업 표시)
  • 팝업 표시 횟수 설정 가능 (예: 하루에 1번만 팝업 표시, 이틀에 1번만 팝업 표시...)

페이지 스크롤 시(예: 페이지의 30% 지점까지 스크롤 시) 또는 페이지를 나가려고 할 때 팝업을 표시하는 기능 등은 PRO 버전에서 제공됩니다.

다만, 클릭한 후에 다른 페이지나 사이트가 새로운 창에서 열리고 팝업은 자동으로 닫혀야 하지만, 클릭 시 팝업이 자동으로 닫히는 기능은 없습니다.

다음과 같이 약간의 커스텀이 필요합니다.

  1. CSS를 사용하여 Close 버튼을 숨깁니다.
  2. 링크를 클릭하면 Close 버튼이 클릭되도록 자바스크립트로 제어합니다.

링크를 클릭하면 닫기 버튼이 눌려져서 팝업이 닫히도록 하는 방법은 생활코딩의 "addEventListener()" 강의를 참고해보세요.

팝업 설정에서 팝업을 표시할 페이지나 카테고리 등을 설정할 수 있습니다. 특정 카테고리의 글에만 팝업을 표시하거나 전체 사이트에 표시할 수 있습니다.

Bloom 플러그인 (뉴스레터 구독을 위한 이메일 수집 플러그인)

Bloom은 뉴스레터 구독을 위한 이메일 주소를 효과적으로 수집하는 데 사용되는 플러그인으로 Divi 테마 라이선스가 있는 경우 사용이 가능합니다. 이메일 마케팅은 고전적인 방법이지만 아직도 효과적인 마케팅 전략이므로 뉴스레터 등을 통해 이메일 마케팅을 수행하려는 경우 유용하게 사용할 수 있습니다.

위에서 소개한 Brave 팝업 빌더는 다양한 팝업을 생성할 수 있고 많은 기능이 탑재된 다소 무거운 플러그인이지만 Bloom은 메일링 리스트 수집에만 특화된 플러그인이라서 사이트 속도에 대한 영향이 적은 편입니다.

Bloom 뉴스레터 구독 이메일 수집

Bloom은 이메일 수집에 특화된 플러그인이기 때문에 클릭 배너 기능은 제공되지 않습니다.

배너를 클릭해야 콘텐츠를 볼 수 있도록 하려면 약간의 커스텀이 필요합니다.

Form Integration에서 이메일 제공자(예: HubSpot, MailChimp, MailerLite, MailPoet, Mailster, Salesforce 등)를 선택할 수 있습니다. 배너 클릭 시 글을 볼 수 있도록 하려면 이 옵션을 Custom HTML Form(사용자 정의 HTML 폼)으로 선택하고 HTML로 배너를 클릭할 수 있는 코드를 입력하도록 합니다.

배너를 클릭해야 글을 볼 수 있도록 하는 방법 (콘텐츠 잠금) - Bloom 플러그인

Brave 플러그인에서와 마찬가지로...

  1. CSS를 사용하여 닫기 버튼을 숨기고,
  2. 링크 클릭 시 닫기 버튼이 클릭되어 팝업이 닫히도록 자바스크립트로 제어합니다.

Bloom에서도 방문자에게 팝업이 표시된 횟수와 클릭한 횟수에 대한 통계를 제공합니다.

Brave와 마찬가지로 팝업이 표시되는 카테고리나 페이지 등을 제어할 수 있고, 쿠키 설정을 통해 하루에 한 번 혹은 이틀에 한 번 등 팝업을 표시하는 횟수를 지정할 수 있습니다. 또한, 팝업이 표시되지 않도록 제외할 페이지나 글을 개별적으로 지정하는 것도 가능합니다.

Brave 팝업 빌더 vs. Bloom 간단 비교

구분BraveBloom
라이선스- 무료
- PRO
Divi 테마를 구입한 경우 무료다운로드
기능- 팝업, 이메일 구독, 배너 고정 등 다양한 기능
- 애드 블록 감지 등 일부 기능은 PRO에서만 제공
- PRO: A/B 테스트. 이를 이용하여 여러 개의 팝업을 만들어 랜덤하게 표시 가능(참고)
이메일 구독 기능만
콘텐츠 잠금- 약간의 커스텀 필요 (상기 내용 참조)
- 스크롤 시 로드 등 일부 고급 기능은 유료 버전에서만 제공
- PRO: 클릭 시 팝업 표시. 이를 통해 다운로드 전에 특정 액션(예: 이메일 주소 입력, 링크 클릭 등)을 요구할 수 있음
- 약간의 커스텀 필요 (마찬가지로 상기 내용 참조)
- 스크롤 시 로드 등 고급 기능 제공
- 클릭 시 팝업 기능 지원 (예: 다운로드 전에 특정 액션을 요구할 수 있음)
표시 제한- 가능 (예: 하루에 한 번만 표시)
- 표시되는 페이지나 글, 카테고리 지정 가능
- 가능 (예: 하루에 1회만 표시)
- 표시되는 페이지, 카테고리 등 지정 가능
- 제외할 글, 페이지 지정 가능
사이트 속도 영향덩치가 큰 플러그인으로 사이트 속도에 영향을 미칠 수 있음사이트 속도에 미치는 영향이 적은 편임
추적 기능지원 (쉽게 설정 가능)지원 (Custom HTML Form에서는 약간의 커스텀 필요)
데모영문 사이트에 스크롤 시 배너가 표시되도록 설정 (Brave Pro 사용)Bloom 실행 화면은 Bloom 사이트를 참고해보세요.

Bloom을 사용하여 쿠팡 배너를 클릭해야 글을 볼 수 있도록 구현하는 자세한 방법을 "워드프레스: 쿠팡 배너를 클릭해야 글을 볼 수 있도록 설정하는 방법"에서 확인할 수 있습니다. 또한, 이메일 주소를 입력해야 파일을 다운로드할 수 있도록 설정하는 방법을 "이메일 주소를 입력해야 다운로드 가능하도록 설정하기"에서 살펴볼 수 있습니다. 티스토리 등 비 워드프레스 사이트에서는 모달 팝업 자바스크립트 코드로 구현이 가능합니다.

마치며

일부 사이트를 방문하면 쿠팡 파트너스 배너 팝업이 표시되면서 글을 보려면 배너를 클릭하여 쿠팡을 방문하도록 유도하는 경우가 있습니다. 이 블로그에서도 테스트로 일부 카테고리의 글에 이러한 배너를 표시하도록 설정해보았습니다.

이 경우 브라우저의 뒤로 가기 버튼을 클릭하여 해당 페이지에서 나가는 방문자가 증가하여 이탈률이 높아지게 됩니다. 방문자가 많은 사이트에 이러한 기능을 선택적으로 적용하면 효과적으로 수익을 낼 수 있을 것 같습니다.

쿠팡 사이트로 이동하는 배너를 눌러야 콘텐츠를 볼 수 있도록 팝업을 표시하는 방식은 (쿠팡 파트너스 담당자에게 확인한 결과) 정책 위반이 아니라고 합니다.

참고로 쿠팡에서 상품을 구매할 일이 있다면 다음 배너를 클릭하여 쿠팡 사이트에서 제품을 검색하여 구입하시면 파트너스 활동의 일환으로 제가 약간의 수수료를 제공받을 수 있습니다. 이를 통해, 이 블로그의 운영을 지원하실 수 있습니다.

Brave 플러그인이나 Bloom을 사용하여 이러한 콘텐츠 잠금 기능을 구현하는 데 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고


4개 댓글

  1. 매번 좋은 정보 감사드립니다.
    여기 글을 읽다보면 쿠팡보고읽는팝업이 뜨던데 그것 자세하게 설정하는 방법 공유 가능하신가요? 위에 링크를 클릭해도 잘 안 보이더라구요. 부탁드립니다.

    1. Bloom 플러그인을 사용하여 배너를 클릭해야 글을 볼 수 있도록 하려는 경우 https://avada.tistory.com/2784 글을 참고할 수 있습니다.

      하지만 지난 토요일 카카오 데이터센터 화재로 인해 티스토리 블로그가 제대로 작동하지 않을 수도 있습니다. 현재 복구 중이며 완전히 복구되려면 시간이 걸릴 것 같습니다.
      티스토리의 경우 웹 용량과 트래픽에 제한이 없고 무료이기 때문에 보조용으로 활용하고 있지만, 이번 카카오 사태를 겪으면서 시간이 될 때 해당 글을 이 블로그나 다른 워드프레스 블로그로 옮길 생각입니다.

      Bloom 플러그인은 Elegant Themes의 Divi 테마를 구입하면 다운로드가 가능한 프리미엄 플러그인입니다.

      다음 그림과 같이 배너를 클릭하여 본문 내의 특정 정보(예: 코드나 중요한 정보)를 볼 수 있도록 설정하는 것도 가능합니다.

      쿠팡 파트너스 콘텐츠 잠금

      무료 플러그인인 Brave 팝업 플러그인을 사용하는 방법도 있습니다.

      1. 안녕하세요. 혹시 Brave 팝업 플러그인을 사용헤서 해보고 있습니다.
        본문글에 약간의 커스텀 작업.
        1. CSS를 사용하여 Close 버튼을 숨깁니다.
        2. 링크를 클릭하면 Close 버튼이 클릭되도록 자바스크립트로 제어합니다.
        이건 도통 모르겠습니다. 링크 걸어주신 사이트도 어렵드라구요. ^^ 혹시 작동방법 공유 가능하신가요?

      2. 이 블로그에서는 일시적으로 Bloom 플러그인을 사용하여 쿠팡 배너와 네이버 카페 배너를 표시하는 테스트를 해왔습니다.
        쿠팡 배너는 그다지 권장하지 않습니다. 수익은 약간 나는 것 같지만, 방문자들의 거부감 때문에 이탈률이 높아질 수 있습니다.
        Brave 플러그인으로 구현을 원하시는 경우 유료 서비스로 처리해드리는 점 양해바랍니다.
        Close 버튼을 숨기지 말고 그대로 두시는 것도 고려해보시기 바랍니다. (그런 경우 클릭률을 체크해보면 매우 낮아지는 문제가 있지만요.)

댓글 남기기

* 이메일 주소는 공개되지 않습니다.