구글 블로그 글 목록에 애드센스 인피드 광고 달기 (심화편)

이전 포스트와 이어지는 내용이기 때문에 이전 포스트를 보지 않으신 분은 이해가 안될 수도 있다.

이전 포스트를 보지 않은 분은 아래의 링크를 먼저 확인하시길.

이전 포스트

구글 블로그 글 목록에 애드센스 인피드 광고 달기

구글 블로그 글 목록(피드)에 최적화된 애드센스 인피드 광고를 원하는 위치에 삽입하는 방법을 알려드립니다. 기존 유튜브 영상으로는 해결되지 않았던 HTML 편집 문제(Amalia 템플릿 기준)를 해결하고, 게시물 사이에 광고를 표시하는 조건문 코드를 공개합니다.

데스크톱과 모바일에서 각각 다른 광고가 표시되도록 하는 방법

인피드 광고가 반응형이라면 참 좋겠지만, 이전 포스트에도 설명했듯이 그렇게 안된다.

그래서 이미지가 상단에 위치한 모바일용 인피드 광고를 따로 만들고, 디자인을 본인 블로그에 맞게 설정하자.

왼쪽(모바일에서는 위)의 코드가 수정하기 전, 오른쪽(모바일에서는 아래)의 코드가 수정한 후의 코드다.

<b:if cond='data:blog.isMobileRequest == "true"'>
  <!-- 모바일용 인피드 광고 코드 -->
<b:else/>
  <!-- 데스크톱용 인피드 광고 코드 -->
</b:if>

이런 방식으로 수정하자.

두 광고를 다 불러온 후 CSS 미디어쿼리를 써서 화면의 크기에 따라 display:none을 사용해서 한 광고는 가려버리는 방법도 가능하다.

하지만 애드센스 정책에서는 '사용자에게 보이지 않더라도 광고 코드를 중복 삽입'하는 행위를 피하라고 안내한다.

이건 광고 밀집 위반 가능성이 있기 때문에 CSS 미디어쿼리를 쓰는 방식은 피하자.

구글 블로그에 복수의 인피드 광고를 다는 방법

이전 포스트에서는 글 목록에 하나의 인피드 광고만 다는 법을 알려주었는데, 한 페이지당 글 수가 많다면 2~3개를 달고 싶을 수도 있다.

(개인적으로 블로그 방문자가 불쾌함을 느끼지 않는 광고 수는 포스트 3개당 광고 하나가 적당하다고 생각한다. 너무 과하게 설정하지는 말자.)

1. or 연산자를 사용하는 방법

<b:if cond='data:i == 3 or data:i == 6'>
  <b:include data='post' name='inlineAd'/>
</b:if>

게시물의 순번(data:i)이 3이거나 6일 때 코드를 실행하려면 이렇게 작성한다.

2. 특정 간격으로 설정하는 방법 (예: 3의 배수)

<b:if cond='data:i % 3 == 0'>
  <b:include data='post' name='inlineAd'/>
</b:if>

만약 3, 6, 9, 12... 와 같이 특정 간격마다 코드를 실행하고 싶다면, %를 사용하여 설정할 수 있다.

data:i % 3 == 0은 data:i를 3으로 나눈 나머지가 0인지 (즉, 3의 배수인지) 확인한다.

3. 단, 첫 번째 글 위에는 광고를 표시하고 싶지 않을 때

<b:if cond='data:i % 3 == 0 and data:i != 0'>
  <b:include data='post' name='inlineAd'/>
</b:if>

이 조건은 인덱스 i가 0(즉, 첫 번째 게시물)일 때 광고가 삽입되는 것을 방지하기 위해 추가했다.

0을 3으로 나눠도 0이기 때문에, 첫 번째 게시물 위에 광고가 나오지 않게 하려면 이 조건을 넣는 것이 좋다.

글 목록에서 첫 번째 글부터 포스트가 아닌 광고가 있으면 역시 광고 투성이인 지저분한 블로그의 이미지를 줄 수 있기 때문에 2번 코드 대신 3번 코드를 쓰는 게 좋다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.