If you have specific requirements for your responsive Matched content unit, you can customise the way they look by adding parameters to your ad code. These parameters allow you to change the layout of your Responsive Matched content unit and specify how you’d like to arrange the rows and columns of recommendations 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 Responsive Matched content unit will have the same layout on mobile and desktop. Whereas if you give the layout parameter two values, then your Matched content unit will have one layout on mobile (the first value) and a different layout on a desktop (the second value).

Note that these options are only available for responsive Matched content unit and that all parameters are required for customisation to work. After you’ve modified your ad code, make sure that you test your Matched content units on different devices and screens to make sure that they’re working correctly.

Please be assured that the examples described in this article are acceptable modifications of the AdSense ad code. You won’t violate the AdSense programme policies by modifying your Matched content code in these approved ways

Change the layout of your Responsive Matched content unit

The layout parameter (data-matched-content-ui-type) lets you control the arrangement of the text and images in your Matched content 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:

• Text only
• Text with card
• Image and text side by side
• Image and text side by side with card
• Image stacked above text
• Image stacked above text with card

Text only

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

Text with card

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

Image and text side by side

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

Image and text side by side with card

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

Image stacked above text

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

Image stacked above text with card

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

Specify the number of rows and columns in your Matched content unit

The recommendations inside a Matched content 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 Matched content unit to be a 2×2 square, a 4×1 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 together.

Note:

• There are some restrictions on the number of rows and columns you can set. The total number of recommendations in your Matched content unit must be between 1 and 30. If you try to show less than 1 or more than 30 recommendations, then your Matched content 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 Matched content 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 recommendations fit well in the available space and provide a good user experience.

Row and column examples

4×1 (mobile and desktop)

This example code shows you how to generate a Matched content unit with four rows and a single column that shows a total of four recommendations.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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 (mobile and desktop)

This example code shows you how to generate a Matched content unit with two rows and two columns that show a total of four recommendations.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxx"
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 (mobile and desktop)

This example code shows you how to generate a Matched content unit with three rows and three columns that shows a total of nine recommendations.

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

4×1 (mobile) and 2×2 (desktop) for responsive sites

This example code shows you how to generate a Matched content unit with a 4×1 grid on a mobile and 2×2 grid on a desktop. You might want to use this set-up if you have a responsive site.

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

Troubleshooting

After you’ve customised your Matched content unit, it’s possible that it might not appear exactly as you expected. Here are some common issues with Matched content units and how to fix them:

Your Responsive Matched content unit is blank

There are two reasons why this might happen:

• The total number of recommendations in your Matched content unit is either less than 1 or more than 30. You should change the number of rows and/or columns in your Matched content unit so that the total number of recommendations is within the limit.
• Your Matched content unit is too wide for the number of recommendations you’ve set. In this case, you should try reducing the width of your Matched content unit.

Your Responsive Matched content unit has fewer recommendations than you expected

This can happen when there’s not enough space to show the exact number of recommendations that you specified. For example, if you’ve set a large number of recommendations and your Matched content unit is either too narrow or it’s being viewed on a small screen. When this happens, we adjust the number of rows and/or columns to best fit the available space. You could consider changing the width of your matched content unit or setting different numbers of rows and columns for mobile vs. desktop.

Your recommendations are text only

You might see this if your Matched content unit is too narrow for the number of recommendations you’ve set. In this case, you should try increasing the width of your Matched content unit.

Using the console to find errors in your Matched content units

You can use the console in your browser to check that you’ve correctly modified your Matched content 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 Matched content units.
• Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
• Check the Console panel for error messages.

Read Also:

• Increase earning by using Matched content feature of Google AdSense
• Increase your Earning with new Page-level ads by Google AdSense
• Auto Ads: New type of Ad Format for Publishers by Google