지난 시간에 구글 애드센스의 광고단위 중 하나인 인피드 광고의 생성방법에 대하여 알아보았었습니다. 사실 광고단위의 광고를 생성하는 것은 그렇게 어렵지 않습니다. 생성한 광고를 어떤 방법으로 적용하느냐 하는 것은 방법에 따라 쉬울 수도 그렇지 않을 수도 있죠.
개인적으로는 네 가지 광고 단위 중 '인피드 광고' 적용하기가 가장 까다롭더군요. 인터넷 상의 여러 포스트와 카페 등을 참조하여 인피드 광고를 삽입하는 방법과 코드삽입 위치 등을 확인했지만, 정상반영이 되지 않아 한참을 헤맸었거든요. 여러 번의 시행착오를 거듭하다가 적정 위치에 코드를 삽입함으로써 현재는 인피드광고가 정상적으로 반영이 되는 중이죠. 여러분은 저와 같은 어려움을 겪지 마시기 바랍니다. 그럼 바로 출발할까요?
티스토리에 인피드 광고 게재하는 방법요약
◆ 절차를 요약하면 아래와 같습니다.
1. 구글 애스센스에서 '인피드 광고' 생성 후 광고코드 불러오기
2. 스크립트 파일 두 개 열기 및 저장 (스크립트1 (그대로 사용) / 스크립트2 (일부 수정 후 사용))
3. 티스토리 관리자 페이지에서 HTML 편집화면으로 이동
4. <head>와 </head>사이에 스크립트1 삽입
5. <s_article_rep>와 </s_article_rep> 사이의 </s_index_article_rep> 바로 위에 스크립트2 삽입 (해당 위치에 스크립트 2를 삽입해도 인피드 광고 생성 안되는 경우, 별도 조치 시행)
▼ 생성된 광고코드를 불러오기 위해서 생성된 광고단위 목록에서 우측의 도구창을 확인해주세요.
▼ '<>'는 기존 광고코드를 불러오는 아이콘입니다. 클릭해주세요.
▼ 광고코드(코드 스니펫)가 띄어졌습니다. 광고코드 중 실제로 필요한 부분은 data-ad-layout-key="★" data-ad-client="ca-pub-●" data-ad-slot="◆" 세 가지 입니다. 잘 기억해 두세요. 아래의 코드 스니펫을 복사하여 메모장에 붙여넣은 후 별도 저장해두셔도 좋습니다.
2. 두 개의 스크립트 파일 열어서 수정 및 저장
◆ 인피드 광고를 메인페이지 게시글 목록 등 피드에 삽입하려면 아래의 두 개의 스크립트 파일이 필요합니다. 스크립트 1은 그대로 사용하시면 되고 스크립트 2에는 애드센스의 인피드 광고코드에 있는 일부 내용을 포함시켜야 합니다.
1) 스크립트 1 : 아래의 파일을 다운로드 받으세요. 열어두셔도 되고 저장하셔도 좋습니다.
▼ 초기값인 HTML 코드를 선택하여 두 개의 스크립트 파일을 티스토리 html에 적용하러 가봅시다.
4. 스크립트 파일 1 삽입 (수정 불필요)
▼ <head> 와 </head> 사이에 스크립트 1을 삽입합니다. 저는 <head>태그 바로 아래에 삽입했습니다. 스크립트 1은 수정없이 그대로 붙여 넣으시면 됩니다.
5. 스크립트 파일 2 삽입 (편집된 스크립트 파일)
◆ 편집된 스크립트 2 파일을 삽입할 차례입니다. <s_article_rep>와 </s_article_rep>태그 사이의 </s_index_article_rep> 태그 바로 위에 삽입하면 됩니다.
◆ </s_index_article_rep>태그는 스킨마다 한 개인 경우도 있지만, 그 이상인 경우도 있습니다. 한 개인 경우에는 해당 태그가 <s_article_rep>와 </s_article_rep> 사이에 위치하기 때문에 </s_index_article_rep>을 한 번만 검색해도 되지만, </s_index_article_rep>태그가 여러 개일 경우에는 <s_article_rep>와 </s_article_rep>사이에 위치하는 </s_index_article_rep>태그를 찾아줘야 합니다.
▼ 그럼, 먼저 </s_index_article_rep>태그를 검색해보겠습니다. (검색결과를 여러 번 확인하는 방법을 잘 모르시겠다면 위의 포스팅을 들렀다 와주세요.) 검색결과가 4건이 확인되는군요.
▼ 이번에는 <s_article_rep>태그의 위치를 확인해봅시다. 1035번 행에 위치해 있습니다.
▼ 다음으로 </s_article_rep> 태그의 위치는 1301번 행이군요. 이제 우리가 해야할 일은 1035번 행과 1301번 행 사이에 있는 </s_index_article_rep>태그를 찾는 것입니다.
▼ 다행히도 1066번 행에 </s_index_article_rep>태그가 위치해 있습니다. </s_index_article_rep>태그 바로 위에, 그러니까 </div> 태그와 </s_index_article_rep>태그의 사이에 '스크립트 2'를 붙여넣기 하면 됩니다.
▼ 이렇게 말이죠.
▼ 스크립트 두 가지가 모두 입력되었다면 적용버튼을 눌러서 마무리 합니다.
6. 적정한 위치에 광고게재되는지 확인하기
▼ 변경 전의 제 블로그 게시글 목록 모습입니다. 광고는 아직 없군요.
▼ 적절하게 반영이 잘 되었다면 아래와 같이 게시글 목록 피드 사이에 광고가 생성된 것을 확인할 수 있습니다. 성공!
7. 광고의 인피드 위치 변경하기 (InfeedCount 명령어 해석)
◆ 스크립트 2의 InfeedCount 명령어가 광고의 갯수 및 첫 광고 위치를 선정하는 중요한 요소가 됩니다. 명령어 'InfeedCount % 3 == 1' 에서 숫자 '3'은 '게시물 수', '1'은 '첫 광고가 게시될 위치'를 의미합니다. 예를 들어, 제 블로그 메인페이지의 게시글 목록의 수는 12개인데, 앞의 숫자'3'으로 인하여 게시글 3개마다 광고가 하나씩 따라붙게 됩니다. 만약 광고를 게시물 4개마다 하나씩 하고싶다면 숫자'3'을 숫자 '4'로 변경만 하면 되는거죠. (즉, 'InfeedCount % 4 == 1' )
◆ 뒤의 숫자1은 첫 광고가 생성되는 위치를 지정해 주는데, 첫 번째 광고의 위치를 변경하고 싶으신 경우 [0~'좌측숫자-1']만큼 한 숫자를 기재하시면 됩니다. ( 'InfeedCount % 3 == 1' 인 경우, 우측의 숫자는 0, 1, 2까지만 적용가능) 만약 좌측의 숫자를 우측 숫자와 동일한 숫자로 기재하게 되면 광고가 보이지 않게되므로 주의하시기 바랍니다. (즉, 'InfeedCount % 3 == 3', 'InfeedCount % 4 == 4' 와 같이 적용되면 광고가 게재 안됨)
▼그럼 InfeedCount 명령어의 우측 숫자를 다르게 했을 때의 결과를 하나씩 확인해 보겠습니다. 'InfeedCount % 3 == 1'에서 '1'에 해당하는 숫자입니다.
▼ 위와 같이 'InfeedCount % 3 == 1'으로 코딩을 했을 때 게시글이 12개인 경우, 광고는 아래와 같이 배치됩니다.
▼ 실제 적용된 화면을 보시죠. 게시물 3개마다 광고가 하나씩 생성됩니다.
▼ 이번에는 'InfeedCount % 3 == 0' 으로 적용해보겠습니다.
▼ 그럼 광고는 아래와 같은 형태로 구성됩니다.
▼ 실제 적용된 예시입니다. 위에서부터 네 번째 피드부터 광고가 시작되는군요.
▼ 그럼 'InfeedCount % 3 == 2' 으로 적용해보겠습니다.
▼ 광고의 형태는 아래와 같구요.
▼ 실제 적용예시도 위와 같은 형태로 나타납니다.
▼ 만약 'InfeedCount % 3 == 3' 으로 적용하면 어떻게 될까요? 그럼 광고가 아래 화면처럼 광고가 게재되지 않는답니다.
8. 광고가 정상적으로 열리지 않을 때 조치하기
◆ 스크립트 두 개를 위의 방법대로 위치시켰는데 광고게재가 안되거나 광고의 위치가 부적정하다면 어떻게 해아할까요? 사실 제가 그런 현상을 겪었거든요. 해결하는데 한참 걸렸습니다. 간단하게 조치가 가능하니까요, 저와 같은 증상이 있으시다면 적용해보세요.
▼ <s_article_rep>와 </s_article_rep>태그 사이의 </s_index_article_rep> 태그 바로 위에 스크립트 2를 삽입하면 된다고 말씀드렸었죠. 제 블로그에 그대로 적용시켜보겠습니다.
▼ 12개의 게시물이 끝나는 지점에 광고가 네 개가 생성이 되어 있더군요. 광고가 네 개가 생성이 되었다는 것은 스크립트 1 및 스크립트 2의 코딩이 잘못되었다는 건 아니라는 뜻이기도 합니다. 특히 스크립트 2의 'InfeedCount % 3 == 1' 부분을 살펴보면, 제 블로그 메인페이지 게시물 수가 12개인데, 앞의 숫자'3'으로 인하여 게시글 3개마다 광고가 하나씩 따라붙게 되므로 광고는 4개가 만들어지는게 맞는 것이거든요. 그럼 해결방안은 스크립트 2의 위치를 변경시키는 것이겠네요.
▼ <s_article_rep>와 </s_article_rep>태그 사이의 </s_index_article_rep> 태그 바로 위보다 한단계 위인 </div> 바로위에 스크립트 2를 삽입해봤습니다.
▼ 그랬더니, 아래와 같이 제가 원하는 위치에 광고가 게재되더군요. 만약, 이 부분에 스크립트 2를 적용해도 광고가 게재되지 않았다면 위치를 한 단계씩 변경해보시기 바랍니다. 그래도 안되실 경우에는 다음 시간에 알려드릴 '인피드광고를 최상단 한칸에만 위치히키는 방법'을 참조하세요.
마치며...
인피드 광고는 한 번 게재되면 특별히 손 볼 일이 없는 광고입니다. 저처럼 블로그를 소소하게 운영하는 사람에게는 미미한 수익을 가져다 주지만, 블로그를 훌륭하게 운영해 나가시는 분들은 메인페이지 접속량이 많기 때문에 인피드 광고가 빛을 발할 수 있는 것이죠. 저도 언젠가는 인피드 광고의 덕을 볼 날이 있으리라 기대하며 오늘도 포스팅을 이어갑니다. 그럼 또 만나요!
