티스토리 블로그에 올리는 애드핏, 애드센스 광고에 해당 이미지나 글이 홍보를 목적으로 하는 내용이라는 표식을 부착하는 방법입니다.
외국의 일부 국가에서는 의무적으로, 관습적으로 혹은 자발적으로 해당 콘텐츠가 광고라는 것을 표시하는 것 같습니다. 국내의 특정 콘텐츠 마케팅 업체의 광고에도 이러한 표식을 부착하는 곳이 있습니다. 애드핏과 애드센스의 국내 광고는 표시하지 않습니다.
표시 문구는 'AD' 혹은 'ADVERTISEMENT'를 많이 사용합니다.
부착하면 장점보다는 단점이 많을 것 같습니다. 각자 판단하여 필요하신 분은 사용해 보세요. 단점은 너무 많으니까 나열할 필요도 없을 것 같습니다.
장점 중의 하나는 위 이미지에 표시한 것과 같이 'ADVERTISEMENT' 문구가 빠르게 로딩된다는 것입니다. 광고가 미처 표시되지 않은 상단에 'ADVERTISEMENT'가 먼저 표시됩니다. 광고 배너 이미지가 표시되지 않은 빈 공간을 접하고 사용자가 난감할 수도 있는 데, 이러한 표식으로 광고가 나올 차례라는 것을 알면 접속자가 마음의 안정을 찾을 수 있습니다.
.revenue_unit_wrap {
padding-top: 20px;
background-image: url('./images/ico_advertisement.svg');
background-repeat: no-repeat;
background-position: 100% 0;
overflow: hidden;
}
코드와 이미지 파일입니다. 코드는 티스토리 블로그에 연동화시킨 애드핏, 애드센스 광고에 맞추었습니다. 연동화 시킨 광고에만 적용할 수 있습니다. 'style.css' 파일에 추가하는 코드입니다.
이미지 파일 용량 369바이트
광고 상단 20픽셀 padding 공간
SVG 이미지 배경
이미지 파일은 'ico_advertisement.svg'이며 자신의 블로그에 업로드해야 합니다. 이미지의 문구는 'ADVERTISEMENT'입니다. 상단 첨부 이미지 참고합니다.
애드핏 모바일 광고는 가로 폭을 100% 활용하지 않습니다. 'ADVERTISEMENT' 문구를 기본 오른쪽 끝으로 배열하였기 때문에 광고 이미지와 가로 선이 일치하지 않아 눈에 거슬리면, 가운데로 옮기는 것도 괜찮습니다.
문구를 가운데로 이동
background-position: 50% 0;
문구 오른쪽, 배경색 추가 방법도 있습니다.
구글 adsense
배경 이미지 오른쪽, 배경색 변경
.revenue_unit_item.adsense { background-color: #eee; }
카카오 adfit
배경 이미지 오른쪽, 배경색 변경
.revenue_unit_item.adfit { background-color: #eee; }
adsense와 adfit 겸용
배경 이미지 오른쪽, 배경색 변경
.revenue_unit_item { background-color: #eee; }
댓글