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

구글 애드센스의 광고 중에서 인피드 광고^{In-feed ads}라는 것이 있다.

블로그의 글 목록에서 글과 글 사이에 집어넣기에 최적화된 광고인데, 이번 포스트에서는 구글 블로그에 인피드 광고를 집어넣는 방법을 알아보겠다.

인피드 광고는 예전에 구글 블로그가 아닌, 요즘 문제가 많은 타사의 블로그에서 달았다가 없앤 적이 있었다.

이유는 그 블로그에서 간헐적으로 인피드 광고가 표시가 되지 않는 때가 있었는데, 그럴 때마다 그 페이지의 페이지네이션 버튼(다른 페이지로 이동하는 버튼)이 클릭이 되지 않는 현상이 일어났었기 때문이다.

그때가 2020년 1월이었으니까 나에게는 5년 8개월 만에 인피드 광고를 블로그에 다는 것이다.

그런데 예전에 운영했던 블로그가 구글 애드센스와 뭔가 충돌을 일으켰던 것인지, 여기 구글 블로그에서는 인피드 광고가 간헐적으로 표시되지 않는 일 자체가 없다.

어쨌든 페이지네이션 버튼이 먹통이 되는 일에 대한 걱정은 하지 않기로 하고, 구글 블로그에서는 어떤 방식으로 인피드 광고를 달 수 있는지 알아보자.

유튜브로 보는 구글 블로그에 애드센스 인피드 광고를 다는 방법

참고로 아래의 영상들은 (Amalia 템플릿을 사용하고 있는) 나에게는 효과가 없었다.

아래의 영상대로 따라 해서 인피드 광고가 성공적으로 설치되는 사람은 나의 글을 더 보지 않아도 된다.

이 영상을 따라 할 수 없었던 이유는 HTML 편집으로 들어가서 영상처럼 InFeed Ad 구간을 찾아도 Amalia 템플릿을 사용 중인 나에게는 그런 곳이 보이지 않았다.

이 영상은 그대로 따라 했더니 글 목록에서 모든 글의 상단에 광고가 뜨게 됐다.

한 페이지에 표시되는 글의 수가 7개라면 글 목록에 표시되는 광고도 7개가 됐다.

하지만 두 번째 영상에서 힌트를 얻고 결국 인피드 광고를 달 수 있게 됐다.

구글 블로그에 애드센스 인피드 광고를 다는 방법

구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.

그리고 [ctrl + F] 키를 누르고 코드 내에서 inlinead를 검색한다.

영상 속 내용과는 달리 이 부분의 코드는 수정할 필요 없다.

이 부분에 이렇게 코드를 추가해야 한다.

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

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

어느 부분에 코드가 들어가는지 잘 보고 추가하도록 하자.

<b:if cond='data:i == 3'>은 다음과 같은 역할을 한다.

• <b:if>: 구글 블로그 템플릿에서 사용하는 조건문이다.
• cond='...': 검사할 조건(condition)을 지정하는 속성이다.
• data:i: 현재 루프(반복문)에서 사용되는 인덱스(Index) 또는 카운터(Counter) 변수를 나타낸다. (일반적으로 게시물 목록을 반복할 때 게시물의 순번을 나타낸다.)
• == 3: data:i 변수의 값이 숫자 3과 같은지 비교하는 연산자다.

즉, 이 코드는 '현재 순번(i)이 3일 때만' 그 내부에 있는 코드를 실행하라는 조건문이다.

그런데 프로그래밍에서 숫자는 0부터 시작한다.

그러니 4번째 포스트의 위에서 광고가 표시되는 것이다.

그리고 이미지의 아랫부분에 추가된 코드는 본인 애드센스의 인피드 광고 코드를 넣으면 된다.

인피드 광고를 생성하는 과정은 긴 설명을 하지 않겠다.

일단 나는 데스크톱 화면을 기준으로 광고를 만들 거라서 '측면 이미지'를 선택했다.

인피드 광고 하나로 모바일 화면과 데스크톱 화면 모두 대응하는 반응형 광고가 만들어진다면 좋겠지만, 그렇게는 안된다.

Amalia 템플릿을 기준으로 데스크톱용 광고를 만들 때는 대략 이런 설정으로 만들면 된다.

색상에 대한 설정은 본인 블로그의 디자인에 맞게 알아서 설정하자.

이렇게 인피드 광고가 성공적으로 삽입됐다.

광고 이미지의 비율이 1:1과 1.91:1 밖에 없는 건 아쉽지만, 그래도 주변에 있는 포스트들과 나름 잘 어울린다.

블로그 글 목록의 CSS 코드를 수정해서 인피드 광고와 완전히 비슷하게 만들면 디자인도 통일되고 클릭율도 올라갈 수도 있겠지만, 그렇게까지는 하지 않겠다.

다음 포스트

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

구글 블로그에서 접속 환경(데스크톱/모바일)에 따라 다른 디자인의 인피드 광고를 표시하는 방법과, 복수의 인피드 광고를 원하는 위치(예: 3번째, 6번째 글 사이)에 삽입하는 조건문(or, %, and) 코드 활용법을 알려드립니다.

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

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