구글 애드센스 일치하는 콘텐츠 단위 레이아웃 변경하기(맞춤설정)
- 세상의 모든 IT/블로그 Tip
- 2018. 2. 23. 00:25
글·사진 | 미뇩사마
구글 애드센스(Google Adsense) [일치하는 콘텐츠]의 레이아웃을 변경해 봤다. [일치하는 콘텐츠 단위 맞춤설정]이라는 업데이트가 뜬지는 꽤 됐다. 업데이트가 뜨자마자 레이아웃 변경을 시도했었는데 코드 설정이 잘못됐는지 제대로 적용이 되지 않아 그냥 미뤄두고 있던 상황이었다.
구글 애드센스에서 제공하는 [일치하는 콘텐츠 레이아웃]에는 위(▲)와 같이 총 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>
위(▲) 코드에서 빨간색과 연두색으로 표시한 부분만 본인의 상황에 맞게 넣어주면 된다. 빨간색 부분의 경우, 기존에 사용 중이던 [일치하는 콘텐츠] 코드에서 확인이 가능하며 그 번호를 그대로 넣어주면 된다. 연두색은 출력되는 [일치하는 콘텐츠 단위]의 행과 열을 설정하는 부분으로 사용자가 원하는 대로 입력해주면 된다.(가로 세로 각각 몇 개의 콘텐츠를 보여줄 것인지를 말하는 것이다.)