Si vous avez des exigences particulières en ce qui concerne vos blocs d'annonces multiplex responsifs, vous pouvez personnaliser leur apparence en ajoutant des paramètres à votre code d'annonce. Grâce à ces paramètres, vous pouvez modifier la mise en page de vos blocs d'annonces multiplex, par exemple, et indiquer comment vous souhaitez disposer les lignes et les colonnes d'annonces dans ces blocs.
Les paramètres permettent aussi de définir des configurations différentes pour les mobiles et les ordinateurs. Par exemple, si vous attribuez une valeur unique au paramètre de mise en page, la disposition des annonces sera identique pour votre bloc d'annonces multiplex sur mobile et sur ordinateur. En revanche, si vous lui attribuez deux valeurs, votre bloc aura une certaine mise en page sur mobile (la première valeur) et une autre sur ordinateur (la deuxième valeur).
Notez que ces options ne sont disponibles que pour les blocs d'annonces multiplex responsifs. De plus, pour que les personnalisations fonctionnent, tous les paramètres sont obligatoires. Une fois votre code d'annonce modifié, veillez à tester vos blocs d'annonces multiplex sur différents appareils et écrans afin de vérifier qu'ils fonctionnent bien.
Modifier la mise en page de votre bloc d'annonces multiplex
Le paramètre de mise en page (data-matched-content-ui-type) vous permet de contrôler la disposition du texte et des images dans vos blocs d'annonces multiplex. Par exemple, vous pouvez choisir d'avoir l'image et le texte côte à côte, l'image au-dessus du texte, etc.
Les options de mise en page suivantes sont disponibles :
Dans cette mise en page, l'image et le texte s'affichent l'un à côté de l'autre. Pour la choisir, ajoutez le paramètre data-matched-content-ui-type="image_sidebyside" à votre code d'annonce.
<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>
Dans cette mise en page, l'image et le texte s'affichent l'un à côté de l'autre, dans un encadré. Pour la choisir, ajoutez le paramètre data-matched-content-ui-type="image_card_sidebyside" à votre code d'annonce.
<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>
Dans cette mise en page, l'image et le texte sont placés l'un sur l'autre. Pour la choisir, ajoutez le paramètre data-matched-content-ui-type="image_stacked" à votre code d'annonce.
<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>
Dans cette mise en page, l'image et le texte sont placés l'un sur l'autre, dans un encadré. Pour la choisir, ajoutez le paramètre data-matched-content-ui-type="image_card_stacked" à votre code d'annonce.
<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>
Mise en page n'incluant que du texte, sans image. Pour la choisir, ajoutez le paramètre data-matched-content-ui-type="text" à votre code d'annonce.
<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>
Mise en page de type texte uniquement, dans un encadré. Pour la choisir, ajoutez le paramètre data-matched-content-ui-type="text_card" à votre code d'annonce.
<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>
Spécifier le nombre de lignes et de colonnes dans votre bloc d'annonces multiplex
Dans un bloc d'annonces multiplex, les annonces sont disposées sous forme de grille. Vous pouvez préciser le nombre de lignes et de colonnes que vous souhaitez afficher dans cette grille. Par exemple, vous pouvez afficher le bloc d'annonces multiplex sous forme d'un carré de 2 x 2, d'une colonne de 4 x 1, etc.
Vous pouvez définir le nombre de lignes avec le paramètre data-matched-content-rows-num et le nombre de colonnes avec le paramètre data-matched-content-columns-num. Vous devez configurer ces deux paramètres en même temps que data-matched-content-ui-type.
- Il existe quelques restrictions quant au nombre de lignes et de colonnes que vous pouvez définir. Votre bloc d'annonces multiplex doit contenir entre une et 30 annonces. Si vous essayez d'en afficher moins d'une ou plus de 30, le bloc reste vide.
- Parfois, nous ne pouvons pas afficher le nombre exact de lignes et/ou de colonnes que vous avez spécifié. C'est le cas, par exemple, si vous avez défini un nombre important de colonnes, mais que votre bloc d'annonces multiplex n'est pas assez large pour pouvoir les intégrer toutes. Dans ce cas, nous ajustons le nombre de lignes et/ou de colonnes afin que vos annonces tiennent bien dans l'espace disponible et offrent une bonne expérience utilisateur.
Exemples de lignes et de colonnes
Cet exemple de code vous montre comment générer un bloc d'annonces multiplex comportant quatre lignes et une colonne, et affichant quatre annonces au total.
<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>
Cet exemple de code vous montre comment générer un bloc d'annonces multiplex comportant deux lignes et deux colonnes, et affichant quatre annonces au total.
<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>
Cet exemple de code vous montre comment générer un bloc d'annonces multiplex comportant trois lignes et trois colonnes, et affichant neuf annonces au total.
<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>
Cet exemple de code vous montre comment générer un bloc d'annonces multiplex composé d'une grille 4 x 1 sur mobile et 2 x 2 sur ordinateur. Nous vous conseillons cette configuration si votre site est responsif.
<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>Dépannage
Il est possible que votre bloc d'annonces multiplex ne s'affiche pas comme prévu une fois que vous l'avez personnalisé. Voici quelques-uns des problèmes courants liés aux blocs d'annonces multiplex et comment y remédier :
Cette situation peut se produire pour deux raisons :
- Le bloc d'annonces multiplex comporte moins d'une annonce ou en compte plus de 30. Vous devez modifier le nombre de lignes et/ou de colonnes pour respecter les limites du nombre d'annonces dans le bloc.
- Le bloc d'annonces multiplex est trop large pour le nombre d'annonces que vous avez défini. Dans ce cas, essayez de réduire la largeur du bloc.
Identifier les erreurs dans vos blocs d'annonces multiplex à l'aide de la console
La console de votre navigateur peut vous aider à vérifier que vous avez correctement modifié le code d'annonce de votre bloc d'annonces multiplex. Par exemple, elle peut vous indiquer s'il manque un paramètre obligatoire dans votre code d'annonce ou si un paramètre contient une valeur incorrecte.
Dans Chrome, vous pouvez tester votre code d'annonce dans la console DevTools en procédant comme suit :
- Accédez à la page contenant vos blocs d'annonces multiplex.
- Appuyez sur Ctrl + Maj + J (Windows/Linux) ou Cmd + Alt + J (Mac).
- Vérifiez si le panneau de la console comporte des messages d'erreur.
