If you have specific requirements for your responsive Multiplex ad units, you can customize the way they look by adding parameters to your ad code. These parameters allow you to change things like the layout of your Multiplex ad units and specify how you'd like to arrange the rows and columns of ads within them.
You can also use the parameters to set different settings for mobile vs. desktop. For example, if you give the layout parameter a single value your Multiplex ad unit will have the same layout on mobile and desktop. Whereas if you give the layout parameter two values, then your Multiplex ad unit will have one layout on mobile (the first value) and a different layout on desktop (the second value).
Note that these options are only available for responsive Multiplex ad units and that all parameters are required for customizations to work. After you've modified your ad code, make sure you test your Multiplex ad units on different devices and screens to make sure that they're working correctly.
Change the layout of your Multiplex ad unit
The layout parameter (data-matched-content-ui-type) lets you control the arrangement of the text and images in your Multiplex ad units. For example, you can choose to have the image and text side by side, the image above the text, etc.
The following layout options are available:
In this layout, the image and text appear alongside each other. To choose this layout, add the data-matched-content-ui-type="image_sidebyside" parameter to your ad code.
<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>
In this layout, the image and text appear alongside each other within a card. To choose this layout, add the data-matched-content-ui-type="image_card_sidebyside" parameter to your ad code.
<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>
In this layout, the image and text are arranged one on top of the other. To choose this layout, add the data-matched-content-ui-type="image_stacked" parameter to your ad code.
<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>
In this layout, the image and text are arranged one on top of the other within a card. To choose this layout, add the data-matched-content-ui-type="image_card_stacked" parameter to your ad code.
<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>
A text-only layout with no image. To choose this layout, add the data-matched-content-ui-type="text" parameter to your ad code.
<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>
A text-only layout within a card. To choose this layout, add the data-matched-content-ui-type="text_card" parameter to your ad code.
<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>
Specify the number of rows and columns in your Multiplex ad unit
The ads inside a Multiplex ad unit are arranged in a grid. You can specify how many rows and columns you want to show within that grid. For example, you could set your Multiplex ad unit to be a 2x2 square, a 4x1 column, etc.
You set the number of rows with the data-matched-content-rows-num parameter and the number of columns with the data-matched-content-columns-num parameter. You must set both parameters and data-matched-content-ui-type together.
- There are some restrictions on the number of rows and columns you can set. The total number of ads in your Multiplex ad unit must be between 1 and 30. If you try to show less than 1 or more than 30 ads, then your Multiplex ad unit will appear blank.
- Sometimes we might not be able to show the exact number of rows and/or columns you've specified. For example, if you've set a large number of columns but your Multiplex ad unit isn't wide enough to fit them all. In this case, we'll adjust the number of rows and/or columns so that your ads fit well in the available space and provide a good user experience.
Row and column examples
This example code shows you how to generate a Multiplex ad unit with four rows and a single column that shows a total of four ads.
<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>
This example code shows you how to generate a Multiplex ad unit with two rows and two columns that shows a total of four ads.
<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>
This example code shows you how to generate a Multiplex ad unit with three rows and three columns that shows a total of nine ads.
<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>
This example code shows you how to generate a Multiplex ad unit with a 4x1 grid on mobile and 2x2 grid on desktop. You might want to use this setup if you have a responsive site.
<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>Troubleshooting
After you've customized your Multiplex ad unit, it's possible that it might not appear exactly as you expected. Here are some common issues with Multiplex ad units and how to fix them:
There are two reasons why this might happen:
- The total number of ads in your Multiplex ad unit is either less than 1 or more than 30. You should change the number of rows and/or columns in your Multiplex ad unit so that the total number of ads is within the limit.
- Your Multiplex ad unit is too wide for the number of ads you've set. In this case, you should try reducing the width of your Multiplex ad unit.
Using the console to find errors in your Multiplex ad units
You can use the console in your browser to check that you've correctly modified your Multiplex ad code. For example, the console can tell you if your ad code is missing a required parameter or if a parameter contains an invalid value.
If you're using Chrome, you can follow these steps to test your ad code in the DevTools Console:
- Visit the page with your Multiplex ad units.
- Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
- Check the Console panel for error messages.
