내 애드센스 페이지에서 애드센스를 성공적으로 활용하는 데 도움이 될 계정 관련 맞춤 정보를 확인하세요.

광고 단위

반응형 멀티플렉스 광고 단위를 맞춤설정하는 방법

참고: 이 옵션은 지원 중단되었습니다. 여전히 이러한 옵션을 사용하여 멀티플렉스 광고를 맞춤설정할 수는 있지만, 모든 환경에서 계속 작동하리라 보장하기는 어렵습니다.

반응형 멀티플렉스 광고 단위에 적용하려는 특정 요건이 있는 경우 광고 코드에 매개변수를 추가하여 표시 방식을 맞춤설정할 수 있습니다. 이 매개변수를 사용하면 멀티플렉스 광고 단위의 레이아웃을 변경하고 광고 단위 내에서 추천 행과 열을 정렬하는 방식을 지정할 수 있습니다.

매개변수를 사용하여 모바일과 데스크톱에 서로 다른 설정을 적용할 수도 있습니다. 예를 들어 레이아웃 매개변수에 단일 값을 지정하면 멀티플렉스 광고 단위는 모바일과 데스크톱에서 같은 레이아웃을 사용하게 됩니다. 반면에 레이아웃 매개변수에 두 개의 값을 지정하면 멀티플렉스 광고 단위는 모바일에서 하나의 레이아웃(첫 번째 값)을 사용하고 데스크톱에서 다른 레이아웃(두 번째 값)을 사용하게 됩니다.

이 옵션은 반응형 멀티플렉스 광고 단위에만 사용할 수 있으며 맞춤설정을 적용하려면 모든 매개변수가 필요합니다. 광고 코드를 수정한 후에는 다양한 기기 및 화면에서 멀티플렉스 광고 단위를 테스트하여 제대로 작동하는지 확인해 보세요.

참고: 이 도움말에 설명된 예는 애드센스 광고 코드에서 허용되는 변경사항입니다. 멀티플렉스 광고 코드를 아래와 같이 허용되는 방식으로 수정하는 것은 애드센스 프로그램 정책에 위배되지 않습니다.
모두 펼치기  모두 접기

멀티플렉스 광고 단위의 레이아웃 변경

레이아웃 매개변수(data-matched-content-ui-type)를 사용하면 멀티플렉스 광고 단위의 텍스트 및 이미지 정렬을 설정할 수 있습니다. 예를 들어, 이미지와 텍스트를 나란히 표시하거나 이미지를 텍스트 위에 표시하는 등 정렬 방식을 선택할 수 있습니다.

사용할 수 있는 레이아웃 옵션은 다음과 같습니다.

이미지와 텍스트 나란히 표시

이 레이아웃에서는 이미지와 텍스트가 나란히 표시됩니다. 이 레이아웃을 선택하려면 광고 코드에 data-matched-content-ui-type="image_sidebyside" 매개변수를 추가하세요.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     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>

Example of ads with mages and text side by side layout.

카드와 함께 이미지 및 텍스트 나란히 표시

이 레이아웃에서는 카드 안에 이미지와 텍스트가 나란히 표시됩니다. 이 레이아웃을 선택하려면 광고 코드에 data-matched-content-ui-type="image_card_sidebyside" 매개변수를 추가하세요.

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

Example of an ad with Image and text side-by-side with card layout.

텍스트 위에 이미지 표시

이 레이아웃에서는 이미지와 텍스트가 위아래로 나란히 표시됩니다. 이 레이아웃을 선택하려면 광고 코드에 data-matched-content-ui-type="image_stacked" 매개변수를 추가하세요.

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

Example of ads with images stacked above text layout.

카드와 함께 텍스트 위에 이미지 표시

이 레이아웃에서는 이미지와 텍스트가 카드 안에 위아래로 나란히 표시됩니다. 이 레이아웃을 선택하려면 광고 코드에 data-matched-content-ui-type="image_card_stacked" 매개변수를 추가하세요.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     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>

Example of ads with images stacked above text with card layout.

텍스트만 표시

이미지가 없는 텍스트형 레이아웃입니다. 이 레이아웃을 선택하려면 광고 코드에 data-matched-content-ui-type="text" 매개변수를 추가하세요.

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

Example of a text-only ad layout.

카드와 함께 텍스트 표시

카드 내 텍스트형 레이아웃입니다. 이 레이아웃을 선택하려면 광고 코드에 data-matched-content-ui-type="text_card" 매개변수를 추가하세요.

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

Example of text with card ad layout.

멀티플렉스 광고 단위에서 행 및 열 수 지정하기

멀티플렉스 광고 단위 내 광고는 그리드로 정렬됩니다. 그리드에 표시하려는 행과 열의 수를 지정할 수 있습니다. 예를 들어 멀티플렉스 광고 단위를 2x2 정사각형, 4x1 열 등으로 설정할 수 있습니다.

행의 수는 data-matched-content-rows-num 매개변수를 사용해서 설정하고 열의 수는 data-matched-content-columns-num 매개변수를 사용해서 설정합니다. 두 매개변수와 data-matched-content-ui-type을 함께 설정해야 합니다.

참고:
  • 설정할 수 있는 행과 열의 수와 관련해 몇 가지 제한사항이 있습니다. 멀티플렉스 광고 단위의 총 광고 수는 1~30 사이여야 합니다. 광고를 1개 미만 또는 30개 이상으로 제한하려고 하면 멀티플렉스 광고 단위가 공백으로 표시됩니다.
  • 때로는 지정한 행 또는 열의 정확한 개수가 표시되지 않을 수 있습니다. 예를 들어 많은 수의 열을 설정했지만 멀티플렉스 광고 단위의 폭이 열을 모두 표시하기에 좁은 경우입니다. 이 경우 광고가 정해진 공간에 맞게 표시되도록 행 또는 열 수를 조정하여 우수한 사용자 환경을 제공합니다.

행과 열의 예

4x1(모바일 및 데스크톱)

이 코드 예에서는 4개의 행과 1개의 열로 총 4개의 광고를 표시하는 멀티플렉스 광고 단위를 생성하는 방법을 보여줍니다.

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

Example of image and text arranged one on top of the other in Ad Sense.

2x2(모바일 및 데스크톱)

이 코드 예에서는 2개의 행과 2개의 열로 총 4개의 광고를 표시하는 멀티플렉스 광고 단위를 생성하는 방법을 보여줍니다.

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

Multiplex ad unit in Ad Sense with two rows and two columns that shows a total of four ads.

3x3(모바일 및 데스크톱)

이 코드 예에서는 3개의 행과 3개의 열로 총 9개의 광고를 표시하는 멀티플렉스 광고 단위를 생성하는 방법을 보여줍니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

A Multiplex ad unit in Ad Sense with three rows and three columns that shows a total of nine ads.

반응형 사이트용 4x1(모바일) 및 2x2(데스크톱)

다음 예제 코드는 모바일에서 4x1 그리드와 데스크톱에서 2x2 그리드로 멀티플렉스 광고 단위를 생성하는 방법을 보여 줍니다. 반응형 사이트의 경우 이 설정을 사용하는 것이 좋습니다.

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

Example of image and text arranged one on top of the other in Ad Sense.

Multiplex ad unit in Ad Sense with two rows and two columns that shows a total of four ads.

문제 해결

멀티플렉스 광고 단위를 맞춤설정한 후에 예상한 대로 표시되지 않을 수도 있습니다. 다음은 멀티플렉스 광고 단위와 관련된 일반적인 문제와 해결 방법입니다.

멀티플렉스 광고 단위가 비어 있음

이 문제는 다음과 같은 두 가지 원인 때문에 발생할 수 있습니다.

  • 멀티플렉스 광고 단위의 총 광고 수가 1개 미만이거나 30개 이상입니다. 총 광고 수가 한도를 초과하지 않도록 멀티플렉스 광고 단위에서 행 또는 열 수를 변경해야 합니다.
  • 멀티플렉스 광고 단위의 폭이 너무 넓어서 설정한 광고 수에 맞지 않습니다. 이 경우 멀티플렉스 광고 단위의 폭을 줄여야 합니다.
멀티플렉스 광고 단위에 광고가 예상보다 적게 표시됨
이 문제는 지정한 광고 수를 정확하게 표시할 수 있는 공간이 부족할 때 발생할 수 있습니다. 예를 들어 많은 수의 광고를 설정했는데 멀티플렉스 광고 단위가 폭이 너무 좁거나 작은 화면에 표시되고 있는 경우입니다. 이 경우 정해진 공간에 맞춰 행 또는 열의 수가 조정됩니다. 멀티플렉스 광고 단위의 폭을 변경하거나 모바일과 데스크톱의 행과 열의 수를 다르게 설정해 보세요.
광고에 텍스트만 표시됨
멀티플렉스 광고 단위가 설정한 광고 수에 비해 폭이 너무 좁은 경우 이 메시지가 표시될 수 있습니다. 이 경우 멀티플렉스 광고 단위의 폭을 늘려야 합니다.

콘솔을 사용하여 멀티플렉스 광고 단위에서 오류 찾기

브라우저의 콘솔을 사용하여 멀티플렉스 광고 코드를 올바르게 수정했는지 확인할 수 있습니다. 예를 들어 콘솔을 통해 광고 코드에 필수 매개변수가 누락되었거나 매개변수에 잘못된 값이 포함된 경우를 확인할 수 있습니다.

Chrome을 사용하는 경우 다음 단계에 따라 DevTools Console에서 광고 코드를 테스트할 수 있습니다.

  1. 멀티플렉스 광고 단위가 포함된 페이지를 방문합니다.
  2. Ctrl+Shift+J(Windows 또는 Linux) 또는 Cmd+Opt+J(Mac)를 누릅니다.
  3. 콘솔 패널에서 오류 메시지를 확인합니다.
도움이 되었나요?
어떻게 하면 개선할 수 있을까요?

도움이 더 필요하신가요?

로그인하여 추가 지원 옵션으로 문제를 빠르게 해결하세요.

true
' data-mime-type=
내 애드센스 페이지

애드센스 페이지 소개: 애드센스로 성공을 거두기 위해 내 계정에서 맞춤 정보와 새로운 기회를 찾는 데 활용할 수 있는 새로운 리소스입니다.

검색
검색어 지우기
검색 닫기
Google 앱
기본 메뉴
도움말 센터 검색
false
false
true
157
false
false