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
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.
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>
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>
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>
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>
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>
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>
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.
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>
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>
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>
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>
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:
There are two reasons why this might happen:
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.
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.
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:
In a world brimming with digital possibilities, inspiring young minds to express themselves through writing…
In today's fiercely competitive digital landscape, understanding why SEO is essential for business growth and…
Dive into the world of knowledge with "10 Free Online Courses from MIT"! Presented in…
Welcome to "10 ChatGPT Prompts to Create Your CV." Crafting a compelling CV is essential…
Welcome to our exploration of StellarWP, where we embark on a journey to elevate your…
Managing events on your WordPress website can be a juggling act. Juggling event details, promoting…
View Comments
The option with images doesn't work on site. I see in every case like textonly content... had noboby the same problem?
Ben,
It works with images too.. can find the screenshot in the post or you can visit the live link https://planforgermany.com/german-universities-can-apply-without-uni-assist/