În cazul în care codul de anunț adaptabil nu funcționează așa cum doriți, îl puteți modifica pentru a respecta cerințele site-ului dvs. adaptabil. Exemplele din acest articol vă arată cum să faceți corect aceste modificări.
Înainte să începeți:
- dacă sunteți începător în ceea ce privește interogările media CSS și modificarea codului de anunț, vă recomandăm să începeți cu secțiunea Exemplu de dimensiune exactă a unității de anunțuri pentru fiecare lățime de ecran;
- dacă aveți deja cunoștințe în ceea ce privește interogările media CSS și modificarea codului de anunț, puteți trece direct la secțiunea Exemple de funcții avansate ale codului de anunț adaptabil.
Exemplu de dimensiune exactă a unității de anunțuri pentru fiecare lățime de ecran
Acest exemplu ilustrează modificarea codului de anunț adaptabil în așa fel încât să setați anumite dimensiuni de unități de anunțuri pentru trei intervale de lățimi de ecran, adică cele care corespund dispozitivelor mobile, tabletelor și desktopurilor. Pentru a parcurge acest exemplu, nu este necesară o experiență anterioară în ceea ce privește interogările media CSS sau modificarea codului de anunț AdSense.
Puteți vedea, în continuare, un cod de anunț adaptabil modificat care setează următoarele dimensiuni exacte de unități de anunțuri pentru lățimea ecranului:
- pentru lățimi de ecran de până la 500 de pixeli: o unitate de anunțuri de 320x100;
- pentru lățimi de ecran între 500 și 799 de pixeli: o unitate de anunțuri de 468x60;
- pentru lățimi de ecran de minimum 800 de pixeli: o unitate de anunțuri de 728x90.
<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>
Pentru a adapta acest exemplu de cod la site-ul propriu:
- creați o unitate de anunțuri grafice în contul AdSense, păstrând selectată opțiunea Adaptabilă în secțiunea Dimensiunea anunțurilor. Notați-vă următoarele informații din codul de anunț adaptabil:
- codul de editor, de exemplu i-gno/re-d1234567890123456,
- codul unității de anunțuri (
data-ad-slot
), cum ar fi 1234567890;
- în exemplul de cod:
- înlocuiți toate aparițiile textului
example_responsive_1
cu un nume unic, de exemplu, Pagina_principala, prima_pagina_123 etc.Note:- numele unic poate conține doar litere ale alfabetului englezesc (A - Z), cifre și caractere de subliniere, iar primul caracter trebuie să fie o literă din alfabetul englezesc;
- trebuie să folosiți câte un nume unic diferit de fiecare dată când adaptați acest exemplu de cod.
- Înlocuiți
i-gno/re-d1234567890123456
cu codul dvs. de editor. - Înlocuiți
8XXXXX1
cu codul unității dvs. de anunțuri.
- înlocuiți toate aparițiile textului
- alegeți dimensiunile pe care doriți să le adopte unitatea de anunțuri pentru fiecare lățime de ecran:
- dacă sunteți mulțumit de dimensiunile existente ale unităților de anunțuri din exemplul de cod, nu este necesar să faceți alte modificări;
- dacă doriți să setați alte dimensiuni de unități de anunțuri pentru fiecare lățime de ecran, faceți următoarele în exemplul de cod:
- înlocuiți
320px
și100px
cu lățimea și înălțimea unității de anunțuri dorite pentru ecranele cu lățimi de maximum 500 de pixeli; - înlocuiți
468px
și60px
cu lățimea și înălțimea unității de anunțuri dorite pentru ecranele cu lățimi între 500 și 799 de pixeli; - înlocuiți
728px
și90px
cu lățimea și înălțimea unității de anunțuri dorite pentru ecranele cu lățimi de minimum 800 de pixeli.
- înlocuiți
- copiați și inserați codul de anunț modificat în codul sursă HTML al paginii în care doriți să apară anunțurile.
Sfat: după ce plasați codul de anunț, vă recomandăm să testați anunțurile pe diferite dispozitive și ecrane pentru a vă asigura că redimensionarea automată funcționează corect.
Exemple de funcții avansate ale codului de anunț adaptabil
Dacă observați că acest cod de anunț adaptabil nu corespunde tuturor nevoilor dvs., îl puteți modifica pentru a indica dimensiunea exactă a unității de anunțuri prin CSS.
Indicați o lățime extensibilă și o înălțime fixă
Codul de anunț adaptabil se poate modifica pentru a indica o lățime extensibilă și o înălțime fixă pentru unitatea de anunțuri prin CSS. În exemplul următor puteți vedea cum să faceți aceste modificări:
<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>
Indicați o dimensiune exactă pentru fiecare lățime de ecran
Codul de anunț adaptabil se poate modifica pentru a specifica dimensiunea exactă a unității de anunțuri prin CSS. În exemplul următor puteți vedea cum să faceți aceste modificări:
<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>
@media
reprezintă o sintaxă CSS3 și sunt acceptate de toate browserele moderne. Rețineți că setarea dimensiunii unității de anunțuri prin CSS în foi de stil externe nu este oficial acceptată.Ascunderea unei unități de anunțuri
În anumite cazuri, în special pe dispozitive mobile mai mici, este posibil să nu doriți afișarea anunțurilor. Dacă doriți să ascundeți o unitate de anunțuri, puteți seta un parametru cu interogări media CSS astfel încât să nu se lanseze nicio solicitare și să nu se afișeze niciun anunț. În exemplul următor puteți vedea cum să faceți aceste modificări:
<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>
În acest exemplu, anunțurile nu se afișează dacă lățimea ecranului este mai mică de 400 px.
data-ad-format="auto"
data-full-width-responsive="true"