애드센스 일치하는 콘텐츠 광고 레이아웃 설정하기

티스토리 블로그를 운영하면서 조건만 된다면 애드센스는 필수가 아닌가 하는데요. 광고 단위중 일치하는 광고의 디자인을 사용 환경에 맞추어 자유롭게 수정이 가능하더군요.

일치하는 단위를 게시하기 위해서는 별도의 요구 조건이 충족해야만 하지만 보조 블로그를 볼 때 일방문수 100명 정도를 넘기면 승인이 되는 것 같습니다.

일치하는 광고 단위는 초기 설정시에 크기를 지정할 수 있지만 방응형으로 자동 적용되는 방식을 많이 적용하는듯한데요. 넓은 폭에서는 8개가 나와도 큰 부담이 없는 반면 모바일 환경에서처럼 폭이 좁아지면 세로로 길게 나오기 때문에 방문자에게 많을 부담을 줄 수도 있는데 코드를 추가하여 광고 형태나 갯수를 임의수정할 수 있습니다. 수정과 관련된 내용은 광고 단위 설정에서 링크를 따라가면 상세 설정 방법을 확인할 수 있습니다. 

1. 광고 타입 변경하기

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

기본 형태 코드에 'data-matched-content-ui-type' 추가해 줌으로서 다양하지는 않지만 타입을 변경할 수 있습니다.

image_sidebysideimage_card_sidebyside

data-matched-content-ui-type="image_sidebyside" 코드를 추가해주면 문구가 오른쪽 측면으로 가게 되며 'card'를 추가하여 'image_card_sidebyside' 설정해주면 테두리가 생기게 됩니다.

data-matched-content-ui-type="image_stacked" 제목이 이미지 아래에 오는 스타일로 마찬가지로 card 옵션을 추가할 수 있습니다. 

data-matched-content-ui-type="text" 이미지 없이 텍스트만 노출

data-matched-content-ui-type="text_card" 카드형 텍스트 광고

2. 광고 수 조절하기 

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

기본 반응형 적용할시 2X4 노출이 되지만 data-matched-content-rows-num="2" data-matched-content-columns-num="2" 코드를 추가하여 2X2 형태로 레이아웃 변경이 가능합니다. 

data-matched-content-rows-num="2" 행 ( 세로 )

data-matched-content-columns-num="2" 열 ( 가로 )

2X2 로 적용하였지만 모바일 상에서 폭이 좁은 관계로 2X1 자동 조절되어 적용이 됩니다. 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="ca-pub-xxxxxxxxx"

     data-ad-slot="1234567890"

     data-matched-content-rows-num="4,2"

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

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

     data-ad-format="autorelaxed"></ins>

<script>

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

</script>

data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,2" 와 같이 적용을 하면 모바일에서 4x1, PC에서 2x2로 환경에 맞게 노출할 수 있다고 되어 있는데 저는 무슨 문제인지 적용을 하면 아예 노출이 되지 않네요. ㅠ

레이아웃 설정 변경을 위해서는 3가지 코드가 함께 들어가야 적용이 되는듯합니다.

https://support.google.com/adsense/answer/7533385? hl=ko

이전글 - 구글 애드센스 일치하는 콘텐츠 광고