Modificarea codului de anunț adaptabil

Î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 adaptabil. Următoarele exemple ilustrează efectuarea corectă a acestor modificări:

Important:

• 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 accesa direct secțiunea Exemple de funcții avansate ale codului de anunț adaptabil.

Notă: exemplele descrise în acest articol constituie modificări acceptabile ale codului de anunț AdSense. Nu veți încălca politicile de produs AdSense dacă modificați codul de anunț adaptabil în aceste moduri aprobate.

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=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>

Pentru a adapta acest exemplu de cod la site-ul propriu:

1. 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 ca-pub-1234567890123456,
   • codul unității de anunțuri (data-ad-slot), cum ar fi 1234567890;
2. î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 ca-pub-1234567890123456 cu codul dvs. de editor.
   • Înlocuiți 8XXXXX1 cu codul unității dvs. de anunțuri.
3. 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 și 100px 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 și 60px 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 și 90px cu lățimea și înălțimea unității de anunțuri dorite pentru ecranele cu lățimi de minimum 800 de pixeli.
4. copiați și inserați codul de anunț modificat în codul sursă HTML al paginii în care doriți să apară anunțurile.
   Notă: 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.

Notă: nu recomandăm folosirea acestor funcții avansate decât dacă dețineți cunoștințele necesare pentru modificarea codului de anunț.

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:

Exemplu de lățime extensibilă și înălțime fixă

Acest exemplu vă arată cum să modificați codul de anunț adaptabil pentru a indica o înălțime fixă de 90 px și o lățime variabilă de la minimum 400 px la maximum 970 px:
<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>

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:

Exemplu de dimensiune exactă pentru fiecare lățime de ecran

Dacă știți exact ce dimensiune a unității de anunțuri se potrivește cel mai bine site-ului dvs. adaptabil, în funcție de dispozitiv, puteți folosi interogări media CSS3 pentru a seta dimensiunea unității de anunțuri adaptabile. Următorul exemplu vă arată cum să modificați codul de anunț pentru a folosi interogări media CSS3:
<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>

Regulile @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:

Ascunderea anunțurilor pentru anumite dimensiuni de ecran

Dacă doriți să afișați anunțuri numai pe ecranele care au anumite dimensiuni, puteți folosi CSS. Următorul exemplu vă arată cum să modificați codul de anunț pentru a folosi interogările media CSS3 și a ascunde anunțurile pentru anumite dimensiuni de ecran:
<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>

În acest exemplu, nu se vor afișa anunțuri dacă lățimea ecranului este mai mică de 400 de pixeli.

Chiar și cu această flexibilitate, respectați întotdeauna politicile privind destinațiile de plasare a anunțurilor. Rețineți că politicile de produs permit doar modificări limitate ale codului.