구글 애드센스 일치하는 콘텐츠 단위 레이아웃 변경하기(맞춤설정)

일치하는 콘텐츠 레이아웃 변경하기 썸네일



글·사진 | 미뇩사마



 구글 애드센스(Google Adsense) [일치하는 콘텐츠]의 레이아웃을 변경해 봤다. [일치하는 콘텐츠 단위 맞춤설정]이라는 업데이트가 뜬지는 꽤 됐다. 업데이트가 뜨자마자 레이아웃 변경을 시도했었는데 코드 설정이 잘못됐는지 제대로 적용이 되지 않아 그냥 미뤄두고 있던 상황이었다.





일치하는 콘텐츠 단위 레이아웃 종류



 구글 애드센스에서 제공하는 [일치하는 콘텐츠 레이아웃]에는 위(▲)와 같이 총 6가지가 있다. 레이아웃 말고도 일치하는 콘텐츠 단위의 행과 열의 수도 지정이 가능하다.



일치하는 콘텐츠 단위의 레이아웃


  1. 텍스트만 표시
  2. 카드와 함께 텍스트 표시
  3. 이미지와 텍스트를 나란히 표시
  4. 카드와 함께 이미지 및 텍스트를 나란히 표시
  5. 텍스트 위에 이미지 표시
  6. 카드와 함께 텍스트 위에 이미지 표시



 아래(▼) 구글 애드센스 홈페이지 링크로 들어가면 보다 자세한 정보를 확인할 수 있다. 각 레이아웃 별 예시 사진과 코드를 확인할 수 있으니 꼭 들어가 보시길.


"일치하는 콘텐츠 단위 맞춤설정하는 방법"





일치하는 콘텐츠 변경(데스크탑 페이지 하단)+ 일치하는 콘텐츠 레이아웃 변경(데스크탑 페이지 하단)


일치하는 콘텐츠 레이아웃 변경(데스크탑 페이지 사이드바)+ 일치하는 콘텐츠 레이아웃 변경(데스크탑 페이지 사이드바)


일치하는 콘텐츠 레이아웃 변경(모바일 페이지 하단)+ 일치하는 콘텐츠 레이아웃 변경(모바일 페이지 하단)



 위(▲) 캡처화면은 [일치하는 콘텐츠]의 레이아웃을 [카드와 함께 텍스트 위에 이미지 표시]로 적용 했을 때의 ①데스크탑 페이지 하단, ②데스크탑 페이지 사이드바, ③모바일 페이지 하단의 [일치하는 콘텐츠] 출력 모습이다. 카드 형태로 레이아웃이 변경됨으로써 보다 깔끔해진 느낌이다.





 적용방법은 아래(▼)와 같다. 내가 적용했던 [카드와 함께 텍스트 위에 이미지 표시] 레이아웃을 예시로 해서 작성되었으며, 다른 레이아웃으로의 변경을 원할 경우, 포스팅 중간에 걸어둔 링크(구글 애드센스 홈)를 통해 각 레이아웃별 코드 확인이 가능하다.



[카드와 함께 텍스트 위에 이미지 표시] 레이아웃 코드


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

<!-- pbad -->

<ins class="adsbygoogle"

     style="display:block"

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

     data-ad-slot="1234567890"

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

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

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

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

<script>

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

</script>



 위(▲) 코드에서 빨간색연두색으로 표시한 부분만 본인의 상황에 맞게 넣어주면 된다. 빨간색 부분의 경우, 기존에 사용 중이던 [일치하는 콘텐츠] 코드에서 확인이 가능하며 그 번호를 그대로 넣어주면 된다. 연두색은 출력되는 [일치하는 콘텐츠 단위]의 행과 열을 설정하는 부분으로 사용자가 원하는 대로 입력해주면 된다.(가로 세로 각각 몇 개의 콘텐츠를 보여줄 것인지를 말하는 것이다.)







댓글

Designed by JB FACTORY