쿠팡파트너스

쿠팡파트너스 다이나믹 배너 설치 - 티스토리에서 가장 적절한 위치와 사이즈는?

9월 4일 2020. 4. 19. 17:22

해야지 해야지 하면서, 결국 안하다가 드디어 오늘에서야 설치하게 된 쿠팡파트너스 다이나믹 배너. 예전에 댓글로 어떤 분께서 왜 여기 티스토리 블로그에는 쿠팡 관련 링크를 넣지 않느냐고 물어보신 분이 계셨다. 물론 여기 지금 포스팅 중 1개에 관련 상품 링크를 넣은 것이 있다. 그것말고는 따로 상품배너라든가 그런건 넣지 않고 있었다.

그냥 지저분한게 싫어서

현재 블로그 4개를 운영하고 있는데, 그 중에서 쿠팡 배너 링크가 들어간 블로그는 2개. 둘다 수익형 블로그인데 하나는 일상을 주로 다루는 거라 쿠팡 파트너스가 메인이 아니기 때문에 그냥 메인화면에 링크 정도만 걸어 놓은 게 전부. 해당 블로그에는 제품 리뷰와 함께 콘텐츠 자체에 링크를 통해 수익을 낸다. 단순히 프로그램이 아니라 #내돈내산 제품이므로 정성껏 리뷰에 상품링크를 붙이는 방식이라서 그런지 구매전환율이 매우 높은 편. 그래서 카테고리 배너나 다이나믹 배너는 사용하지 않는다. 왜냐하면 블로그가 지저분해 보이는 게 싫어해서.

두번째 블로그는 말 그대로 프로그램을 돌리는 블로그라 그냥 아무거나 막 갖다 박아뒀다. 즉, 어차피 오염된 홍보성 블로그 포스팅이 대부분이기에 온갖 배너란 배너는 다 붙여서 현란하게 만들어두었다. 물론 지저분한 건 좀 싫다. 

스크롤을 내려도 내려도 상품이 끝이 없을 정도로 붙여놓음

그래서 여기 이 티스토리 블로그도 배너를 붙일까말까 여러번 고민을 했었다. 개인적으로 지저분하게 광고를 여기저기다가 붙이는 걸 너무나도 싫어해서 나중에 애드센스까지 달게 되면 저품질처럼 보이는 블로그가 되고 싶지 않았다. 그러나, 애드고시 1차 탈락이후, 당분간은 애드센스가 승인이 나려면 많은 시간이 걸릴 거 같다는 생각에 조그만한 다이나믹 배너를 붙여보자는 생각이 문득 들었다.

쿠팡 파트너스 다이나믹 배너 기본 설정법

우선 쿠팡파트너스 사이트로 접속한다. 그러면 위쪽 메뉴에 링크생성 - 다이나믹 배너를 클릭. 그런 다음 배너생성을 클릭.

링크생성 - 다이나믹 배너
배너생성 클릭

 

그러면 왼쪽메뉴 '배너설정'에서 배너제목, 배너타입, 배너데이터, 크기 조정 등을 설정할 수 있는데, 제목은 마음대로, 배너타입은 아래와 같이 여러가지가 있는데 다른 사람을 후킹할 자신이 있다면, 다른 걸 해도 좋지만, 자신이 없다면 꼭 '고객 관심 기반 추천'으로 하자. 나는 구글의 AI능력에 한 두 번 놀란게 아니기 때문에 반드시 '고객 관심 기반 추천'을 선택하길. 왜냐하면 정말 지금 당신의 블로그에 들어온 그 사람이 최근 검색한 것을 바탕으로 원하는 물건을 딱 눈 앞에 아른거리게 하며, 못 사게 만들게끔 하는게 구글의 인공지능이니까.

쉽게 설치하는 방법: 레이아웃 측면에서는 별로

여기서부터 본격적으로 나눠지는데, 우선 HTML을 잘 다룰 줄 모르고 그냥 설치만 해도 된다는 사람은 이 경우를 따르면 된다. 위의 상태에서 딱히 크기 조정을 할 필요 없이 '배너 만들기' 버튼을 누르면 아래에 파트너스 코드에 링크가 생성되는데 우선 그것을 복사.

이렇게 한 다음, 티스토리 관리자 페이지로 들어간다. 왼쪽메뉴에서 플러그인을 클릭하면 메뉴 중에서 배너출력이라는 것이 있다. 이것을 클릭한 후 설정.

플러그인 - 배너출력
배너출력 후 적용

 

그런 다음, 다시 왼쪽메뉴 '꾸미기 - 사이드바'로 이동한 다음,  기본 모듈에서 HTML 배너출력을 끌어 당겨서 오른쪽에 놓고 싶은 위치에 드래그앤드롭 한다.

사이드바 - HTML 배너출력 - 오른쪽 위치에 드래그 앤 드롭

 

오른쪽 어느 위치에 놓게 되면, 편집이라는 버튼이 보이는데, 이걸 클릭해서 아까 쿠팡파트너스에서 복사했던 링크를 붙여준다. 이름은 원하는 대로 적고, 확인.

 

그런 다음, 미리보기를 한 번 해보면 이런 식으로 다이나믹 배너가 들어간 것을 확인할 수 있다. 위치를 바꿀 수도 있다.

공지사항 위쪽에 위치할 경우 (사이드바 1)
최근포스트 아래에 위치할 경우 (사이드바 1)

 

PC에서 볼 때는 나름 깔끔하게 보이는데, 그래도 오른쪽 부분이 잘리는 것이 마음에 안든다. 그리고 더 문제는 모바일. 뭔가 짤리는 듯한, 느낌. 나는 저런 걸 너무나도 싫어하는 사람이라 견디지 못하겠음. 특히 서브제목 (태그, 검색)과 너무 간격없이 붙어 있는 것도 별로. 그래서 편집에서 수식어 <br>을 넣었지만, 적용이 안되었다. 

잘린듯한 오른쪽과 여백이 서브제목과의 간격이 너무 좁음

 

조금은 까다롭지만 깔끔하게 보이는 방법: 스킨편집 HTML 이용

솔직히 배너의 가로사이즈를 조절하면 어찌저찌 될 거 같지만, 문제는 이용하는 사람마다 휴대폰 가로사이즈는 모두 다 다르다는 거. 그렇기 때문에 누군가에겐 오른쪽이 잘려보이고, 누군가에겐 오히려 남아보일 수 있다. 그럼 어떻게 해야 깔끔하게 떨어지는 레이아웃이 완성될까? 지금부터 바로 공개.

아까 쿠팡파트너스 다이나믹배너를 만들 때로 돌아가서 가로 사이즈를 설정할 때 수치를 적는게 아니라 100%로 적으면 모든게 해결된다. (이거 아는 사람 있었으려나?)

그런 다음, 위쪽 플러그인에 다시 소스를 넣어줘도 상관없지만, 나 같은 경우는 다른 방법을 사용했는데, 관리자페이지로 들어가서 '스킨편집'으로 들어가는 것. 그러면 창이 하나 새롭게 열리면서 오른쪽에 '스킨편집'이라고 메뉴가 뜨는데, 거기서 html 편집을 클릭.

꾸미기 - 스킨편집 - html 편집

 

클릭하게 되면 html 관련 소스들이 나오는데, 갑자기 외계어가 나와서 당황하는 사람들이 있겠지만, 걱정 붙들어 매기. 그 상태에서 단축키 ctrl+F (윈도우 사용자) 혹은 cmd+F (맥 사용자)를 누른 후 '공지사항'을 입력하면, 바로 공지사항이 있는 곳으로 이동한다. 왼쪽에는 윗쪽 포스팅이 다 끝나고 아래쪽 하단의 내용이 새롭게 시작되는 부분인데, 오른쪽 html 소스에서는 이런 식으로 표시가 된다.

 

굳이 왜 이 위치냐고 묻게 된다면, 여러가지 이유가 있겠지만, 여러 개의 포스팅이 나열되는 중간에 배너를 넣게 되면 뭔가 지저분해 보이고 집중력이 떨어져 포스팅을 읽는데 방해가 되고 연관된 다른 콘텐츠를 읽지 않고 이탈률이 오히려 올라갈 수 있다는 개인적 판단 하나, 그렇다고 해서 페이지 맨 아래에다가 배너를 삽입하게 되면 포스팅이 끝나면 대부분 포스팅이 끝나는 지점에서 뒤로가기를 누를 확률이 높기 때문에 중간에 삽입하는 것이 적절하다고 판단했다.

복사한 쿠팡 소스를 복사해서 아래와 같이 삽입을 하고 적용 후, 새로고침을 해서 확인하게 되면 잘림이 없고 홈페이지를 더럽히지 않는 선에서 레이아웃이 깔끔하게 떨어진다는 것.

 

100이냐 150이냐, 당신의 선택은?

배너 가로사이즈는 아까 말했던 대로 100%로 처리하면 모바일에서는 보통 3개의 상품이 보이면서 돌아가는데 세로 사이즈를 100이냐, 150으로 처리하느냐에 따라 모바일에서 보이는 느낌이 조금 다르다. 세로를 100을 하느냐, 150을 하느냐의 설정은 아래 느낌을 보고 원하는 대로 사용하면 된다. 100을 선택하면 상품이미지가 2개, 150을 선택하면 상품이미지가 3개. 

좌 (세로 100), 우 (세로 150)

다이나믹 배너로 소소한 성과 얻길

이렇게 블로그에 다이나믹 배너를 삽입함으로써 소소한 성과를 얻을 수 있는 기반을 마련했다. 물론, 내 방식이 마음에 들지 않아서 공격적으로 여기저기 노출하고 싶은 사람은 그렇게 해도 당연히 된다. 그건 블로그를 운영하는 사람이 어디에 중점을 두고 있느냐에 따라서 당연히 다른 거니까. 하지만, 나처럼 블로그의 레이아웃을 최대한 해치지 않으면서 '소소한' 성과를 얻고 싶다면 이 방법을 꼭 사용해보길. 

추가로 티스토리 앱 사용자에겐 노출 안됨. 어차피 티스토리 앱 사용하시는 분들은 대부분 티스토리 주인이니까 해당 배너는 검색을 통해 들어온 티스토리 앱이 없는 사람들에게만 노출되는 게 나쁘진 않을 듯.

반응형