친절한효자손 취미생활

애드센스의 많은 광고 중 "일치하는 콘텐츠라고 하는" 광고 형태가 있습니다. 보통 본문 하단에 많이 삽입을 합니다. 기본적으로 모바일에서는 가장 맨 위에 큰 광고가, 그 아래로는 자신의 글 목록+광고가 조금 섞인 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가지 매개변수 중 어느 한개라도 하나만 입력하면 일치하는 콘텐츠 광고가 아예 나타나지 않습니다. 끝.

당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 와 역시 친효님 설명은 최곱니다 ㅎㅎㅎㅎㅎ
    2020.07.22 09:57 신고
  2. 어렵지만 화이팅 감사합니당
    2020.07.22 21:31 신고
  3. 안녕하세요 혹시 스킨편집 html에서 최하단 애드센스쪽을 편집하는게 아닐까요???ㅠ
    적용이 안되서요 ㅠ
    2020.08.14 18:04 신고
    • 안녕하세요. 일치하는 콘텐츠 애드센스코드를 수정하는거에요. 최하단 아닙니다
      2020.08.14 18:32 신고
  4. 감사합니다ㅠㅠ바보같은 짓을 하고있었구용ㅠ
    2020.08.14 18:37 신고
  5. 안녕하세요 ㅎ
    글 항상 잘읽숩니다

    혹시 제가 광고게재중지가 되어서 ㅠㅠ무한트래픽으로
    제가 누른적은업는데 효자손님은 경험있으신가여???
    2020.09.06 20:35 신고
  6. 안녕하세요. 항상 좋은 내용 감사합니다.
    질문 하나만 하겠습니다.

    제가 포스팅 본문 글씨 전체를 드래그하여 글씨체를 수정하였는데, 10개정도의 글을
    같은 방식으로 수정하였습니다.

    근데 수정한 글들의 하단 반응형 광고랑 일치하는 콘트츠 광고가 일주일째 구현이 안되고있습니다.

    수정안한 글들은 문제없이 하단 반응형 광고, 일치하는 콘테츠가 잘나오고 있구요..

    -질문정리-
    포스팅 내용 전체 드래그하여 글씨체 수정
    수정한 글들의 하단 반응형광고, 일치하는 콘테츠 광고 안나옴.
    혹시 어떤문제인지 알고계실까요?
    2020.09.08 18:00 신고
    • 안녕하세요, 아니요. 잘 모르겠습니다. 글쓰기에서 폰트 수정을 해 본 적이 없어요.
      2020.09.08 18:36 신고
  7. 비밀댓글입니다
    2020.09.16 10:17
    • 안녕하세요. 잘 못 수정하셨습니다. <ins> 태그 안쪽으로 추가하셔야합니다.
      2020.09.16 17:52 신고
    • 감사합니다. 잘 되네요ㅎㅎ
      2020.09.16 20:28 신고