콘텐츠로 건너뛰기

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

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

블로그&인터넷/기타

2018-08-05 01:21:54



INKman's Blog title 2

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

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


INKman's Blog matched 001

일치하는 광고 단위는 초기 설정시에 크기를 지정할 수 있지만 방응형으로 자동 적용되는 방식을 많이 적용하는듯한데요. 넓은 폭에서는 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’ 추가해 줌으로서 다양하지는 않지만 타입을 변경할 수 있습니다.


INKman's Blog image sidebyside
image_sidebyside

INKman's Blog image card sidebyside
image_card_sidebyside

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


INKman's Blog matched 004

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

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

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

2. 광고 수 조절하기 


INKman's Blog matched 002
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″ 열 ( 가로 )


INKman's Blog matched 003

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″ 와 같이 적용을 하면 모바일에서 4×1, PC에서 2×2로 환경에 맞게 노출할 수 있다고 되어 있는데 저는 무슨 문제인지 적용을 하면 아예 노출이 되지 않네요. ㅠ

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

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

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

#광고 #애드센스 #콘텐츠 #일치하는

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다