애드센스 일치하는 콘텐츠 광고 수정(맞춤설정)하는 방법

애드센스의 많은 광고 중 "일치하는 콘텐츠라고 하는" 광고 형태가 있습니다. 보통 본문 하단에 많이 삽입을 합니다. 기본적으로 모바일에서는 가장 맨 위에 큰 광고가, 그 아래로는 자신의 글 목록+광고가 조금 섞인 1열 형태로 나타나게 됩니다. 그리고 데스크탑에서는 4열 2행 형태로, 즉! 4 × 2 형태로 보여지게 됩니다. 이 부분을 사용자의 입맛에 따라 열과 행을, 그리고 레이아웃을 변경할 수 있습니다. 이 내용을 이해하기 위해서는 먼저 구글 도움말 센터의 반응형 일치하는 콘텐츠 단위를 맞춤설정 하는 방법이라는 문서를 한번 읽어 보시는 것을 추천 합니다. 본 내용은 이 도움말을 설명하는 식으로 구성되어 있습니다. 따라서 이 문서를 잘 보시고 그대로 응용하시면 됩니다.

 

순정 애드센스 일치하는 콘텐츠 코드에 새로운 매개변수 3개 추가

위의 도움말 링크로 들어가서 문서를 열람해 보시면 오리지널 일치하는 콘텐츠 광고에 새로운 매개변수 코드 3가지가 추가가 되었음을 확인하실 수 있습니다. 차이를 한번 살펴볼까요?

 

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

먼저 이것이 순정 일치하는 콘텐츠 코드 입니다. 오리지널이죠. 수정하지 않은 순수한 상태 입니다.

 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="xxxxxxxxx"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

다음은 새로운 매개변수 3종을 추가한 코드 입니다. 차이점이 보이시나요? 그렇습니다. 다음의 매개변수가 추가가 된 코드 입니다. 아래에 더 자세히 하나 하나 설명을 드리겠습니다.

 

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

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

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

여기서 주목해야 하는 부분은 노란색으로 표시된 부분 입니다.

 

레이아웃 매개변수(코드)

먼저 data-matched-content-ui-type="image_sidebyside" 매개변수는 광고의 레이아웃을 정의 합니다. 즉 큰 따옴표 안에 다른 명령어 코드를 넣으면 광고 스타일이 바뀐다는 것 입니다. 이미지 오른쪽에 텍스트가 들어가는 형태, 또는 이미지 아래에 텍스트가 들어가는 형태, 혹은 텍스트만 나오는 형태 이렇게 크게 세가지로 변경 가능 합니다.

 

도움말 문서를 그대로 캡쳐했습니다. 그리고 이렇게 세가지 색으로 구분지었습니다. 하나 하나 내용을 확인해 보시고 아래에 나타나는 미리보기 이미지를 살펴보시면 아실 겁니다. 정리하자면 다음과 같습니다.

 

설명(레이아웃)	매개변수	광고형태
이미지와 텍스트 나란히 표시	image_sidebyside	이미지 왼쪽 / 텍스트 오른쪽
카드와 함께 이미지 및 텍스트 나란히 표시	image_card_sidebyside
텍스트 위에 이미지 표시	image_stacked	이미지 위 / 텍스트 아래
카드와 함께 텍스트 위에 이미지 표시	image_card_stacked
텍스트만 표시	text	이미지 없음 / 텍스트
카드와 함께 텍스트 표시	text_card

그렇습니다. 이렇게 매개변수 코드를 활용하여 레이아웃을 사용자가 원하는 스타일로 변경 가능 합니다.

 

특히 카드와 함께라는 설명이 들어간 매개변수를 살펴보시면 card 라고 하는 추가 코드가 보일 겁니다. 위의 이미지에서 왼쪽은 카드가 없는 경우, 오른쪽이 카드가 있는 경우 입니다. 차이점이 보이시나요? 그렇습니다. 테두리의 유무라고 이해하시면 됩니다. card가 있을 때 약간 음영 테두리가 형성되어 있음을 살펴볼 수 있습니다.

 

행(rows)과 열(columns)에 대한 매개변수 반응형으로 만들기

일치하는 콘텐츠 광고는 행과 열이 있습니다. 기본 형태는 모바일에서는 8행, 데스크탑에서는 4열 2행 형태 입니다. 이것을 사용자 임의대로 변경 가능 합니다. 기본 형태는 이렇습니다.

 

행 : data-matched-content-rows-num="숫자"

열 : data-matched-content-columns-num="숫자"

즉 위의 매개변수를 일치하는 광고 코드에 추가하고 숫자만 입력하면 됩니다. 예를 들어서 data-matched-content-rows-num="4" 를, 그리고 data-matched-content-columns-num="2" 를 입력했다면 4행 2열의 기본 형태가 세팅 되는 것 입니다. 만약 4 × 3 형태의 일치하는 콘텐츠 광고를 만들고 싶다면 data-matched-content-columns-num="3" 으로 입력하면 될 겁니다.

 

그러나 이렇게 해두면 모바일에서도 4 × 3 형태로 나타나게 됩니다. 즉 우리는 반응형 스타일로 구현할 필요가 있습니다. 모바일에서 4열로 보면 완전 촘촘하게 보여질테니까요. 따라서 모바일에서는 1열 혹은 2열로 바꾸고 싶으실 겁니다. 그래서 반응형으로 만들때는 각 입력값을 두 번 넣으면 됩니다. 제 경우는 일치하는 콘텐츠 광고 코드를 이렇게 수정했습니다.

 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"
     data-matched-content-ui-type="image_stacked,image_stacked"
     data-matched-content-rows-num="4,2"
     data-matched-content-columns-num="2,4"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

어떻게 수정했는지 확인이 되시나요? 두 번씩 입력했다고 말씀 드렸다시피 보시는 것 처럼 각 매개변수에 입력해야 하는 값을 모두 두 번씩 마크업 했습니다. 첫번째는 모바일에서 출력하고자 하는 레이아웃이며, 두번째는 PC(데스크탑)에서의 레이아웃 형태를 의미합니다.

 

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

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

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

현재 이렇게 되어 있습니다. 즉 스마트폰(모바일)에서는 image_stacked (이미지 위 / 텍스트 아래) 형태의 4행 2열 광고가, PC(데스크탑)에서는 image_stacked (이미지 위 / 텍스트 아래) 형태의 2행 4열 광고가 나타나게끔 수정한 것 입니다.

 

친효스킨 스마트폰에서 본 일치하는 콘텐츠 광고

실제로 코드 수정 후 모바일에서의 레이아웃 모습 입니다. 보시는 것 처럼 이미지가 위고 아래에 텍스트가 있는 형태의 레이아웃이 정상적으로 출력되고 있는것을 확인할 수 있습니다. 또한 4행 2열 형태로 구성되었음을 확인 가능 합니다.

 

친효스킨 데스크탑에서 본 일치하는 콘텐츠 광고

PC에서도 마찬가지로 같은 레이아웃 형태의 광고로 정상적으로 노출이 되고 있음을 알 수 있으며, 2행 4열 형태로 이상 없이 출력되고 있음을 확인 할 수 있습니다.

 

코드 수정 시 주의사항

엄청나게 중요한 내용은 아닙니다. 기왕이면 반응형으로 수정하시는게 좋습니다. 또한 열과 행을 늘리면 안에 들어가는 광고 개수도 늘어나지 않을까 싶으실텐데요, 광고는 늘어나지 않습니다. 자신이 작성한 글 목록 개수만 늘어날 뿐 입니다. 그리고 반응형으로 수정할 때 반드시 두 번 입력한다는 것 꼭 잊지 마세요, 3가지 매개변수 중 어느 한개라도 하나만 입력하면 일치하는 콘텐츠 광고가 아예 나타나지 않습니다. 끝.