Blocs d'annonces

Comment modifier le code d'annonce responsive

Si le code d'annonce responsive ne répond pas à tous les besoins de votre site réactif, vous pouvez le modifier. Pour savoir comment effectuer ces modifications, suivez les exemples ci-dessous :

Important :

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 d'annonce responsive en suivant ces procédures approuvées.

Exemple de taille exacte de bloc d'annonces associée à une largeur d'écran spécifique

Cet exemple décrit comment modifier votre code responsif afin de définir des tailles spécifiques de bloc d'annonces pour trois plages de largeur d'écran (mobile, tablette et ordinateur). Aucune expérience préalable des requêtes média CSS ou de la modification du code d'annonce AdSense n'est requise pour suivre cet exemple.

Voici du code d'annonce responsive modifié qui définit les tailles exactes de bloc d'annonces par largeur d'écran suivantes :

  • Pour les largeurs d'écran jusqu'à 500 pixels : un bloc d'annonces de 320 x 100.
  • Pour les largeurs d'écran entre 500 et 799 pixels : un bloc d'annonces de 468 x 60.
  • Pour les largeurs d'écran d'au moins 800 pixels : un bloc d'annonces de 728 x 90.
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Pour adapter cet exemple de code à votre propre site, procédez comme suit :

  1. Créez un bloc d'annonces display dans votre compte AdSense en veillant à laisser l'option Responsive sélectionnée dans la section "Taille de l'annonce". Notez les informations suivantes figurant dans votre code d'annonce responsive :
    • ID de l'éditeur, par exemple, ca-pub-1234567891234567
    • ID du bloc d'annonces (data-ad-slot), par exemple, 1234567890
  2. Dans l'exemple de code :
    • Remplacez toutes les occurrences de example_responsive_1 par un nom unique (par exemple, Page_Accueil, page_couverture_123, etc.).
      Remarques :
      • Votre nom unique ne doit contenir que des lettres de l'alphabet latin (26 lettres non accentuées de a à z), des chiffres et des traits de soulignement. Le premier caractère doit être une lettre.
      • Vous devez utiliser un nom unique différent chaque fois que vous adaptez cet exemple de code.
    • Remplacez ca-pub-XXXXXXX11XXX9 par votre propre ID d'éditeur.
    • Remplacez 8XXXXX1 par votre propre ID de bloc d'annonces.
  3. Déterminez les tailles de votre bloc d'annonces en fonction de la largeur d'écran :
    • Si vous êtes satisfait des tailles existantes du bloc d'annonces dans l'exemple de code, vous n'avez aucune modification supplémentaire à faire.
    • Si vous voulez définir des tailles différentes du bloc d'annonces par largeur d'écran, veuillez, dans l'exemple de code :
      • remplacer 320px et 100px par la largeur et la hauteur souhaitées du bloc d'annonces pour des largeurs d'écran jusqu'à 500 pixels ;
      • remplacer 468px et 60px par la largeur et la hauteur souhaitées du bloc d'annonces pour des largeurs d'écran entre 500 et 799 pixels ;
      • remplacer 728px et 90px par la largeur et la hauteur souhaitées du bloc d'annonces pour des largeurs d'écran d'au moins 800 pixels.
  4. Copiez le code d'annonce modifié, puis collez-le dans le code HTML source de la page sur laquelle vous souhaitez diffuser les annonces.
    Remarque : Une fois que vous avez inséré votre code d'annonce, nous vous recommandons de tester vos annonces sur différents appareils et écrans pour vous assurer que le comportement responsif fonctionne correctement.

Exemples de fonctionnalités avancées du code d'annonce responsive

Si notre code d'annonce responsive ne répond pas à tous vos besoins, vous pouvez modifier votre code d'annonce de manière à définir une taille précise pour votre bloc d'annonces via CSS.

Remarque : Nous ne recommandons pas d'utiliser les fonctionnalités avancées, sauf si vous maîtrisez la modification de votre code d'annonce.

Définir une largeur extensible et une hauteur fixe

Vous pouvez modifier votre code d'annonce responsive de façon à spécifier une largeur extensible et une hauteur fixe via le code CSS. L'exemple suivant illustre ce type de modification :

Exemple de largeur extensible avec hauteur fixe
Cet exemple illustre la manière de modifier votre code d'annonce responsive pour spécifier une hauteur fixe de 90 pixels et une largeur variable comprise entre 400 pixels (minimum) et 970 pixels (maximum) :
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Définir une taille exacte en fonction d'une largeur spécifique d'écran

Vous pouvez modifier votre code d'annonce responsive de façon à spécifier une taille exacte via le code CSS. L'exemple suivant illustre ce type de modification :

Exemple de taille exacte associée à une largeur spécifique d'écran
Si vous connaissez la taille exacte que devra adopter votre bloc d'annonces responsives sur chaque appareil, vous pouvez la définir avec des requêtes média CSS3. L'exemple suivant montre comment modifier votre code d'annonce en utilisant des requêtes média CSS3 :
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Les règles @media appartiennent à la syntaxe CSS3, qui est compatible avec l'ensemble des navigateurs actuels. Si vous souhaitez que votre code soit compatible avec des versions de navigateur plus anciennes, du type Internet Explorer 7 ou version antérieure, nous vous recommandons de commencer par spécifier une taille par défaut. Ceci vous permet d'être sûr que l'annonce apparaîtra correctement, même en cas d'incompatibilité du navigateur avec les requêtes média. Notez également que les navigateurs ne sont pas officiellement compatibles avec l'utilisation de feuilles de style CSS externes pour la définition de la taille du code d'annonce.

Masquer un bloc d'annonces

Dans certains cas, en particulier sur les appareils mobiles de petite taille, vous pouvez choisir de ne pas diffuser d'annonces du tout. Pour masquer un bloc d'annonces, vous devez définir un paramètre relatif aux requêtes média CSS, de sorte qu'aucune demande d'annonce ne soit effectuée et qu'aucune annonce ne soit diffusée. L'exemple suivant illustre ce type de modification :

Masquer des annonces pour des tailles d'écran spécifiques
La technologie CSS vous permet de ne diffuser des annonces que pour certaines tailles d'écran. Dans l'exemple suivant, découvrez comment modifier votre code d'annonce afin d'utiliser des requêtes média CSS3 dans le but de masquer les annonces pour certaines tailles d'écran :
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Dans cet exemple, aucune annonce ne sera diffusée si la largeur de l'écran est inférieure à 400 px.

Même avec cette nouvelle souplesse d'utilisation, veillez à toujours respecter nos Règles relatives à l'emplacement des annonces. N'oubliez pas que le Règlement de notre programme n'autorise que des modifications limitées de votre code.
Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?