Les annonces responsives (réactives) Adsense sont un meilleur moyen d’afficher des annonces sur des sites avec un design réactif . Dans ce tutoriel on va apprendre comment personnaliser ces annonces pour afficher des tailles d’annonces recommandées qui ont tendance à payer plus, donc la personnalisation des annonces réactives est très importante surtout si Adsense est votre seule seule source de revenue Cet article explique comment personnaliser vos annonces responsives Adsense. la première étape est de générer une adunit Adsense :
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- ADUnit -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxx"
data-ad-slot="yyyyyy"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Voici un exemple d’Adunit responsive asynchrone Adsense, cela vérifiera automatiquement la largeur disponible pour l’annonce et affichera automatiquement une taille d’annonce appropriée, mais les tailles d’annonce responsive peuvent différer et elles peuvent être de n’importe quelle taille qui ne sont même pas répertoriées sur Adsense Guide, il est donc très important de les personnaliser pour afficher les tailles d’annonces recommandées les plus performantes.
Comment personnaliser les annonces responsives pour afficher une taille spécifique en fonction de la largeur disponible?
<script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> </script>
Comme vous allez utiliser les Adcodes asynchrones, incluez simplement le script ci-dessus une fois dans la section head de votre HTML et supprimer le de tous les autres codes Adsense.
Voici un exemple d’annonce d’en-tête, il est généralement préférable d’utiliser 320 × 100 et 728 × 90, mais vous pouvez également utiliser 468 × 60, ce qui est une meilleure taille pour les tablettes:
<style>
.headerad { width: 320px; height: 100px; }
@media(min-width: 468px) { .headerad { width: 468px; height: 60px; } }
@media(min-width: 728px) { .headerad { width: 728px; height: 90px; } }
</style>
<!-- Header Ad -->
<ins class="adsbygoogle headerad"
style="display:inline-block"
data-ad-client="ca-pub-xxxx"
data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Pour les largeurs d’écran jusqu’à 467, une grande bannière mobile de taille 320 × 100 sera diffusée. Pour des largeurs d’écran comprises entre 468 et 727, une bannière de taille 468 × 60 sera diffusée pour tous les autres écrans. Une annonce Leaderboard 728 × 90 sera diffusée.
Les tailles de grandes bannières mobiles sont les plus recommandées de toute façon. Une annonce 468 × 60 sera un bon choix pour les tablettes de taille moyenne Voici un exemple d’annonces dans la barre latérale:
<style>
.sidebarad { width: 300px; height: 250px; }
@media(min-width: 336px) { .sidebarad { width: 336px; height: 280px; } }
</style>
<!-- Sidebar Ad -->
<ins class="adsbygoogle sidebarad"
style="display:inline-block"
data-ad-client="ca-pub-xxxx"
data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Pour les largeurs d’écran jusqu’à 335, une annonce Rectangle moyen de taille 300 × 250 sera diffusée. Pour toutes les autres largeurs d’écran, une annonce Grand Rectangle de taille 336 × 280 sera diffusée.
Voici quelques autres façons de personnaliser une unité publicitaire réactive, mais l’utilisation des méthodes suivantes n’est pas recommandée :
<ins class = "adsbygoogle"
style = "affichage: bloc;"
data-ad-client = "ca-pub-xxxx"
data-ad-slot = "yyy"
data-ad-format = "horizontal"> </ins>
<script> (adsbygoogle = window.adsbygoogle || []). push ({}); </script>
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-xxxx"
data-ad-slot="yyy"
data-ad-format="vertical"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-xxxx"
data-ad-slot="yyy"
data-ad-format="rectangle"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Dans les trois exemples ci-dessus, le format d’annonce de données est différent, il peut être configuré comme horizontal, vertical et rectangle.
On arrive à la fin de notre petit tutoriel sur la façon de personnaliser les annonces responsives Adsense pour générer plus de revenue avec Adsense.
