[티스토리] 쿠팡파트너스 다이나믹 배너 달기

쿠팡 파트너스에 새로운 형태의 배너만들기 기능이 생겼다길래..

냉큼 달려가서 제 블로그에 바로 달아봤습니다.

참고로, 쿠팡파트너스를 모르시는 분들이 있을지 몰라 설명을 보태면 방문자가 쿠팡 배너를 통해 상품을 구입하면 판매금의 일부를 배너를 단 블로거에게 돌려주는 서비스입니다.

 

https://partners.coupang.com
가입도 쉽고 배너달기도 승인도 쉬우니 가입하셔도 좋을듯...
가입할때 추천인 보너스도 이벤트로 진행하고 있습니다.
제 ID: AF2196394 입니다.^^

 

 

 

일단, 새로 생긴 다이나믹 배너의 모양은 크게 특별할게 없네요.

웹서핑하며 자주 보았던 쿠팡 배너군요. 그러나

쿠팡 파트너스에 있는 기존의 에니메이션없이 심심한 배너보다

확실히 주목도가 높아질거 같습니다.

 

 

 

우선, 이 배너를 붙이는 티스토리 스킨 기준은

현재, 제 블로그에 적용된 #2라는 스킨입니다. (#3아니죠!~!)

 

물론 제가 스킨을 사용하면서 중간에 나름대로 편집/수정한 부분이 있어서 일부분 조금씩 차이가 있는 부분이 있을 수 있으나 큰 틀에서 벗어나지 않아, 적용이 되지 않거나 하는일은 없을 듯 합니다.

 

 

다이나믹 배너를 만들어야죠?

메뉴를 찾아들어가 배너생성이라는 커다란 파란 버튼을 누룹니다.

 

 

 

간단히, 옵션 및 정보들을 입렵합니다. 일단, 전 두개를 만들겁니다.

 

위와 같이 '쿠팡배너_PC'란 이름으로 PC화면에서 보여지는 배너 한개와 아래 설명추가할 '쿠팡배너_M', 모바일화면에서 보여지는 배너

 

 

배너타입과 카테고리는 직접 변경해보시면 배너에 상품들이 어떤건지 확인하실 수 있으니 따로 설명은 생략할게요.

 

티스토리 스킨 #2의 레이아웃 사이즈를 변경하지 않으셨다면 PC화면에서 본문아래쪽에 붙일 경우, 너비는 830이면 딱 맞을겁니다. 높이는 상품수를 고려해서 적당히 140으로 맞춘겁니다.

 

 

 

위의 생성된 배너의 소스를 잠시 임시 텍스트파일에 붙여넣기 해두세요.

물론, 만들기 누르시는 동시에 쿠팡 파트너스에 저장도 됩니다.

 

 

 

모바일에 쓸 배너도 만들어주세요.

사이즈는 아이폰인 제 화면에서 너비 372로 하니 딱 맞더군요.

높이는 역시 상품 3개정도 보이도록 150으로 맞췄습니다.

 

 

 

자, 이제 블로그에 배너를 넣어봐야겠네요.

 

 <!-- 쿠팡 파트너스 배너 --> 

 <div class="coupang_ad_mobile">
  <script src="//ads-partners.coupang.com/g.js"></script>
  <script>
   new PartnersCoupang.G({ id:163 });
  </script>
 </div>

 <div class="coupang_ad_pc">
  <script src="//ads-partners.coupang.com/g.js"></script>
  <script>
   new PartnersCoupang.G({ id:160 });
  </script>
 </div>

 

맨 처음 제 화면의 예처럼

저는 블로그 하단에 푸터 바로 위에 넣어봤습니다.

위 HTML상의 줄수를 참고하셔서 위 소스를 넣어주세요.

물론, 위치는 원하시는 다른 곳에 넣으셔도 됩니다.

 

소스설명

<div class="coupang_ad_mobile"> ---- 모바일화면에서 보이는 영역

<div class="coupang_ad_pc"> ---- PC에서 보이는 영역

 

중요!!!

new PartnersCoupang.G({ id:163 });

new PartnersCoupang.G({ id:160 });

이 아이디 번호는 각자 다를 겁니다. 본인의 소스를 참고해주세요.

 

 

 

화면에 따라 잘 보일 수 있도록 CSS도 편집해줍니다.

 

PC화면&테블릿화면에 적용되는 위치(위 화면 줄 수 참고/스킨 #2기준)에

/* cp_partners */
.coupang_ad_pc {display:block; margin:0px auto 0px auto; width:830px; text-align:center; line-height:0px; border:1px solid #e3e3e3;}
.coupang_ad_mobile {display:none}

 

PC배너가 나타나도록 위 코드를 붙여넣습니다.

 

 

 

 

모바일 화면에 적용되는 위치(위 화면 줄수 참고/스킨 #2기준)에

위 빨간색으로 표시된 코드 아래쪽에 넣으시면 됩니다.

 

 /* cp_partners */
 .coupang_ad_pc {display:none}
 .coupang_ad_mobile {display:block; margin:0px aut380o 0px auto; width:100%; text-align:center; line-height:0px;}

 

모바일배너가 보이도록 위 코드를 넣습니다.

 

 

이제, 본인의 블로그를 확인해보시면 됩니다.

배너달고 부랴부랴 글까지 써본거라

설명이 부족했을 수도 있습니다. 문의는 댓글로 달아주세요~

감사합니다.