[애드센스] 티스토리 블로그에 인피드 광고 띄워보기

애드센스 유저 여러분 인피드 광고 유형에 대해서 알고 계셨나요? 저는 애드센스 최종 승인 받은지 얼마 안되서 며칠 전에야 알게되었습니다. 그후 이리 저리 테스트 좀 해보았습니다.

이번 글에서는 이피드 광고가 어떤 녀석인지, 그리고 티스토리 블로그에는 어떻게 적용할 수 있는지 살펴보고자 합니다. 

1. 우선, 인피드 광고는 어떻게 생긴 광고 유형인지 좀 살펴보겠습니다.

인피드 광고라는 녀석은 사이트와의 일체감을 확~ 높여주는 컨텐츠 광고라는데 말이죠... 

애드센스 사이트에서는 다음과 같이 설명하고 있습니다. 

"사이트의 기사 또는 제품 목록 내부에 자연스럽게 들어맞는 광고로 훌륭한 사용자 환경을 제공할 수 있습니다. "

과연 훌륭한 사용자 환경을 제공하는 광고의 형태는 어떤 모양일까요?

구글이 안내하는 샘플 몇 가지 가져와 봤습니다. 

    

어떠세요? 컨텐츠 같이 자연스럽게 보여지는 광고입니다. 흡사 콘텐츠 리스트에 들어가 있는 콘텐츠 같이 보여서 독자들의 광고 거부감을 좀 줄여주는 효과도 있을 것 같습니다. 문맥과 싱크로율이 높다면 흡사 콘텐츠의 일부로 느끼고 넘어갈 만하기도 하네요..

세련된 것 처럼 보이긴 하지만 콘텐츠 안에 포함되기엔 좀 부적당해 보이고 콘텐츠 목록 형태로 표현되기에 적당한 광고 형태 같습니다. 이런 이유로 티스토리에서 제공하는 광고 플러그인을 이용해서 광고를 추가하긴 좀 적당치 않습니다. 그래서 플러그인의 도움 없이 제가 HTML을 편집하여 광고를 추가 해봤습니다.  

이미 제 블로그의 다른 글 중에도 인피드 광고가 포함되어 있는데 혹시 발견하셨나요? 

바로 이렇게 인피드 광고가 지금도 보여지고 있습니다. 

카테고리 최근 글 목록 바로 아래에 유사한 형태의 인피드 광고를 생성하여 띄웠습니다.

광고의 제목과 내용 글꼴을 좀더 다듬으면 더 비슷해지겠지만 전 귀찮아서 .. ^^;;

이 처럼 인피드 광고는 목록이 표시되는 곳에 얹혀가는 느낌으로 작업이 되어야 효과가 큰 광고 유형입니다. 이런 이유로 제가 생각한 최적은 장소는 바로 글 목록 중에 표시 되는 것이죠... 글 몱록  페이지에서 세줄에 한번씩?  또는 한페이지에 두번 정도 적당히? 표시되면 어떨까 싶기도 한데요..

2. 티스토리에 인피드 광고 적용하는 방법을 살펴보도록 하겠습니다. 

제가 위에 적용한 인피드 광고는 omly 텍스트 형식의 인피드 광고 입니다. 이런 형태의 광고를 띄우시려면 먼저 광고단위를 생성해야 겠죠? 광고단위 생성에서 특별히 어려운 점은 없습니다. 리스트 형태와 비슷하게 보이도록 광고 형태를 커스터마이징 할 수 있는 옵션 항목이 많다 정도 생각하시면 될 것 같습니다.

다른 광고와 같은 방법으로 광고 단위 생성 후 광고 코드를 확인 해두시고,

먼저 '카테고리 다른 글 목록' 하단에 광고를 띄우기 위해 광고 코드를 어디에 넣어야 할 지 한번 살펴보겠습니다. 

제가 사용하는 반응형 기본 스킨에서 광고 코드 삽입 위치는 다음과 같습니다.

<div class="area_view"> 세션을 찾으시고 해당 세션 안에 광고 코드를 붙여넣기 하시면 됩니다.

여기서 인피드 광고는 '카테고리 글 목록'에 반드시 붙어 다녀야 하기 때운에 '<div> ... </div>' 세션 사이에 추가 하셔야 합니다.

그리고 두번 째, 제가 시도 했던 글 목록에 인피드 광고 삽입 방법 입니다. 

현재 블로그에서는 띄우지 않고 있습니다. 

왜냐면, 카테고리 글 목록 하단 광고와는 다르게 부작용이 좀 있습니다. 그래서 제가 사용하지 않고 봉인 해두었습니다. ^^;;

그래도 혹시 도전하셔서 더 멋지게 구현 해주실 분이 능력자 분들이 있으실 테니 제가 적용한 것 그리고 부작용에 대해 설명 드리겠습니다.

우선 광고 코드 삽입은 다음과 같은 방법으로 했습니다.

앗 커서가 같이 캡쳐 되어서 글씨가 잘 안보이긴 하지만 설명을 진행하도록 하겠습니다. ^^;;

먼저 코드가 광고 삽입될 위치는 <s_index_article_rep> 세션의 가장 마지막 부분 입니다. 바로 '<div class="detail_info"> ... </div>' 이후 입니다. 하지만 구글에서 알려준 광고 코드를 그대로 넣지 않고 약간 변형했습니다. 그대로 넣게 되면 목록에 콘텐츠 한 줄 표시될 때마다 광고고도 한줄 표시되어 광고가 겹겹이 띄워 지게 됩니다. ^^;;

그리하여 제가 원하는 위치에 광고를 1회만 표시하기 위해 반복 횟수를 확인하기 위한 변후 'intLoopCount'  만들었습니다. 그리고 광고를 표시하는 부분에 'intLoopCount'표시 하도록 조금 수정하여 적용하였습니다.

그럼 이렇게 추가한 코드의 결과물은 어떨까요? 같이 한번 보시죠..

어떤가요? 목록의 두번 째 항목이 삽입된 광고 입니다. 광고에서 이미지를 좀 줄이고 텍스트 부분 글꼴을 좀 조정하면 더 그럴싸해 보일 것 같습니다. 여기 까진 좀 성공적 인 것처럼 보입니다.

그러나... ㅜ.ㅜ

다음과 같은 부작용 사례가 있습니다. 

1) 광고의 높이에 따라 일광성이 저해 됩니다. 

좌측은 광고의 높이가 높고, 우측은 광고의 높이가 좀 낮습니다. 

보면 바로 차이가 나죠? 우측은 목록과 광고 사이의 간격이 넓어져서 조정이 안되는 문제가 있습니다.

목록의 구분선도 컨트롤이 안되고요. 그래서 첫 목록과 광고의 구분선이 두개가 표시 됩니다.

2) 원하는 순서에 광고를 넣을 수가 없습니다. (OTL)

코드와 표시되는 광고를 보시면 이상한 점을 찾으실 수 있으실 까요? 

이미지가 너무 작아 글씨가 잘 안보이는데 텍스트로 설명해 드리자면, 우측 코드상에 밑줄 친 코드는 다음과 같습니다.

  

     document.write(intLoopCount);

     if (intLoopCount == 2) (adsbygoogle = window.adsbygoogle || []).push({});

설명 드리면,

먼저 'intLoopCount' 를 출력 합니다. (좌측 광고에 보면 글 목록 앞에 숫자가 출력 되는데 바로 이 숫자 입니다.

그리고 출력되는 숫자 2 위치에 광고를 띄우도록 했습니다. 

이렇게 동작 안되지만 저의 코드의 의도는 그러했습니다.

자 아래를 보시면 1번 위에 광고가 띄워집니다....

네... 제가 의도한 위치에 광고를 띄우는 것이 안됩니다. 제 능력의 한계 입니다. 

요런 두 가지 이유로 글 목록에서 인피드 광고를 띄우는 것은 포기 했습니다. 

제가 웹 프로그램 그리고 자바 스크립트는 거의 까막눈 수준이라 다른 방식으로 접근하면 또 쉽게 문제를 해결 할 수 있을지 모르겠는데,

혹시 제 글을 보시는 분 중에 해결 가능한 방안이 있다면 같이 공유해보시죠.. ^^

인피드 광고를 가장 편하게 띄우는 방법은 역시, 티스토리 개발자 분들이 좀 힘좀 써주시는 것인데 말이죠 ^^

그 전까진 이렇게 직접 고쳐서 아쉬운대로 쓸 수 밖에 없겠네요.. ㅎㅎ

이상으로 제가 티스토리 인피드 광고를 넣으며 알게 된 것들을 정리해보았습니다.

크게 유익한 정보는 이니었던 것 같긴 하네요 ^^..

아무쪼록 모든 분들 애스센스 잘 활용하셔서 좋은 결과 얻으시길 바랍니다.