애드센스 일치하는 콘텐츠 행열 개수 및 디자인 변경방법

애드센스 일치하는 콘텐츠 광고는 블로그 내부의 추천글과 광고를 적절히 조합하여 추천글을 보여주는 굉장히 좋은 기능입니다. 그런데 요즘 애드센스 일치하는 컨텐츠 광고가 최상단에는 거대한 광고, 그리고 최하단에는 설문조사 문구가 삽입되어 "저는 광고 입니다"라는 것처럼 보입니다. 원래 일치하는 콘텐츠가 광고인지 포스팅인지 알 수 없는게 매력인데 말이죠.

그래서 애드센스 일치하는 콘텐츠 행열을 직접 지정하는 방법과 디자인을 변경하는 방법을 작성합니다.

▲ 좌 : 적용전 기본 모습 /  우 : 행, 열 지정 후 모습

변경후가 꽤 깔끔하지 않은가요?

적용가이드

---

적용코드

data-matched-content-rows-num="5"

data-matched-content-columns-num="2"

data-matched-content-ui-type="image_card_stacked"

data-matched-content-rows-num : 행의 수 

data-matched-content-columns-num : 열의 수

data-matched-content-ui-type : 광고 스타일 (입력 가능 값은 아래 값 참고)

• image_stacked : 텍스트 위에 이미지 표시
• image_card_stacked : 텍스트 위에 이미지 표시 테두리 효과
• image_sidebyside : 이미지와 텍스트 나란히 표시
• image_card_sidebyside  : 이미지와 텍스트 나란히 표시 테두리 효과

위에 파라메터 값을 기존에 광고 코드에 삽입 하면 됩니다. 자신의 스킨에 맞게 data-matched-content-ui-type을 변경하여 자연스럽게 변경이 가능합니다. 단, 행열을 너무 크게 잡는 경우 광고 자체가 표시되지 않으니 컨텐츠가 총 10~20개 정도 사이에서 행열 값을 지정하는게 중요합니다.

적용 전

구글 애드센스 일반적인 일치하는 콘텐츠 광고 스크립트는 아래와 같습니다.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-xxxxxxxxxxxx"
     data-ad-slot="xxxxxxxx"
></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

적용 예시 (4행 3열 이미지 카드스택)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_card_stacked"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

▲ 좌 : PC보기 / 우 : 모바일 보기

모바일 보기 시에는 자동으로 2열로 보여집니다.

적용 예시 (6행 2열 이미지 카드 사이드 바이 사이드)

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="xxxxxxxxxxx"
     data-matched-content-rows-num="6"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_card_sidebyside"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

▲ 좌 : PC보기 / 우 : 모바일 보기

이미지와 텍스트가 나란히 보이고 모바일시에는 자동으로 1열 보여집니다.

일치하는 콘텐츠 행열을 변경하시고 싶으셨던 분들은 위와 같이 적용이 가능합니다. 기본 세팅에서 나오는 첫번째 커다란 광고와 마지막 설문조사 광고가 깔끔하게 삭제되고, 추천 컨텐츠만 보여주게 됩니다. 단 행열의 개수가 본인 블로그의 글보다 너무 많은 경우 일치하는 콘텐츠가 표시되지 않을 수 있으니 적당히 조절하시어 사용하기 바랍니다. 구글에서는 1~30개를 추천하고 있습니다.

보다 상세한 설명이 필요한 경우 아래 구글 애드센스 페이지를 참조하세요.

▶ 애드센스 공식 가이드 : https://support.google.com/adsense/answer/7533385?hl=ko