Blocs d'annonces

Comment personnaliser votre bloc responsif de type "Contenu correspondant"

Si vous avez des exigences particulières en ce qui concerne vos blocs responsifs de type "Contenu correspondant", 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 de type "Contenu correspondant" par exemple, et indiquer comment vous souhaitez disposer les lignes et les colonnes de recommandations dans ces blocs.

Ces paramètres permettent également 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, cette dernière sera identique pour votre bloc de type "Contenu correspondant" sur les mobiles et sur les ordinateurs. Par contre, si vous lui attribuez deux valeurs, votre bloc aura une certaine mise en page sur les mobiles (la première valeur) et une autre sur les ordinateurs (la deuxième valeur). Ces paramètres fonctionnent également avec les blocs de type "Contenu correspondant" compatibles avec le format AMP.

Notez que ces options ne sont disponibles que pour les blocs responsifs de type "Contenu correspondant". De plus, tous les paramètres sont obligatoires afin d'effectuer des personnalisations correctes. Une fois votre code d'annonce modifié, veillez à tester vos blocs de type "Contenu correspondant" sur différents appareils et écrans afin de vérifier qu'ils fonctionnent bien.

Remarque : Les exemples décrits dans cet article constituent des modifications acceptables du code d'annonce AdSense. Vous n'avez aucun risque d'enfreindre le règlement du programme AdSense si vous modifiez votre code associé au contenu correspondant en suivant ces procédures approuvées.

Modifier la mise en page de votre bloc de type "Contenu correspondant"

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 de type "Contenu correspondant". 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 :

Image et texte côte à côte

Dans cette mise en page, l'image et le texte s'affichent l'un à côté de l'autre. Pour choisir cette présentation, 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"></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 et texte côte à côte, dans un encadré

Dans cette mise en page, l'image et le texte s'affichent l'un à côté de l'autre, dans un encadré. Pour choisir cette présentation, 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"></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 superposée au texte

Dans cette mise en page, l'image et le texte sont placés l'un sur l'autre. Pour choisir cette présentation, 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"></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 superposée au texte, dans un encadré

Dans cette mise en page, l'image et le texte sont placés l'un sur l'autre, dans un encadré. Pour choisir cette présentation, 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"></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

Texte uniquement

Mise en page n'incluant que du texte, sans image. Pour choisir cette présentation, 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"></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

Texte dans un encadré

Mise en page de type texte uniquement, dans un encadré. Pour choisir cette présentation, 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"></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

Indiquer le nombre de lignes et de colonnes dans votre bloc de type "Contenu correspondant"

Les recommandations au sein d'un bloc de type "Contenu correspondant" sont disposées dans une grille. Vous pouvez préciser le nombre de lignes et de colonnes que vous souhaitez afficher dans cette grille. Par exemple, vous pouvez configurer votre bloc de type "Contenu correspondant" pour être un carré 2 x 2, une colonne 4 x 1, etc.

Vous définissez 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 le paramètre de mise en page data-matched-content-ui-type.

Remarques :
  • Il existe quelques restrictions quant au nombre de lignes et de colonnes que vous pouvez définir. Le nombre total de recommandations dans votre bloc de type "Contenu correspondant" doit être compris entre 1 et 30. Si vous essayez d'en afficher moins d'une ou plus de 30, votre bloc de type "Contenu correspondant" 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 de type "Contenu correspondant" 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 recommandations tiennent bien dans l'espace disponible et offrent une bonne expérience utilisateur.

Exemples de lignes et de colonnes

4 x 1 (mobiles et ordinateurs)

Cet exemple de code vous montre comment générer un bloc de type "Contenu correspondant" composé de quatre lignes et d'une seule colonne, soit un total de quatre recommandations.

<script async src="https://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

2 x 2 (mobiles et ordinateurs)

Cet exemple de code vous montre comment générer un bloc de type "Contenu correspondant" composé de deux lignes et de deux colonnes, soit un total de quatre recommandations.

<script async src="https://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

3 x 3 (mobiles et ordinateurs)

Cet exemple de code vous montre comment générer un bloc de type "Contenu correspondant" composé de trois lignes et de trois colonnes, soit un total de neuf recommandations.

<script async src="https://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

4 x 1 (mobiles) et 2 x 2 (ordinateurs) pour les sites responsifs

Cet exemple de code vous montre comment générer un bloc de type "Contenu correspondant" composé d'une grille 4 x 1 sur les mobiles et 2 x 2 sur les ordinateurs. Nous vous conseillons cette configuration si vous avez un site responsif.

<script async src="https://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, image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 grid

2x2 grid

Envoyer des commentaires

Nous aimerions beaucoup savoir ce que vous pensez de la personnalisation des blocs de type "Contenu correspondant". Dites-nous ce qui fonctionne bien et ce que nous pourrions améliorer, par le biais de ce formulaire de commentaires.

Dépannage

Une fois votre bloc de type "Contenu correspondant" personnalisé, il est possible qu'il ne s'affiche pas tout à fait comme prévu. Vous trouverez ci-dessous des problèmes courants concernant ces blocs. Nous vous expliquons également comment les corriger.

Votre bloc de type "Contenu correspondant" est vide

Cette situation peut se produire pour deux raisons :

  • Le nombre total de recommandations dans votre bloc de type "Contenu correspondant" est inférieur à 1 ou supérieur à 30. Modifiez le nombre de lignes et/ou de colonnes dans votre bloc afin que le nombre total de recommandations respecte les limites autorisées.
  • Votre bloc de type "Contenu correspondant" est trop large par rapport au nombre de recommandations que vous avez défini. Dans ce cas, essayez de réduire la largeur de votre bloc.

Votre bloc de type "Contenu correspondant" affiche moins de recommandations que prévu

Cette situation peut se produire lorsqu'il n'y a pas assez de place pour afficher le nombre exact de recommandations que vous avez spécifié. C'est le cas, par exemple, si vous avez défini un nombre important de recommandations, et que votre bloc de type "Contenu correspondant" n'est pas assez large ou qu'il est consulté sur un petit écran. Lorsque cela se produit, nous ajustons le nombre de lignes et/ou de colonnes afin que les recommandations tiennent le mieux possible dans l'espace disponible. Vous pouvez modifier la largeur de votre bloc, ou définir un nombre de lignes et de colonnes différent pour les mobiles et les ordinateurs.

Vos recommandations s'affichent au format texte uniquement

Cette situation peut se produire si votre bloc de type "Contenu correspondant" est trop étroit par rapport au nombre de recommandations que vous avez défini. Dans ce cas, essayez d'augmenter la largeur de votre bloc.

Trouver des erreurs dans vos blocs de type "Contenu correspondant" grâce à la console

La console de votre navigateur peut vous aider à vérifier que vous avez correctement modifié le code d'annonce de votre bloc de type "Contenu correspondant". 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 :

  1. Accédez à la page comportant vos blocs de type "Contenu correspondant".
  2. Appuyez sur Ctrl + Maj + J (Windows/Linux) ou Cmd + Alt + J (Mac).
  3. Vérifiez si le panneau de la console comporte des messages d'erreur.
Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?