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. A continuació teniu uns quants exemples de modificacions correctes.
Important:
- 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, no dubteu a 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 d'exemple 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 vostre 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_1per 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-1234567890123456pel vostre identificador d'editor. - Substituïu
8XXXXX1pel 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 pxi100 pxper 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 pxi60 pxper 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 pxi90 pxper 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.
Nota: 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 mostrarà cap anunci si l'amplada de la pantalla és inferior a 400 px.
