Définir la hauteur de votre annonce In-feed

AdSense ajuste automatiquement la hauteur des annonces In-feed afin de s'assurer qu'elles s'adaptent bien à l'espace disponible. Ce dimensionnement automatique signifie que la plupart des éditeurs n'auront pas besoin de modifier la hauteur de leurs annonces In-feed. Toutefois, si vous avez des exigences spécifiques relatives à la hauteur de votre annonce In-feed, vous pouvez en modifier le code afin de définir la hauteur souhaitée. Selon que votre flux se trouve sur un site responsive ou non, vous pouvez définir une hauteur variable ou fixe.

Soyez assuré que les exemples décrits dans cet article constituent des modifications acceptables du code d'annonce AdSense. Vous ne courez aucun risque d'enfreindre le règlement du programme AdSense si vous modifiez votre code d'annonce In-feed en suivant ces procédures approuvées.

Définir une hauteur fixe (sites non responsives)

Vous pouvez définir une hauteur fixe pour votre annonce In-feed en ajoutant un attribut de hauteur à votre code d'annonce, height:120px, par exemple. Utilisez cette option si votre bloc d'annonces In-feed se trouve dans un conteneur fixe, c'est-à-dire qu'il n'est pas responsive.

Si vous n'êtes pas sûr de la hauteur à définir, vous pouvez utiliser les outils de développement de votre navigateur afin de déterminer la hauteur exacte de votre annonce sans espace blanc. Pour en savoir plus, lisez l'article Déterminer la taille des images dans votre flux.

Cet exemple illustre une annonce In-feed ayant une hauteur fixe de 120 px :

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345" crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block;height:120px"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-12345"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Définir une hauteur variable (sites responsives)

Si la largeur de votre bloc d'annonces In-feed dépend de la largeur de l'écran, c'est-à-dire qu'il est responsive, vous devez utiliser des requêtes média CSS dans votre code d'annonce afin de définir une hauteur différente par largeur d'écran.

Pour déterminer les hauteurs à définir, nous vous suggérons de procédez comme suit :

1. Redimensionnez votre site selon plusieurs largeurs d'écran, 350 px, 500 px, 1 000 px, par exemple.
2. Pour chaque largeur, déterminez la hauteur exacte de votre annonce sans espace blanc à l'aide des outils de développement de votre navigateur. Pour en savoir plus, lisez l'article Déterminer la taille des images dans votre flux.

Cet exemple illustre une annonce In-feed ayant plusieurs hauteurs différentes : 180 px de haut pour des écrans faisant jusqu'à 350 px de large, 130 px de haut pour des écrans faisant entre 500 et 800 px de large, et 200 px de haut pour des écrans supérieurs à 800 px de large.

<style>
  @media (min-width: 350px) {
    .infeed {
      height: 180px;
    }
 @media (min-width: 500px) {
    .infeed {
      height: 130px;
    }
  }
 @media (min-width: 800px) {
    .infeed {
      height: 200px;
    }
  }

</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345" crossorigin="anonymous"></script>
<ins class="adsbygoogle infeed"
     style="display:block;"
     data-ad-format="fluid"
     data-ad-layout="image-top"
     data-ad-layout-key="xxxxxxxx"
     data-ad-client="ca-pub-12345"
     data-ad-slot="123456"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Important : Dans l'exemple ci-dessus, nous avons mis en évidence les modifications que vous devez apporter au code de votre annonce. Assurez-vous d'utiliser le même nom de classe (infeed, par exemple) dans l'ensemble du code d'annonce.

Après avoir modifié votre code d'annonce, n'oubliez pas de tester votre annonce In-feed sur différentes tailles d'écran. Vous pourrez ainsi vous assurer que la hauteur choisie fonctionne sur tous les types d'appareils.

Pourquoi mes annonces In-feed ont-elles parfois un espace blanc supplémentaire ou un bouton Plus ?

Les blocs d'annonces In-feed sont responsives et sont compatibles avec un large éventail de fenêtres d'affichage. Ils adaptent automatiquement leur taille à votre mise en page, en se développant selon la largeur totale du conteneur de flux dans lequel ils se trouvent. Leur hauteur est basée sur le contenu de l'annonce même et sur les paramètres des annonces In-feed que vous avez sélectionnés dans AdSense.

Parfois, lorsqu'une annonce In-feed se trouve dans la fenêtre d'affichage de l'utilisateur (partie au-dessus de la ligne de flottaison), nous ne pouvons pas ajuster la hauteur de l'annonce sans que cela n'entraîne un ajustement du contenu en dessous de l'annonce. Dans ce cas, nous pouvons laisser un espace vide ou afficher un bouton Plus  afin de développer l'annonce. Cela nous permet de proposer la meilleure expérience utilisateur possible.