안녕하세요! 온 세상의 정보를 전해드리는 호기심 대장입니다.
이번 시간에는 티스토리 블로그 목록 사이에 구글 애드센스 인피드 광고 넣는 방법에 대해서 알아보겠습니다. 기존에 애드센스 광고 승인을 받았다면, 추가로 블로그를 개설할 때 별로의 승인 절차 없이 간단한 방법으로 광고 게재가 가능했습니다. (과거형)
이 구글애드센스 광고 정책이 바뀐게 불과 1년도 되지 않았어요. 저는 티스토리블로그 운영한지 2년쯤 되어가기 때문에, 블로그를 진작에 여러개 추가할 수 있었는데 하지 않고 있었거든요. 하필이면 정책이 바뀐 후에 애드센스 사이트 추가를 위해 승인을 다시 받았습니다.
티스토리애드센스, 팁, 꿀팁, 구글광고, 블로그팁, 블로그꿀팁
구글 애드센스에 사이트 추가(블로그 추가)하는 방법과 티스토리 애드센스 승인에 관한 이야기는 다음 시간에 자세히 살펴보도록 하겠습니다. 기존에 운영하던 티스토리 블로그에는 구 스킨 (Square 스킨)을 사용하고 있어서 목록 사이에는 삽입된 애드센스 광고가 없습니다.
섬네일과 글 내용 미리 보기가 있는 목록을 사용하시는 분들이 목록의 글 사이사이에 인피드광고를 넣고 계시는 걸 자주 보게 되었어요. 티스토리블로그를 추가로 만들며 저도 같은 형태의 목록을 사용하게 되어서 이번에 인피드 광고를 한번 삽입해 봤습니다.
이렇게 목록의 글 사이사이에 인피드광고가 자연스럽게 어우러져 들어갑니다. 다양한 광고 형태가 있지만, 섬네일+글 내용 미리 보기 목록 형태와 가장 비슷한 인피드 광고를 가장 많이 사용하시는 것 같아요.
가끔 좀 어울리지 않는 다른 형태의 광고가 뜨기도 하지만, 대체로 잘 어울리는 위 화면과 같은 인피드 광고가 많이 뜹니다. 티스토리블로그 목록에 구글애드센스 인피드광고 넣는 방법에 대한 정보는 많았지만 생각보다 쉽지가 않아서 우여곡절을 좀 겪었습니다.
삽입된 광고가 목록 글의 사이사이 들어가는 것이 아니라, 글과 겹쳐서 나오는데 원인을 몰랐거든요. 답답해서 포기할 뻔했지만 다행히 하나하나 실험해 보고 해결했습니다. 자, 그럼 시작해볼게요! 우선 인피드광고 코드를 만들어야 삽입할 수 있겠죠?
구글 애드센스 Google AdSense > 광고 > 광고 단위 > 신규 광고 단위 만들기 > 인피드 광고를 클릭합니다.
인피드 광고 만드는 방법에는 Google 시스템에서 추천하는 스타일 확인 (권장) or 광고 스타일 직접 만들기 2가지가 있습니다. 권장하는 방법으로 선택 후 URL에 자신의 블로그 주소를 넣습니다.
Desktop, 모바일 선택을 할 수 있는데 저는 데스크톱으로 했습니다. 반응형이라 크게 상관은 없는데, 요즘엔 모바일 유입이 강세이니 모바일을 기준으로 하셔도 됩니다. 그리고 페이지 스캔하기를 클릭합니다.
잠시 기다리면 위와 같은 화면으로 넘어옵니다. <광고 미리보기> 콘텐츠 블록을 선택하면 해당 콘텐츠의 레이아웃 및 스타일에 기반한 광고가 생성됩니다. 이렇게 목록 사이에 광고가 어떻게 보이는지 미리 확인할 수 있습니다. 다음 페이지로 넘어가 볼게요.
원하는 스타일로 광고를 맞춤 설정 할 수 있는 옵션 창이 나옵니다. 설정 변경없이 그대로 사용하셔도 되지만 광고 단위 이름은 꼭 넣어야 저장이 됩니다. 알아보기 쉬운 편한 이름으로 입력하시면 되겠습니다.
아래에 나오는 옵션 (Font, 텍스트 묶기, 배경 색상, 경계선)은 필요한 경우에 수정하시면 되겠습니다. 저는 수정없이 기본값을 사용했습니다.
패딩은 인피드광고 상하좌우 공간 여백을 설정하는 것인데요. 처음에는 초기값으로 했다가, 아래쪽 여백은 20->0으로 수정했습니다. 인피드 광고 아래쪽에 공백이 너무 많아서 수정했는데, 이 부분은 사용하시는 스킨에 따라서 다를 거예요.
아래에 나오는 옵션 (이미지, 광고 제목, 내역, URL, 버튼)은 클릭해서 어떤 것인지 확인해 보고 필요한 경우에 수정하시면 되겠습니다. 마지막에 저장 및 코드 생성 클릭합니다.
자, 여기까지 하면 인피드광고 코드가 생성이 되었습니다.
data-ad-layout-key="■"
data-ad-client="ca-pub-★"
data-ad-slot="●"
여기서 필요한 부분은 초록색으로 가려진 ■, ★, ● 부분입니다. 코드 스니펫 복사를 클릭하여 메모장에 전체를 붙여넣고, 필요없는 부분을 삭제하시면 됩니다. 또는 초록색 박스 안에 부분만 복사(Ctrl+C)하여 메모장에 붙여넣기(Ctrl+V)하셔도 됩니다.
그 메모장은 잠시 그대로 열어두시고요. 목록 사이에 인피드 광고를 넣기 위해서는 html편집에서 2가지 코드를 2군데 각각 삽입해 줄 거예요. 1번, 2번 두개의 코드를 아래 첨부 파일에 넣어두겠습니다.
adsbygoogle.txt다운로드한 첨부 파일을 열어서 코드를 확인합니다. 1번 코드는 그대로 복사하여 사용하면 되고, 2번 코드는 약간만 수정해 주시면 됩니다. 코드 중간 ■, ★, ● 부분에 미리 메모장에 복사해둔 자신의 애드센스 코드를 복사해서 붙여넣어 주세요.
2번 코드 중 if ( InfeedCount % 3 == 0 ) 이 부분은 인피드 광고가 나오는 간격입니다. 목록 글 3개마다 1개씩 인피드 광고가 삽입됩니다. 더 띄엄띄엄 광고가 들어가길 원한다면 숫자 3을 수정해 주세요.
자, 여기까지하면 코드 2개가 완성되어, 다 준비되었습니다. 이제 넣는 위치만 잘 찾아서 삽입하면 끝이에요!
블로그 관리 홈 > 꾸미기 > 스킨 편집 > html편집 > HTML에서 1번 코드 위치 ▶ <head>와 </head> 사이에 삽입합니다. 상단에 바로 보이는 <head> 바로 아래 삽입하거나, 조금 더 내려가서 </head> 바로 위에 삽입하셔도 되겠습니다. 검색(찾기▶Ctrl+F)
그다음 2번 코드 위치 ▶ <s_index_article_rep>와 </s_index_article_rep> 사이입니다. 2번 코드의 위치가 스킨마다 조금 다를 수 있는데요. 기본적으로 </s_index_article_rep> 바로 위에 삽입해 주시면 됩니다.
찾기(Ctrl+F)로 </s_index_article_rep>를 검색하면 스킨에 따라서 여러 개가 나올 수 있습니다. 그래서 정확한 위치를 찾기 위해 <s_article_rep>로 검색하겠습니다.
<s_article_rep> 바로 아랫줄에 <s_index_article_rep>가 나오고, 아래로 좀 더 내려가 보면 </s_index_article_rep> 가 나옵니다. 복사한 2번 코드를 </s_index_article_rep> 바로 위에 붙여넣기 합니다. 또는 <s_index_article_rep> 아래에 삽입합니다.
※ 스킨 종류에 따라서 저처럼 인피드광고가 목록 위에 겹치게 나타날 수도 있는데요. 원인을 못 찾아서 한참 헤매다가 정말 포기할 뻔 했습니다.
2번 코드를 <s_index_article_rep>와 </s_index_article_rep> 사이 모든 줄에 다 넣어보면서 위치를 겨우 찾았습니다. 위 이미지처럼 </a>와 </div></s_index_article_rep> 사이에 넣었을 때 인피드광고가 목록과 겹치지 않고, 사이 사이에 제대로 보여졌습니다.
마지막엔 적용 누르시고, 스킨 보관도 꼭 하시길 바랍니다. 블로그 관리 홈 > 꾸미기 > 스킨 변경 > 사용중인 스킨 > 보관 하신 후, 스킨 목록 > 스킨 보관함에서 확인 가능합니다.
혹시 저처럼 구글애드센스 광고가 목록 사이사이에 들어가지 않고, 목록 위에 겹쳐지는 오류가 생기는 분들은 </s_index_article_rep> 위치 기점으로 위, 아래 적절한 위치를 찾아보시면 될 것 같습니다.
여기까지 티스토리 블로그 목록 사이에 구글 애드센스 인피드 광고 넣는 방법에 대해서 자세히 알아봤습니다.
읽어주셔서 감사합니다.
댓글