반응형 멀티플렉스 광고 단위에 적용하려는 특정 요건이 있는 경우 광고 코드에 매개변수를 추가하여 표시 방식을 맞춤설정할 수 있습니다. 이 매개변수를 사용하면 멀티플렉스 광고 단위의 레이아웃을 변경하고 광고 단위 내에서 추천 행과 열을 정렬하는 방식을 지정할 수 있습니다.
매개변수를 사용하여 모바일과 데스크톱에 서로 다른 설정을 적용할 수도 있습니다. 예를 들어 레이아웃 매개변수에 단일 값을 지정하면 멀티플렉스 광고 단위는 모바일과 데스크톱에서 같은 레이아웃을 사용하게 됩니다. 반면에 레이아웃 매개변수에 두 개의 값을 지정하면 멀티플렉스 광고 단위는 모바일에서 하나의 레이아웃(첫 번째 값)을 사용하고 데스크톱에서 다른 레이아웃(두 번째 값)을 사용하게 됩니다.
이 옵션은 반응형 멀티플렉스 광고 단위에만 사용할 수 있으며 맞춤설정을 적용하려면 모든 매개변수가 필요합니다. 광고 코드를 수정한 후에는 다양한 기기 및 화면에서 멀티플렉스 광고 단위를 테스트하여 제대로 작동하는지 확인해 보세요.
멀티플렉스 광고 단위의 레이아웃 변경
레이아웃 매개변수(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>
이 레이아웃에서는 카드 안에 이미지와 텍스트가 나란히 표시됩니다. 이 레이아웃을 선택하려면 광고 코드에 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>
이 레이아웃에서는 이미지와 텍스트가 위아래로 나란히 표시됩니다. 이 레이아웃을 선택하려면 광고 코드에 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>
이 레이아웃에서는 이미지와 텍스트가 카드 안에 위아래로 나란히 표시됩니다. 이 레이아웃을 선택하려면 광고 코드에 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>
이미지가 없는 텍스트형 레이아웃입니다. 이 레이아웃을 선택하려면 광고 코드에 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>
카드 내 텍스트형 레이아웃입니다. 이 레이아웃을 선택하려면 광고 코드에 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>
멀티플렉스 광고 단위에서 행 및 열 수 지정하기
멀티플렉스 광고 단위 내 광고는 그리드로 정렬됩니다. 그리드에 표시하려는 행과 열의 수를 지정할 수 있습니다. 예를 들어 멀티플렉스 광고 단위를 2x2 정사각형, 4x1 열 등으로 설정할 수 있습니다.
행의 수는 data-matched-content-rows-num 매개변수를 사용해서 설정하고 열의 수는 data-matched-content-columns-num 매개변수를 사용해서 설정합니다. 두 매개변수와 data-matched-content-ui-type을 함께 설정해야 합니다.
- 설정할 수 있는 행과 열의 수와 관련해 몇 가지 제한사항이 있습니다. 멀티플렉스 광고 단위의 총 광고 수는 1~30 사이여야 합니다. 광고를 1개 미만 또는 30개 이상으로 제한하려고 하면 멀티플렉스 광고 단위가 공백으로 표시됩니다.
- 때로는 지정한 행 또는 열의 정확한 개수가 표시되지 않을 수 있습니다. 예를 들어 많은 수의 열을 설정했지만 멀티플렉스 광고 단위의 폭이 열을 모두 표시하기에 좁은 경우입니다. 이 경우 광고가 정해진 공간에 맞게 표시되도록 행 또는 열 수를 조정하여 우수한 사용자 환경을 제공합니다.
행과 열의 예
이 코드 예에서는 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>
이 코드 예에서는 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>
이 코드 예에서는 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>
다음 예제 코드는 모바일에서 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>문제 해결
멀티플렉스 광고 단위를 맞춤설정한 후에 예상한 대로 표시되지 않을 수도 있습니다. 다음은 멀티플렉스 광고 단위와 관련된 일반적인 문제와 해결 방법입니다.
이 문제는 다음과 같은 두 가지 원인 때문에 발생할 수 있습니다.
- 멀티플렉스 광고 단위의 총 광고 수가 1개 미만이거나 30개 이상입니다. 총 광고 수가 한도를 초과하지 않도록 멀티플렉스 광고 단위에서 행 또는 열 수를 변경해야 합니다.
- 멀티플렉스 광고 단위의 폭이 너무 넓어서 설정한 광고 수에 맞지 않습니다. 이 경우 멀티플렉스 광고 단위의 폭을 줄여야 합니다.
콘솔을 사용하여 멀티플렉스 광고 단위에서 오류 찾기
브라우저의 콘솔을 사용하여 멀티플렉스 광고 코드를 올바르게 수정했는지 확인할 수 있습니다. 예를 들어 콘솔을 통해 광고 코드에 필수 매개변수가 누락되었거나 매개변수에 잘못된 값이 포함된 경우를 확인할 수 있습니다.
Chrome을 사용하는 경우 다음 단계에 따라 DevTools Console에서 광고 코드를 테스트할 수 있습니다.
- 멀티플렉스 광고 단위가 포함된 페이지를 방문합니다.
- Ctrl+Shift+J(Windows 또는 Linux) 또는 Cmd+Opt+J(Mac)를 누릅니다.
- 콘솔 패널에서 오류 메시지를 확인합니다.
