워드프레스: 쿠팡 배너를 클릭해야 글을 볼 수 있도록 설정하는 방법

뉴스픽 등 일부 사이트를 방문하면 일부 글에서 "쿠팡 방문하고 계속 읽기" 배너가 팝업으로 표시되면서 글을 읽으려면 쿠팡 사이트를 방문하도록 강제하는 경우가 있습니다.

워드프레스에서는 몇 가지 방법으로 이 방법을 어렵지 않게 구현이 가능합니다. 이 글에서는 인기 워드프레스 테마인 Divi 테마를 구입하면 함께 사용할 수 있는 Bloom을 사용하여 쿠팡 배너를 클릭해야 글을 읽을 수 있도록 구성하는 방법에 대해 자세히 설명보고, 그 효과와 응용에 대해서도 살펴보겠습니다.

[참고*쿠팡에서 '쿠팡 방문하고 컨텐츠 더보기' 팝업 배너와 관련하여 광고를 확인한 사용자가 쿠팡으로의 방문을 건너뛸 수 있는 버튼을 추가하는 등의 몇 가지 규칙을 추가했습니다. '쿠팡 방문하고 컨텐츠 더보기' 관련 규정을 숙지하여 정책 위반이 되지 않도록 주의하시기 바랍니다.*]

무료 플러그인으로는 Brave 팝업 플러그인을 사용하여 비슷하게 구현이 가능합니다. Brave 팝업 빌더의 편집기를 사용하면 드래그 앤 드롭 방식으로 원하는 대로 디자인할 수 있습니다. Brave 팝업 플러그인을 사용하여 '쿠팡 방문하고 계속 읽기' 배너를 구현하고 싶은 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다. 저렴한 비용에 구현해드릴 수 있습니다(참고).

Brave 플러그인을 사용한 쿠팡 배너

또한, 다음과 같이 뉴스픽과 비슷하게 구현하는 것도 가능합니다.

[참고*위와 같은 형식으로 배너를 표시하는 것이 쿠팡 파트너스 정책 위반에 해당하지 않을까 싶어 쿠팡에 문의해보니 "원치 않을 경우 뒤로가기를 클릭하시기 바랍니다"라면서 문제가 없다는 답변을 받았습니다.*]

Bloom 플러그인을 사용하여 쿠팡 배너를 클릭해야 글을 볼 수 있도록 설정하기

저는 워드프레스 인기 테마인 Divi 테마와 함께 제공되는 Bloom이라는 뉴스레터 가입 플러그인을 사용하여 워드프레스 사이트의 일부 글에서 다음 그림과 같이 글을 읽으려면 쿠팡 배너를 클릭하도록 유도하는 팝업을 표시하여 테스트해보았습니다.

이 방법을 이용하면 이탈률이 증가할 수 있지만, 저는 방문자가 25초 이상 체류하거나 페이지의 40%를 스크롤했을 때 배너가 표시되도록 하여 곧바로 방문자가 이탈하는 것을 어느 정도 완화시켰습니다. 그리고 팝업 배너는 동일 방문자에 대하여 하루에 한 번만 표시되도록 설정했습니다.

이 방법을 이용할 경우 전환율이 낮을 수 있지만, 양질의 콘텐츠를 제공하는 경우 "이를 통해 블로그 운영을 지원하실 있다"는 것을 강조하면 효과가 괜찮을 수도 있을 것 같습니다.

이 쿠팡 팝업 배너만을 이용한 엊그제의 수익을 캡처해보았습니다. (채널 아이디를 지정하면 수익 추적이 가능합니다.) 최근 아이폰 14 사전예약을 잘 활용하여 큰 수익을 거두는 분들도 있지만 저는 방문자 수가 그리 많지 않아서 수익은 소소한 편입니다 

수익이 나려면 어느 정도 방문자 수가 뒷받침되어야 할 것 같습니다. 그리고 A/B 테스트(예: 낮 시간대와 저녁 시간대, 밤 시간대 등을 나누어서 테스트, 카테고리별로 나누어서 테스트 등)하여 가장 효과가 좋은 시간대와 카테고리 등을 찾을 수도 있을 것입니다.

배너를 클릭해야 글을 읽도록 설정하기

이 방법을 이용하려면 Bloom 플러그인이 있어야 합니다. 이 플러그인은 Divi 테마와 함께 제공되는 플러그인입니다. Divi 테마가 없는 경우 여기에서 문의(유료)하시면 Bloom 플러그인을 설치하여 세팅해드릴 수 있습니다.

또는, 다음 배너를 클릭하여 Divi 테마를 구입하면 Bloom 플러그인을 다운로드할 수 있습니다.

Divi 테마는 아바다 테마와 함께 유료 테마 중에서 가장 많이 사용되는 베스트셀링 테마입니다.

워드프레스 아바다 테마와 Divi 테마 비교 - 워드프레스

Bloom 플러그인을 설치한 후에 워드프레스 관리자 페이지 » Bloom » Optin Forms에서 New Optin 버튼을 클릭하여 새 팝업을 생성합니다. 

Select Optin Type to Begin에서 Pop Up을 선택합니다.

배너를 클릭해야 글을 읽도록 구현하려는 경우 Optin Configruation » Setup에서 다음 그림과 같이 Form Integration에 Custom HTML Form을 선택합니다.

여기서 핵심은 HTML 양식의 HTML 코드입니다. 저는 다음과 같이 추가했습니다.

<form id="embedded-subscribe" onsubmit="return false;"><div class="bloom-popup"><a href="링크" target="_blank" style="color: white; text-decoration:none;" rel="noopener nofollow" onclick="closeNav()">쿠팡 방문하고 계속 읽기</a></div>
<p class="bloom-credit"><a href="링크" target="_blank" style="font-size: 1.12em; color: black; text-decoration:none; padding:10px;" rel="noopener nofollow" onclick="closeNav()">이 포스팅은 쿠팡 파트너스의 일환으로 일정액의 수수료를 제공받을 수 있습니다. 이를 통해 블로그 운영을 지원하실 수 있습니다.</a></p>
<p class="bloom-back">(원치 않을 경우 뒤로 가기를 눌러주세요.)</p>
<button class="submit-form" type="submit" style="visibility: hidden;">S</button></form>

<script>
function closeNav() {
document.getElementsByClassName('submit-form')[0].click();
document.getElementsByClassName('et_bloom_close_button')[0].click(); 
}
</script>

링크 부분은 적절한 링크를 추가하시기 바랍니다. HTML 코드 부분은 원하는 대로 바꾸셔도 됩니다.

위와 같은 HTML과 자바스크립트를 추가할 경우, 방문자에게 표시된 횟수와 클릭한 횟수를 추적할 수 있습니다.

그리고 Design 탭의 Custom CSS 섹션에 그림과 같은 CSS 코드를 추가합니다.

나머지 세팅은 살펴보시고 원하는 대로 설정하시면 됩니다.

저는 Display Settings 탭에서 다음과 같이 설정했습니다.

• Trigger After Time Delay: 일정 시간 후에 팝업 표시. 바로 아래의 Delay (in seconds) 옵션에서 시간 지정
• Trigger After Scrolling: 일정 부분을 스크롤하면 팝업 표시.
• Display Once Per Session: 세션 당 한 번만 표시
• Session Duration (in days): 세션 기간 (단위: 일)

Hide on Mobile을 체크하면 활성화하면 모바일 기기에서 팝업이 표시되지 않습니다.

팝업을 표시하면 이탈률이 증가하므로 저는 59초가 지난 후에 혹은 페이지/글의 50%까지 스크롤한 후에 팝업이 표시되도록 설정했습니다. 이렇게 팝업이 표시되는 조건을 지정하면 팝업 페이지 뷰가 줄어들게 되어 이탈률이 증가하더라도 영향이 적을 것입니다.

또한, 팝업이 표시되는 대상을 지정할 수 있습니다. Everything을 선택하면 사이트의 모든 글/페이지에 팝업이 표시됩니다. 특정 카테고리의 글에만 팝업이 표시되도록 할 수 있습니다.

팝업을 표시하지 않을 글이나 페이지를 지정할 수도 있습니다.

콘텐츠 잠금 방식

팝업 방식 대신 클릭해야 나머지 글을 읽도록 하는 것도 가능합니다.

2022년 10월 21일 업데이트: 효과 및 응용

약 20일 정도 부분적으로 이 방식으로 쿠팡 파트너스 배너가 표시되도록 테스트를 해보았습니다.

1. 특정 카테고리 글에만 적용
2. 하루 1회만 표시
3. 포스트 방문 후 1분 경과 후 또는 50% 정도 스크롤 시에 배너 표시
4. 하루 100회 클릭 정도까지만 진행

이 방식을 이용하면 이탈률이 높아지고 방문자들의 거부감이 높아지기 때문에 매일 진행하는 것이 부담이 될 수도 있을 것입니다. 저는 위의 제한을 두고 진행했었는데, 수익이 조금 나기는 했습니다.

방문자 수가 많은 사이트인 경우 수익이 제법 날 수도 있을 것입니다. 지금은 쿠팡 배너 대신 네이버 카페 방문 배너를 워드프레스 관련 글에 표시하고 있습니다.

마찬가지로 표시 제한(1분 경과 후 또는 50% 스크롤 시 팝업 표시, 1일 1회)을 두고 있습니다.

이런 팝업은 쿠팡 배너보다는 이탈률이 적은 편입니다. 또한, 효과도 괜찮은 편입니다. 실제로 이 팝업을 표시한 직후에 카페 가입자가 늘었습니다. 보통 하루 3~5명 정도 가입했었는데, 이 팝업을 표시한 이후에는 평균 15~20명 정도 가입하고 있습니다.

[참고*배너에서 닫기 버튼을 제거했는데요. 닫기 버튼을 표시할 경우 클릭률이 1% 이하로 감소하기 때문에 사실상 효과가 없는 것 같습니다. 그러므로 약간의 이탈률을 감수하고 이런 방식을 이용하면 특정 사이트로의 유입을 늘릴 수 있는 괜찮은 방법이 아닐까 생각됩니다.*]

워드프레스, 웹호스팅, CSS, 홈페이지 등에 대하여 관심이 있는 경우 네이버 카페에 가입하여 워드프레스 사용자들과 교류하고 관련 정보를 공유하실 수 있습니다.

[참고*이 글의 방법은 워드프레스 Bloom 플러그인을 사용하여 구현되고 있습니다. 티스토리 등에서는 Javascript를 사용하여 구현이 가능합니다. 이 블로그에서는 현재 1분 정도 지난 후에 네이버 카페 방문하기 팝업이 표시됩니다. 비슷한 방법으로 쿠팡 페이지 방문하기 팝업을 표시할 수 있습니다. 직접 만들어보고 싶은 경우 자바스크립트 모달 팝업 (Javascript Modal Popup)을 참고하시기 바랍니다.*]

마치며

이상으로 워드프레스에서 Divi 테마와 함께 제공되는 Bloom 플러그인을 사용하여 배너를 클릭해야 글을 읽도록 설정하는 방법에 대하여 살펴보았습니다. 이 플러그인을 사용하면 효과적으로 이메일 주소를 수집할 수 있고 이메일 주소를 입력해야 파일을 다운로드할 수 있도록 설정할 수 있습니다.

이메일 주소를 입력해야 다운로드 가능하도록 설정하기 - Bloom 플러그인 - 워드프레스 정보꾸러

참고로 아래 쿠팡 배너를 클릭하여 쿠팡 사이트로 이동한 후에 상품을 검색하여 구입하시면 제가 약간의 수수료를 제공받을 수 있습니다. 이를 통해 워드프레스 정보 꾸러미 블로그와 네이버 워드프레스 카페 운영에 도움을 주실 수 있습니다.

참고

https://avada.tistory.com/2743

쿠팡 파트너스 자동 포스팅 후기 (+feat. 워드프레스)