GitHub(깃허브) 블로그에 쿠팡 광고 넣기
GitHub(깃허브) 블로그에 쿠팡 광고 넣기
이 글에서는 GitHub 블로그에 쿠팡 광고를 설정하는 방법을 설명합니다.
쿠팡 광고 코드 만들기
쿠팡 파트너스 홈페이지에서 다양한 형식의 광고 링크를 만들 수 있습니다. 제 경우에는 사이트 하단에 붙일 목적으로 다이나믹 배너를 선택했습니다.
다이나믹 배너는 내용이 옆으로 움직이면서 계속 바뀌기 때문에 사용자 시선을 끌기 좋습니다. 이를 페이지 중간이나 사이드에 배치하면, 사이트를 이용하는데 불편을 줄 수 있습니다. 제 경우에는 페이지 맨 마지막에 위치한 각주 블록 위에 붙일 계획이기에, 광고 효과가 높을 것으로 예상되는 다이나믹 배너를 선택했습니다.
구분이 편한 이름을 배너 제목에 붙이고 사이트에 적절한 배너 타입과 배너 데이터를 선택합니다. 고객 관심 기반 추천에 추천 상품 피드를 선택했습니다. 깔끔하게 보이도록 테두리 없음으로 선택했습니다.
배너 만들기 버튼을 클릭하면 자바 스크립트 코드가 생성됩니다.
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
new PartnersCoupang.G({"id":755374,"trackingCode":"AF3144276","subId":null,"template":"carousel","width":"680","height":"140"});
</script>
광고 모듈 정리하고 쿠팡 광고 코드 넣기
광고 모듈 정리하기
이전 글에서 애드센스 광고 코드를 _includes/commons/footnotes.md에 넣었습니다. 쿠팡 광고를 추가로 넣어야 하니, 관리의 편의를 위해 광고마다 따로 파일을 두는 것이 나을 수 있습니다.
_includes/commons/footnotes.md는 다음과 같이 광고 모듈을 포함하는 기능만 넣었습니다.
{% include /commons/ads/adsense.html %}
{% include /commons/ads/coupang.html %}
include은 _includes 디렉토리에서 가져오라는 명령입니다. 그러니 /commons/ads/adsense.html의 위치는 _includes/commons/ads/adsense.html이 됩니다.
adsense.html는 이전 코드에서 해당 부분을 옮긴 것입니다.
쿠팡 광고 코드 넣기
_includes/commons/ads/coupang.html에는 조금 전에 생성한 자바 스크립트 코드를 넣으면 됩니다.
<!-- 쿠팡 파트너스 -->
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
var pc_width = document.querySelector(".page__content").clientWidth;
console.log("pc_width = ", pc_width);
{% if site.github.url == site.prod_url__ %}
new PartnersCoupang.G({"id":755374,"template":"carousel","trackingCode":"AF3144276","subId":"quantkang","width":pc_width,"height":"140","tsource":""});
{% else %}
new PartnersCoupang.G({"id":755374,"template":"carousel","trackingCode":"AF3144276","subId":"quantkangalpha","width":pc_width,"height":"140","tsource":""});
{% endif %}
document.write("<small>이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</small>");
</script>
쿠팡에서 받은 자바 스크립트 코드를 티스토리에 넣으면 화면 크기에 맞춰 적절한 수의 상품이 출력됩니다.
데스크탑의 경우 아래와 같이 본문 너비에 맞춰 4개가 나옵니다.
창의 너비를 줄이면 알아서 갯수가 줄어 듭니다. 아래는 2개가 표시되고 있습니다.
Minimal Mistakes에서는 화면 너비가 조정되었다는 정보를 쿠팡 스크립트에 전달하지 못하는지, 처음 생성된 크기가 그대로 유지됩니다. 또한 초기 생성시에도 사용 가능한 너비를 감지하지고 않고, 주어진 고정값을 씁니다.
고정된 숫자를 너비로 쓰다 보니, 빈 공간이 많이 생기거나, 반대로 넘쳐 흘러 좌우 스크롤바가 생길 수 있습니다.
페이지를 불러 온 이후에 창 크기를 조절하는 경우에는 대응하지 못하더라도, 생성할 당시 예상되는 화면 너비는 얻을 수 있습니다. 이를 위해 랜더링 정보가 이미 생성된 page__content 클래스 객체의 clientWidth를 가져와서 쿠팡 광고의 폭을 설정합니다.
테스트 사이트와 운영 사이트는 subId 필드값을 다르게 주었습니다. subId 필드는 쿠팡 파트너스의 채널 아이디를 말합니다. 동일한 배너를 여러 곳에 사용할 때 이를 구분하기 위해 사용할 수 있습니다.
document.write()의 내용은 쿠팡 파트너스 활동으로 수익을 얻는다는 문구를 넣기 위해서입니다. 쿠팡 광고 스크립트에 실행 오류가 생기는 경우에는, 이 문구를 보여줄 필요가 없기에 <script> 태그 안에 함께 넣었습니다.
테스트
폭이 넓은 데스크탑에서는 7개 항목까지 나오고 있습니다.
폭이 좁은 경우에는 2개가 나오고 있습니다.
휴대폰을 가정하고 테스트해 보면 1개가 나옵니다.
댓글
댓글 쓰기