Si trobeu que el nostre codi d'anunci responsiu no us ofereix tot allò que necessiteu, podeu modificar el codi perquè s'adapti millor als requisits del vostre lloc web responsiu. Als exemples d'aquest article s'explica com es poden fer correctament aquestes modificacions.
Abans de començar:
- Si és la primera vegada que utilitzeu consultes multimèdia de CSS i mai no heu modificat el codi d'anunci, us recomanem que comenceu amb l'exemple de mida de bloc d'anuncis exacta segons l'amplada de la pantalla.
- Si ja coneixeu les consultes multimèdia de CSS i no és el primer cop que modifiqueu el codi d'anunci, podeu accedir directament a la secció d'exemples de funcions avançades de codi d'anunci responsiu.
Exemple de mida de bloc d'anuncis exacta segons l'amplada de la pantalla
En aquest exemple, es mostra com podeu modificar el codi responsiu per definir mides específiques de blocs d'anuncis per a tres possibles amplades de pantalla: mòbils, tauletes i ordinadors. No cal que tingueu experiència prèvia en consultes multimèdia de CSS ni en la modificació de codi d'anunci d'AdSense per seguir aquest exemple.
A continuació teniu el codi d'anunci responsiu modificat que defineix les mides dels blocs d'anuncis exactes següents segons l'amplada de la pantalla:
- Per a amplades de pantalla de fins a 500 px: un bloc d'anuncis de 320 x 100.
- Per a amplades de pantalla d'entre 500 px i 799 px: un bloc d'anuncis de 468 x 60.
- Per a amplades de pantalla de 800 px o més: un bloc d'anuncis 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=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Per adaptar aquest codi de mostra al vostre lloc web, feu el següent:
- Creeu un bloc d'anuncis de display al vostre compte d'AdSense i assegureu-vos de deixar l'opció Responsiu seleccionada a la secció "Mida de l'anunci". Anoteu la informació següent del codi d'anunci responsiu:
- Identificador d'editor; per exemple, ca-pub-1234567890123456.
- Identificador de bloc d'anuncis (
data-ad-slot
); per exemple, 1234567890.
- Al codi d'exemple:
- Substituïu totes les instàncies d'
exemple_responsiu_1
per un nom únic; per exemple, Pagina_inici, primera_pagina_123, etc.Notes:- El nom únic només pot incloure lletres de l'alfabet anglès (A-Z i sense accents), números i ratlles baixes, i el primer caràcter ha de ser una lletra de l'alfabet anglès.
- Heu d'utilitzar un nom únic diferent cada vegada que adapteu aquest codi d'exemple.
- Substituïu
ca-pub-1234567890123456
pel vostre identificador d'editor. - Substituïu
8XXXXX1
pel vostre identificador de bloc d'anuncis.
- Substituïu totes les instàncies d'
- Decidiu quines mides voleu que tingui el vostre bloc d'anuncis segons l'amplada de la pantalla:
- Si us semblen bé les mides de bloc d'anuncis del codi d'exemple, no cal que feu cap més canvi.
- Si voleu definir mides de bloc d'anuncis diferents segons l'amplada de la pantalla, aleshores feu els canvis següents al codi d'exemple:
- Substituïu
320 px
i100 px
per l'amplada i l'alçada del bloc d'anuncis que voleu utilitzar per a amplades de pantalla de fins a 500 px. - Substituïu
468 px
i60 px
per l'amplada i l'alçada del bloc d'anuncis que voleu utilitzar per a amplades de pantalla d'entre 500 px i 799 px. - Substituïu
728 px
i90 px
per l'amplada i l'alçada del bloc d'anuncis que voleu utilitzar per a amplades de pantalla de 800 px o més.
- Substituïu
- Copieu el codi d'anunci i enganxeu-lo al codi font HTML de la pàgina en què voleu que es mostrin els anuncis.
Consell: un cop col·locat el codi d'anunci, us recomanem que proveu els anuncis en diferents dispositius i pantalles per comprovar el bon funcionament del comportament responsiu.
Exemples de funcions avançades de codi d'anunci responsiu
Si trobeu que el codi d'anunci responsiu no us ofereix els resultats que esperàveu, podeu modificar-lo per especificar una mida exacta per al bloc d'anuncis mitjançant CSS.
Definir una amplada ampliable i una alçada fixa
Podeu modificar el codi d'anunci responsiu per definir una amplada ampliable i una alçada fixa per al vostre bloc d'anuncis mitjançant CSS. A continuació teniu un exemple de com podeu fer aquests canvis:
<ins class="adsbygoogle"
style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Definir una mida exacta segons l'amplada de la pantalla
Podeu modificar el codi d'anunci responsiu per definir la mida exacta del bloc d'anuncis mitjançant CSS. A continuació teniu un exemple de com podeu fer aquests canvis:
<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="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
@media
formen part de la sintaxi de CSS3 i són compatibles amb tots els navegadors moderns. Tingueu present que, si definiu la mida del bloc d'anuncis mitjançant CSS en fulls d'estils externs, no se'n garanteix la compatibilitat.Amagar un bloc d'anuncis
En alguns casos, sobretot en dispositius mòbils més petits, és possible que no vulgueu mostrar cap anunci. Si voleu amagar un bloc d'anuncis, podeu definir un paràmetre mitjançant consultes multimèdia de CSS perquè no es faci cap sol·licitud d'anunci i no es mostri cap anunci. A continuació teniu un exemple de com podeu fer aquests canvis:
<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="ca-pub-1234567890123456"
data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
En aquest exemple, no es mostra cap anunci si l'amplada de la pantalla és inferior a 400 px.