Paano baguhin ang iyong code ng tumutugong ad

Kung sa tingin mo ay hindi natutugunan ng aming code ng tumutugong ad ang lahat ng iyong kailangan, puwede mong baguhin ang ad code para mas matugunan ang mga kinakailangan ng tumutugong site mo. Ipinapakita sa iyo ng mga sumusunod na halimbawa kung paano gagawin nang tama ang mga pagbabagong ito.

Mahalaga:

• Kung bago sa iyo ang mga query ng media ng CSS at ang pagbabago ng iyong ad code, inirerekomenda naming magsimula ka sa Halimbawa ng eksaktong laki ng unit ng ad sa bawat lapad ng screen.
• Kung pamilyar ka na sa mga query ng media ng CSS at sa pagbabago ng iyong ad code, huwag mag-atubiling dumiretso sa seksyong Mga halimbawa ng mga advanced na feature ng code ng tumutugong ad.

Tandaan: Ang mga halimbawang inilarawan sa artikulong ito ay mga tinatanggap na pagbabago sa AdSense ad code. Hindi mo malalabag ang mga patakaran ng programa ng AdSense sa pamamagitan ng pagbabago sa code ng iyong tumutugong ad sa mga naaprubahang paraang ito.

Halimbawa ng eksaktong laki ng unit ng ad sa bawat lapad ng screen

Ipinapakita sa iyo ng halimbawang ito kung paano baguhin ang code ng tumutugong ad mo para magtakda ng mga partikular na laki ng unit ng ad para sa tatlong hanay ng mga lapad ng screen, ibig sabihin, mobile, tablet, at desktop. Hindi kailangang mayroon kang anumang dating karanasan sa mga query ng media ng CSS o sa pagbabago ng AdSense ad code para masundan ang halimbawang ito.

Narito ang ilang nabagong code ng tumutugong ad na nagtatakda sa mga sumusunod na eksaktong laki ng unit ng ad sa bawat lapad ng screen:

• Para sa mga lapad ng screen na hanggang 500px: isang 320x100 na unit ng ad
• Para sa mga lapad ng screen na nasa pagitan ng 500px at 799px: isang 468x60 na unit ng ad
• Para sa mga lapad ng screen na 800px at mas malapad pa: isang 728x90 na unit ng ad.

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

Para isaayos ang sample na code na ito para sa sarili mong site:

1. Gumawa ng unit ng display ad sa iyong AdSense account, na tinitiyak na naiwang nakapili ang Tumutugon sa seksyong "Laki ng ad." Itala ang sumusunod na impormasyon mula sa iyong code ng tumutugong ad:
   • Ang iyong publisher ID, halimbawa, ca-pub-1234567890123456
   • Ang ID ng iyong unit ng ad (data-ad-slot), halimbawa, 1234567890.
2. Sa sample na code na ito:
   • Palitan ang lahat ng instance ng example_responsive_1 ng isang natatanging pangalan, hal., Home_Page, front_page_123, atbp.
     Mga Paalala:

     • Dapat mga English na titik (A-Z), numero, at underscore lang ang laman ng iyong natatanging pangalan, at isang English na titik dapat ang unang character.
     • Dapat kang gumamit ng natatanging pangalan sa tuwing gagamitin mo ang sample na code na ito.
   • Palitan ang ca-pub-1234567890123456 ng sarili mong publisher ID.
   • Palitan ang 8XXXXX1 ng ID ng sarili mong unit ng ad.
3. Magpasya kung gaano kalaki ang gusto mong kunin ng iyong unit ng ad sa bawat lapad ng screen:
   • Kung masaya ka na sa mga kasalukuyang laki ng unit ng ad sa sample na code, hindi mo na kailangang gumawa ng anumang karagdagang pagbabago.
   • Kung gusto mong magtakda ng iba't ibang laki ng unit ng ad sa bawat lapad ng screen, sa sample na code:
     • Palitan ang 320px at 100px ng lapad at taas ng unit ng ad na gusto mong gamitin para sa mga lapad ng screen na hanggang 500px.
     • Palitan ang 468px at 60px ng lapad at taas ng unit ng ad na gusto mong gamitin para sa mga lapad ng screen sa pagitan ng 500px at 799px.
     • Palitan ang 728px at 90px ng lapad at taas ng unit ng ad na gusto mong gamitin para sa mga lapad ng screen na 800px at mas malapad pa.
4. Kopyahin at i-paste ang iyong binagong ad code sa HTML source code ng page kung saan mo gustong lumabas ang mga ad.
   Tandaan: Pagkatapos mong ilagay ang iyong ad code, inirerekomenda naming subukin ang iyong mga ad sa iba't ibang device at screen para makatiyak na gumagana nang tama ang tumutugong gawi.

Mga halimbawa ng mga advanced na code ng tumutugong ad

Kung sa tingin mo ay hindi natutugunan ng aming code ng tumutugong ad ang lahat ng iyong kailangan, maaari mong baguhin ang iyong ad code para tumukoy ng eksaktong laki para sa unit ng ad mo sa pamamagitan ng CSS.

Tandaan: Hindi namin inirerekomendang gamitin ang mga advanced na feature na ito maliban na lang kung sigurado ka sa pagbabago ng iyong ad code.

Tumukoy ng nae-expand na lapad at isang nakapirming taas

Maaari mong baguhin ang iyong code ng tumutugong ad para tumukoy ng nae-expand na lapad at isang nakapirming taas para sa unit ng ad mo sa pamamagitan ng CSS. Ipinapakita sa iyo ng sumusunod na halimbawa kung paano gawin ang mga pagbabagong ito:

Halimbawa ng nae-expand na lapad at nakapirming taas

Ipinapakita ng halimbawang ito kung paano baguhin ang iyong code ng tumutugong ad para tumukoy ng nakatakdang taas na 90px at lapad ng variable mula sa minimum na lapad na 400px hanggang sa maximum na lapad na 970px:
<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>

Tumukoy ng eksaktong laki sa bawat lapad ng screen

Maaari mong baguhin ang iyong code ng tumutugong ad para tukuyin ang eksaktong laki para sa unit ng ad mo sa pamamagitan ng CSS. Ipinapakita sa iyo ng sumusunod na halimbawa kung paano gawin ang mga pagbabagong ito:

Halimbawa ng eksaktong laki sa bawat lapad ng screen

Kung alam mo ang mga eksaktong laki ng unit ng ad sa bawat device na pinakaangkop sa iyong tumutugong site, magagamit mo ang mga query ng media ng CSS3 para itakda ang laki ng iyong tumutugong unit ng ad. Ipinapakita sa iyo ng sumusunod na halimbawa kung paano baguhin ang ad code mo para gamitin sa mga query ng media ng 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>

Ang mga panuntunan ng @media ay isang syntax ng CSS3, at sinusuportahan ito sa lahat ng modernong browser. Tandaan na ang pagtatakda ng laki ng unit ng ad sa pamamagitan ng CSS sa mga external na style sheet ay hindi opisyal na sinusuportahan.

Pagtatago ng unit ng ad

Sa ilang partikular na sitwasyon, lalo na sa mas maliliit na mobile device, maaaring ayaw mo talagang magpakita ng ad. Kung ayaw mong itago ang isang unit ng ad, maaari kang magtakda ng parameter gamit ang mga query ng media ng CSS para walang gagawing kahilingan sa ad at walang ipapakitang ad. Ipinapakita sa iyo ng sumusunod na halimbawa kung paano gawin ang mga pagbabagong ito.

Halimbawa ng pagtatago ng mga ad para sa mga partikular na laki ng screen

Kung gusto mong magpakita lang ng mga ad para sa ilang partikular na laki ng screen, puwede mong gamitin ang CSS para gawin ito. Ipinapakita sa iyo ng sumusunod na halimbawa kung paano baguhin ang ad code mo para gamitin sa mga query ng media ng CSS3 para itago ang mga ad para sa mga partikular na laki ng screen:
<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>

Sa halimbawang ito, walang ipapakitang ad kung ang lapad ng screen ay mas maliit sa 400px.

Kahit sa mga flexibility na ito, pakitandaan na laging sundin ang aming mga patakaran sa placement ng ad. Tandaan na limitadong pagbabago lang sa iyong code ang pinapahintulutan ng aming Mga patakaran ng programa.