Matched content

How to customize your responsive Matched content unit

If you have specific requirements for your responsive Matched content units, you can customize the way they look by adding parameters to your ad code. These parameters allow you to change the layout of your Matched content units 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 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 desktop (the second value).

Note that these options are only available for responsive Matched content units and that all parameters are required for customizations to work. After you've modified your ad code, make sure 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 program policies by modifying your Matched content code in these approved ways.

Change the layout of your 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:

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 layout

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 and text side by side with card layout

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 layout

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>

Image stacked above text with card layout

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-only layout

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>

Text with card layout

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 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 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

4x1 (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>

4x1 grid

2x2 (mobile and desktop)

This example code shows you how to generate a Matched content unit with two rows and two columns 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="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>

2x2 grid

3x3 (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>

3x3 grid

4x1 (mobile) and 2x2 (desktop) for responsive sites

This example code shows you how to generate a Matched content 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="//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>

4x1 grid

2x2 grid

Share your feedback

We'd love to hear your thoughts on customizing Matched content units. You can let us know what works for you and what could be improved via this feedback form.

Troubleshooting

After you've customized 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 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 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:

  1. Visit the page with your Matched content units.
  2. Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
  3. Check the Console panel for error messages.

 

Was this article helpful?
How can we improve it?