애드센스 인피드광고를 티스토리 메인 인덱스 페이지에 넣는 방법
친효스킨을 열심히 제작하면서 티스토리의 HTML 구성에 대해서 많은 것들을 알게 되었습니다. 그 중에서 인덱스 페이지에 대해 늘 궁금했었는데 어떻게 적용시켜야 하며, 어디에서 나타나게 되는지를 알아냈습니다. 그리고 바로 애드센스를 적용시켜봤는데 성공했습니다. 다만, 인피드 광고 스타일도 현재의 인피드 스타일에 맞게 재설정을 해줘야 하는데 100% 완벽하게 똑같이 구현하기는 좀 어렵네요. 스크립트를 제대로 사용할 줄 안다면 가능할 듯 한데, 지금은 그냥 흉내내기 정도로 만들고 있습니다.
여기에서는 이미 인덱스 페이지가 구성되어 있는 CCZ-CROSS 반응형 스킨에 인피드 광고를 적용하는 방법에 대해 알아보겠습니다. 차후에 #1 같은 인덱스 페이지가 없는 반응형 스킨에는 어떤 식으로 인덱스 페이지를 만드는지에 대해서도 알아볼 예정 입니다.
인피드 광고 생성하기
먼저 애드센스에 로그인 하셔서 새 광고 단위를 만듭니다.
인피드 광고를 선택합니다.
여기에서는 구글에서 자동으로 사이트의 인덱스 페이지를 인식해서 스타일을 불러오는 방식으로 사용합니다. 자신의 블로그 주소를 입력하시고, Desktop 을 기준으로 스캔하시려면 데스크탑으로, 모바일을 기준으로 스캔하신다면 모바일로 맞추시고 진행하시기 바랍니다. 이 부분은 스킨마다 모바일에서 보여지는 방식과 데스크탑 모드에서 보여지는 방식이 다르므로 어디를 기준으로 할지 직접 정해주시기 바랍니다. 저는 모바일을 기준으로 했습니다.
어느정도 시간이 소요되면 이렇게 현재 인덱스 페이지의 모습과 그에 따른 인피드 광고의 미리보기 이미지가 나옵니다. 왼쪽의 흰색 영역이 선택된 부분인데, 다른 글도 선택해가면서 광고가 가장 최적으로 나온 부분을 골라주세요. 적당하다 싶은 스타일이 나왔으면 다음을 눌러줍니다.
먼저 해주셔야 할 것은 광고 이름을 정해주는 것 입니다. 알아볼 수 있는 이름으로 입력해주시면 됩니다. 그리고 아래쪽에 보시면 패딩이라고 있습니다. 이것은 여백을 확보하는 것으로, 인덱스 사이사이에 들어가야 할 광고이므로 목록들과 너무 딱 붙어있으면 보기가 좋지 않습니다. 그러니 적당히 위/아래로 띄워주시면 좋습니다.
자동으로 광고 스타일을 생성했기 때문에 구글의 천재적인 알고리즘으로 인하여 이 부분의 값도 자동으로 입력되어 있습니다. 제가 찍은 스크린샷 화면과 여러분들의 패딩값은 다를 수 있습니다. 단 CCZ-Cross 스킨을 사용중이시라면 같을 수 있겠습니다.
더 아래로 내려가시면, 인피드 광고의 세부 내용에 대한 조절도 가능합니다. 썸네일 이미지와 광고 제목, 대략적인 내용, URL 링크, 버튼 등등이 있습니다.
이미지는 썸네일 이미지를 말합니다. 보통 이 부분도 자동으로 알고리즘에 의해 입력되어 있습니다. 좀 더 디테일하게 수정하시려면 이 부분의 값을 변경하시면서 조절하시면 됩니다. 단 수정을 한 다음 바로 적용되지 않습니다. 경험상 한 30분 정도 지나야 적용이 되더군요. 애드센스 광고를 막 만들고 바로 적용이 안 되는 것 처럼 딜레이가 있는 모양입니다. 그렇기에 수정이 용이하지 못합니다. 참고하시기 바랍니다.
여기는 제목 부분을 수정하셔서 조절하시면 됩니다. 자신의 인덱스 페이지의 목록 부분을 직접 캡쳐 프로그램을 활용해서 저 빨간 표시 부분별로 다 하나하나 스크린샷을 진행합니다. 그리고 저장된 이미지의 세로 크기를 파악하시면 됩니다.
이것을 광고 크기에 적용시킵니다. 위는 자동으로 입력된 데이터값인데, 패딩의 가장 왼쪽 부분에 50px이 적용되어 있는데, 여기는 필요가 없을 것 같아서 저는 0으로 변경했습니다.
다음은 이 부분입니다. 광고라고 표시된 부분으로 여기는 URL 부분을 수정하시면 됩니다.
그리고 사이트 방문이라고 되어있는 버튼은 여기서 수정 가능합니다. 그냥 색상 변경만 가능합니다. 여기까지 확인하셨으면 저장하시고 코드를 생성하시면 됩니다.
드디어 다 되었습니다. 이제 해당 코드 스니펫을 복사하시면 됩니다. 여기에서 필요한 부분은 다음 세가지 입니다.
data-ad-layout-key = 인피드 광고의 스타일 코드
data-ad-client = 자신의 애드센스 ID 코드
data-ad-slot = 생성된 애드센스 코드 번호
이 세가지만 사용될 것입니다.
인피드 광고 적용을 위한 HTML 수정
이제 자신의 스킨 설정으로 가셔서 HTML 코드를 일부 수정해야 합니다. 아래의 첨부파일을 다운받아 주시기 바랍니다.
인피드광고(HTML).txt다운을 받으셨다면 아래와 같은 내용을 확인하실 수 있습니다.
<script>
var chInfeed = 0;
var chInfeedAdSenseShow = 0; // 0 = 인피드광고 적용, 1 = 인피드광고 비적용
var chInfeedAdSenseInsert = 5; // 인피드광고 적용 개수
var chInfeedAdSense = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-
layout="image-side" data-ad-layout-key="◆" data-ad-client="■" data-ad-slot="●"></ins>';
</script>
이 코드를 아까 따로 메모해 두었던 세가지 코드를 각각 맞게 붙여넣기를 해주시면 됩니다. 다이아몬드에는 레이아웃 키 값을, 네모는 클라이언트값을, 동그라미에는 광고 코드번호를 넣으시면 됩니다. 그리고 인덱스 페이지의 목록의 몇 개마다 광고를 넣을 것인지에 대한 설정은 이 부분을 변경하시면 됩니다.
chInfeedAdSenseInsert = 5;
숫자가 만약 3이면, 목록 3개마다 사이사이에 인피드 광고를 넣겠다는 뜻이 됩니다. 위의 예제에서는 5라고 입력되어 있으니 목록 5개마다 광고가 들어가게 됩니다.
수정된 인피드 광고 코드를 자신의 HTML 안의 <head> 안쪽에 넣어주시면 됩니다. 저는 </head> 바로 위에 넣었습니다.
인덱스 페이지 수정
이제 마지막 과정만 남았습니다. 자신의 스킨에 있는 인덱스 페이지 부분의 코드를 수정해줘야 합니다. 먼저 아래의 첨부파일을 다운로드 받아주세요.
이 코드를 자신의 HTML 코드 중 <s_article_rep>과 </s_article_rep> 사이에 있는 </s_index_article_rep> 바로 위에 붙여넣기를 해주시면 됩니다. s_index_article_rep 만 찾으시면 안 됩니다. 스킨에 따라서 이 요소가 여러개 사용된 경우도 있습니다. CCZ-CROSS 스킨도 여러번 사용되었습니다.
먼저 시작 부분을 찾습니다. 그리고 </s_index_article_rep> 이것만 찾으면 됩니다.
여기 있네요. 바로 위에 공간을 확보하고 첨부파일의 코드를 그대로 붙여넣기를 해주면 끝 입니다. 정리하자면 다음과 같습니다.
<s_article_rep>
<s_index_article_rep>
내용 중략...
여기에 코드를 입력!
</s_index_article_rep>
</s_article_rep>
이렇게 입력해 두시면 됩니다. 스크립트는 위에서 아래로 먼저 데이터를 불러와서 읽기 때문에 인덱스페이지가 끝나는 지점에 붙여넣기를 해야 합니다. 추가적으로 하나 더 말씀드리자면 위에도 나왔지만 제가 사용하고 있는 코드를 살펴보면 아래의 요소가 있습니다.
document.write("<hr style='padding: 0; margin: 0; height: 1px; border: 0 none; color: #f5f5f5; background-color: #f5f5f5;'>");
이건 CCZ-CROSS 스킨의 다음 영역에 해당하는 부분입니다.
보시면 엄청 얇고 옅게 들어간 희미한 회색 구분선이 보이실 겁니다. 인피드 광고를 넣으면 이 회색선과 목록 사이에 들어가기 때문에 구분선이 하나 빈 것처럼 보입니다. 그래서 임의로 저것과 비슷한 회색선이 생성되도록 넣어준게 바로 저 코드입니다. 혹시 모르니 이곳에도 업로드 해 두겠습니다.
이 코드를 (adsbygoogle = window.adsbygoogle || []).push({}); 다음에 입력하시면 됩니다.
이렇게 해서 인피드 광고를 생성하고, 티스토리의 인덱스 페이지에 넣는 방법에 대해 알아봤습니다. 조금 복잡하죠? 차근차근 한번 따라해 보세요. 그럼 모두들 성공하시기를 빕니다. 끝.
