Kā pārveidot adaptīvās reklāmas kodu

Ja, izmantojot mūsu adaptīvās reklāmas kodu, nevarat panākt vēlamo rezultātu, varat pārveidot reklāmas kodu, lai tas labāk atbilstu jūsu adaptīvās vietnes prasībām. Tālāk sniegtajos piemēros ir parādīts, kā pareizi veikt šīs izmaiņas.

Svarīgi!

• Ja tikai mācāties, kā darboties ar CSS multivides vaicājumiem un kā pārveidot reklāmas kodu, mēs iesakām sākt ar piemēru par precīzu reklāmu vienības izmēru noteiktam ekrāna platumam.
• Ja jau zināt, kā darboties ar CSS multivides vaicājumiem un kā pārveidot reklāmas kodu, skatiet sadaļu, kurā aplūkoti adaptīvās reklāmas koda papildfunkciju piemēri.

Piezīme. Šajā rakstā sniegtie piemēri ir AdSense reklāmas koda pieņemamās izmaiņas. Jūs nepārkāpsit AdSense programmas politikas, ja pārveidosit savu adaptīvās reklāmas kodu šajos apstiprinātajos veidos.

Piemērs par precīzu reklāmu vienības izmēru noteiktam ekrāna platumam

Šajā piemērā ir parādīts, kā mainīt adaptīvo kodu, lai iestatītu konkrētus reklāmu vienības izmērus trim dažādiem ekrānu platumiem, piemēram, mobilā tālruņa, planšetdatora un galddatora ekrānam. Jums nav nepieciešama obligāta pieredze darbā ar CSS multivides vaicājumiem vai AdSense reklāmas koda pārveidošanu, lai izpildītu šajā piemērā norādītās darbības.

Piedāvājam kādu pārveidotu adaptīvās reklāmas kodu, kas iestata šādus precīzus reklāmu vienības izmērus noteiktam ekrāna platumam:

• ekrāniem, kuru platums nepārsniedz 500 piks.: 320x100 liela reklāmu vienība;
• ekrāniem, kuru platums ir no 500 piks. līdz 799 piks.: 468x60 liela reklāmu vienība;
• ekrāniem, kuru platums pārsniedz 800 piks.: 728x90 liela reklāmu vienība.

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

Lai šo parauga kodu pielāgotu savai vietnei, veiciet tālāk norādītās darbības.

1. Izveidojiet reklāmu tīkla reklāmu vienību savā AdSense kontā, sadaļā “Reklāmas izmēri” atstājot atlasītu opciju Adaptīva Pierakstiet šādu informāciju no adaptīvās reklāmas koda:
   • sava izdevēja ID, piemēram, ca-pub-1234567890123456
   • savas reklāmu vienības ID (data-ad-slot), piemēram, 1234567890.
2. Parauga kodā veiciet tālāk minētās darbības.
   • Visus example_responsive_1 gadījumus aizstājiet ar unikālu nosaukumu, piemēram, sakuma_lapa, titullapa_123.
     Piezīmes.

     • Unikālajā nosaukumā var būt tikai angļu valodas alfabēta burti (A–Z), cipari un pasvītras, turklāt pirmajai rakstzīmei ir jābūt angļu valodas alfabēta burtam.
     • Ikreiz, kad maināt šo parauga kodu, jums ir jāizmanto cits unikālais nosaukums.
   • Aizstājiet ca-pub-1234567890123456 ar sava izdevēja ID.
   • Aizstājiet 8XXXXX1 ar savas reklāmu vienības ID.
3. Pieņemiet lēmumu par izmēriem, kādi būs jūsu reklāmu vienībai ekrāna platumā.
   • Ja jūs apmierina esošie reklāmu vienības izmēri parauga kodā, nav nepieciešams veikt papildu izmaiņas.
   • Ja vēlaties iestatīt citus reklāmu vienības izmērus ekrāna platumam, parauga kodā, veiciet šādas darbības:
     • aizstājiet 320 piks. un 100 piks. ar tādu reklāmu vienības platumu un augstumu, ko vēlaties izmantot ekrānos, kuru platums nepārsniedz 500 piks.;
     • aizstājiet 468 piks. un 60 piks. ar tādu reklāmu vienības platumu un augstumu, ko vēlaties izmantot ekrānos, kuru platums ir no 500 piks. līdz 799 piks.;
     • aizstājiet 728 piks. un 90 piks. ar tādu reklāmu vienības platumu un augstumu, ko vēlaties izmantot ekrānos, kuru platums pārsniedz 800 piks.
4. Kopējiet un ielīmējiet savu pārveidoto reklāmas kodu tās lapas HTML pirmkodā, kurā vēlaties rādīt reklāmas.
   Piezīme. Kad esat ievietojis reklāmas kodu, ieteicams reklāmas pārbaudīt dažādās ierīcēs un ekrānos, lai pārbaudītu, vai adaptīvā funkcionalitāte darbojas pareizi.

Adaptīvās reklāmas koda papildfunkciju piemēri

Ja, izmantojot mūsu adaptīvās reklāmas kodu, nevarat panākt vēlamo rezultātu, varat pārveidot reklāmas kodu, lai norādītu reklāmu vienības precīzu izmēru, izmantojot CSS.

Piezīme. Mēs neiesakām izmantot šīs papildfunkcijas, ja vien neesat pārliecināts par reklāmas koda pārveidošanu.

Izvēršama platuma un fiksēta augstuma norādīšana

Varat pārveidot adaptīvās reklāmas kodu, lai reklāmu vienībai norādītu izvēršamu platumu un fiksētu augstumu, izmantojot CSS. Tālāk ir sniegti piemēri, kā veikt šādas izmaiņas.

Piemērs par izvēršamu platumu un fiksētu augstumu

Šajā piemērā ir parādīts, kā mainīt adaptīvās reklāmas kodu, lai norādītu fiksētu augstuma vērtību (90 pikseļi) un mainīgu platuma vērtību no minimālās (400 pikseļi) līdz maksimālajai (970 pikseļi):
<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>

Precīzu izmēru norādīšana noteiktam ekrāna platumam

Varat pārveidot adaptīvās reklāmas kodu, lai norādītu precīzus reklāmu vienības izmērus, izmantojot CSS. Tālāk ir sniegti piemēri, kā veikt šādas izmaiņas.

Piemērs par precīzu izmēru noteiktam ekrāna platumam

Ja zināt precīzus reklāmu vienību izmērus katrai ierīcei, kas vislabāk atbilst jūsu adaptīvajai vietnei, varat izmantot CSS3 multivides vaicājumus, lai iestatītu savas adaptīvās reklāmu vienības izmērus. Tālāk sniegtajā piemērā ir parādīts, kā pārveidot reklāmas kodu, lai izmantotu CSS3 multivides vaicājumus:
<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>

Kārtulām @media ir CSS3 sintakse, un tās tiek atbalstītas visās modernajās pārlūkprogrammās. Ņemiet vērā, ka izmēru iestatīšana reklāmas vienībā ārējās stila lapās, izmantojot CSS, oficiāli netiek atbalstīta.

Reklāmu vienības paslēpšana

Reizēm prātīgāk var izrādīties nemaz nerādīt kādu reklāmu, piemēram, mazākās mobilajās ierīcēs. Ja reklāmu vienību vēlaties paslēpt, varat izmantot CSS multivides vaicājumus, lai iestatītu parametru, kas aizliedz reklāmu pieprasījumus un reklāmu rādīšanu. Tālāk minēti piemēri, kā veikt šādas izmaiņas.

Piemērs par reklāmu paslēpšanu noteiktu izmēru ekrānos

Ja reklāmas vēlaties rādīt tikai noteiktu izmēru ekrānos, izmantojiet CSS, lai šo vēlmi īstenotu. Tālāk sniegtajā piemērā ir parādīts, kā pārveidot reklāmas kodu, lai izmantotu CSS3 multivides vaicājumus reklāmu paslēpšanai noteiktu izmēru ekrānos:
<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>

Šajā gadījumā reklāmas netiks rādītas, ja ekrāna platums būs mazāks par 400 pikseļiem.

Arī izmantojot šo iespēju, vienmēr ievērojiet mūsu reklāmu izvietojuma politikas. Atcerieties, ka mūsu programmu politikās ir atļauta tikai ierobežota koda pārveide.