구글 애드센스 일치하는 콘텐츠 레이아웃 변경 방법

수많은 분들이 구글 애드센스 광고를 설치해서 사용하기를 바라고 사용을 하고 계실텐데요. 본인의 블로그나 사이트의 디자인(레이아웃)에 구조에 맞게 광고도 알맞게 설정을 해야 클릭율을 높이고 자연스러운 블로그를 만들수가 있을 것입니다. 

구글 애드센스에는 다양한 광고 디자인을 제공을 하는데요. 그중에서 일치하는 콘텐츠와 관련된 내용을 알아보고자 합니다. 기본적으로 일치하는 콘텐츠는 아래와 같은 이미지로 각각 PC와 모바일에서 출력이 되지만 기본적으로 제공하는 레이아웃을 사용하지 않고 다른 형태로 변경하여 사용할 수 있습니다. 바로 그 방법에 대해서 알아보겠습니다. 

PC에서 보이는 구글 애드센스 일치하는 콘텐츠의 출력 화면

모바일에서 보이는 구글 애드센스 일치하는 콘텐츠의 출력 화면

구글 애드센스 일치하는 콘텐츠 레이아웃 변경 방법

하지만 위와 같은 형태로 나오는 것을 바라지 않는 문들도 많이 있습니다. 예를 들면 PC에서 보일때 2줄이 아니라 3줄로 나온다거나 3X3형태로 나온다거나, 그리고 모바일에서도 저렇게 리스트 형태가 아니라 2개씩 4줄로(2X4) 나온다거나 하는 식으로 말이죠.

다른 광고는 조절이 불가능하지만 일치하는 콘텐츠에 대해서는 일부 소스코드 변경으로 인해서 조절이 가능하게 구글 애드센스에서 열어두었습니다. 

구글 애드센스 일치하는 콘텐츠 맞춤설정하는 방법

반응형 일치하는 콘텐츠 단위를 맞춤설정하는 방법 - AdSense 고객센터

 

구글 애드센스 일치하는 콘텐츠 레이아웃 변경

방법은 그렇게 어렵지 않습니다. 일부 소스코드를 해당 사이트에서 복사해서 본인의 광고 소스코드에 적용시켜주기만 하면 되는데요. 위 사이트에서는 다양한 내용을 설명을 해주지만 크게 3가지 형태가 존재합니다. 

1. 썸네일(좌) + 텍스트(우)
2. 썸네일 큰거 + 텍스트(하단)
3. 텍스트만 

위와 같은 3가지 형태가 존재합니다. 사이트에 들어가보면 "카드와 함께" 어쩌구저쩌구 나와있는건데요 위 3가지 형태에서 테두리가 생기느냐 안생기느냐의 차이이기 때문에 필요하신 분만 참고하시면 됩니다.

각각의 방법은 아래의 소스코드 중에 골라서 넣어주시면 변경이 됩니다. 

1. data-matched-content-ui-type="image_sidebyside"
2. data-matched-content-ui-type="image_stacked"
3. data-matched-content-ui-type="text"

썸네일(좌) + 텍스트(우)

출력이미지	소스코드
출력이미지1	변경하는 소스코드 (샘플)

썸네일 큰거 + 텍스트(하단)

출력이미지	소스코드
출력이미지 2	변경하는 소스코드(샘플)2

텍스트만

출력이미지	소스코드
출력이미지3	변경하는 소스코드(샘플)3

PC와 모바일을 다르게 출력해보자!!

마지막으로 모바일과 PC에서 보이는 출력 결과물이 다르게 보이게 할 수도 있습니다. 위의 소스코드를 보시면서 눈치를 채셨을수도 있는데요. 노란색으로 표시된 코드들 밑에 열과 행을 직접 지정해서 나타낼 수도 있습니다. 

더 많이 혹은 더 적게 출력하실수가 있는 것이지요. 이 방법 역시나 너무 간단합니다. 

data-matched-content-rows-num = "숫자"  << 세로길이
data-matched-content-columns-num = "숫자"  << 가로길이

아주 심플하쥬? 기본적인게 마음에 안드신다면 해당 레이아웃 조정기능을 활용하셔서 본인의 블로그와 어울리는 결과물을 만들어 보시면 좋을 것 같습니다. ^^