Blocs d'annonces

Comment modifier le code d'annonce responsive

Suivant: Consignes concernant les blocs d'annonces display à dimensions fixes

Si le code d'annonce responsive ne répond pas à tous les besoins de votre site responsif, vous pouvez le modifier. Les exemples de cet article vous montrent comment effectuer correctement ces modifications.

Avant de commencer :

Si vous n'avez jamais utilisé les requêtes média CSS, nous vous recommandons de commencer par la section Exemple de taille exacte de bloc d'annonces associée à une largeur d'écran spécifique.
Si vous connaissez déjà les requêtes média CSS et savez modifier votre code d'annonce, vous pouvez directement accéder à la section Exemples de fonctionnalités avancées du code d'annonce responsive.

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?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

  <!-- example_responsive_1 -->

  <ins class="adsbygoogle example_responsive_1"

       style="display:block"

       data-ad-client="i-gno/re-d1234567890123456"

       data-ad-slot="8XXXXX1"></ins>

  <script>

  (adsbygoogle = window.adsbygoogle || []).push({});

  </script>

Pour adapter cet exemple de code à votre propre site :

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 :
- Votre référence éditeur, par exemple, i-gno/re-d1234567890123456
- ID de votre bloc d'annonces (data-ad-slot), par exemple, 1234567890
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 (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 i-gno/re-d1234567890123456 par votre propre référence éditeur.
- Remplacez 8XXXXX1 par votre propre ID de bloc d'annonces.
Choisissez les tailles que vous souhaitez pour 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 de bloc d'annonces différentes par largeur d'écran, veuillez modifier l'exemple de code et :
  - 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.
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 pour votre bloc d'annonces via le code CSS. L'exemple suivant illustre ce type de modification :

Exemple de largeur extensible avec hauteur fixe

Cet exemple montre comment modifier le code d'annonce responsive pour spécifier une hauteur fixe de 90 pixels et une largeur variable comprise entre 400 et 970 pixels :

<ins class="adsbygoogle"

       style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"

       data-ad-client="i-gno/re-d1234567890123456"

       data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Définir une taille exacte par largeur 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 pour utiliser 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:block;"

        data-ad-client="i-gno/re-d1234567890123456"

        data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Les règles @media appartiennent à la syntaxe CSS3, qui est compatible avec l'ensemble des navigateurs récents. 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 bloc d'annonces.

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. L'exemple suivant montre comment modifier votre code d'annonce pour utiliser des requêtes média CSS3 en vue de masquer les annonces pour des tailles d'écran spécifiques :

<style type="text/css">

    .adslot_1 { display: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="i-gno/re-d1234567890123456"

       data-ad-slot="5678"></ins>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=i-gno/re-d1234567890123456" crossorigin="anonymous"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

Remarque: Lorsque vous modifiez le code d'annonce responsive que vous avez copié, vous devez supprimer ces deux lignes:

data-ad-format="auto"

    data-full-width-responsive="true"

Remarque : Même avec cette souplesse d'utilisation, veillez à toujours respecter nos Règles relatives à l'emplacement des annonces. N'oubliez pas que le Règlement du programme n'autorise que des modifications limitées de votre code.

Ces informations vous-ont elles été utiles ?

Comment pouvons-nous l'améliorer ?