Jak zmodyfikować kod reklamy elastycznej

Jeśli uznasz, że nasz kod reklamy elastycznej nie spełnia Twoich wymagań, możesz go zmodyfikować pod kątem swojej witryny elastycznej. Przykłady zawarte w tym artykule pokazują, jak poprawnie wykonać taką modyfikację.

Zanim rozpoczniesz:

• Jeśli nie masz doświadczenia w zakresie zapytań o media w CSS i modyfikowania kodu reklamy, najlepiej zacznij od przykładu dotyczącego dokładnego rozmiaru jednostki reklamowej dla danej szerokości ekranu.
• Jeśli znasz się na zapytaniach o media CSS i modyfikowaniu kodu reklamy, przejdź od razu do sekcji z przykładami zaawansowanych funkcji kodu reklamy elastycznej.

Uwaga: przykłady opisane w tym artykule przedstawiają dopuszczalne modyfikacje kodu reklamy AdSense. Zmodyfikowanie kodu reklamy elastycznej w pokazany przez nas zatwierdzony sposób nie narusza zasad programu AdSense.

Przykład dotyczący dokładnego rozmiaru jednostki reklamowej dla danej szerokości ekranu

Z tego przykładu dowiesz się, jak zmodyfikować kod reklamy elastycznej, aby ustawić konkretne rozmiary jednostek reklamowych dla ekranów o 3 zakresach szerokości: telefonu komórkowego, tabletu i komputera. W tym przypadku nie jest wymagane żadne doświadczenie związane z zapytaniami o media CSS lub modyfikowaniem kodu reklamy AdSense.

Oto zmodyfikowany kod reklamy elastycznej, który ustawia następujące dokładne rozmiary jednostki reklamowej dla danej szerokości ekranu:

• dla szerokości ekranu do 500 pikseli: jednostka reklamowa 320 x 100;
• dla szerokości ekranu od 500 do 799 pikseli: jednostka reklamowa 468 x 60;
• dla szerokości ekranu od 800 pikseli: jednostka reklamowa 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>

Aby dostosować ten przykładowy kod do swojej witryny:

1. Utwórz na swoim koncie AdSense displayową jednostkę reklamową, pamiętając, aby w sekcji „Rozmiar reklamy” pozostawić zaznaczoną opcję Elastyczna. Wynotuj te informacje z kodu reklamy elastycznej:
   • Twój identyfikator wydawcy, np. ca-pub-1234567890123456;
   • identyfikator jednostki reklamowej (data-ad-slot), np. 1234567890.
2. W przykładowym kodzie:
   • Zastąp wszystkie wystąpienia ciągu example_responsive_1 niepowtarzalną nazwą, np. Strona_glowna, strona_poczatkowa_123.
     Uwagi:

     • Niepowtarzalna nazwa może zawierać tylko litery alfabetu angielskiego, cyfry i podkreślenia, a pierwszy znak musi być literą alfabetu angielskiego.
     • Za każdym razem, gdy dostosowujesz ten przykładowy kod, użyj innej niepowtarzalnej nazwy.
   • Zastąp ciąg ca-pub-1234567890123456 własnym identyfikatorem wydawcy.
   • Zastąp ciąg 8XXXXX1 identyfikatorem swojej jednostki reklamowej.
3. Wybierz rozmiar jednostki reklamowej dla danej szerokości ekranu:
   • Jeśli odpowiadają Ci rozmiary jednostki reklamowej przedstawione w przykładowym kodzie, nie musisz wprowadzać żadnych zmian.
   • Jeśli chcesz ustawić inne rozmiary jednostki reklamowej dla danej szerokości ekranu, wówczas w przykładowym kodzie:
     • Zastąp wartości 320px i 100px szerokością i wysokością jednostki reklamowej, które chcesz zastosować dla ekranów o szerokości do 500 pikseli.
     • Zastąp wartości 468px i 60px szerokością i wysokością jednostki reklamowej, które chcesz zastosować dla ekranów o szerokości od 500 do 799 pikseli.
     • Zastąp wartości 728px i 90px szerokością i wysokością jednostki reklamowej, które chcesz zastosować dla ekranów o szerokości 800 pikseli i szerszych.
4. Skopiuj zmodyfikowany kod reklamy i wklej go do kodu źródłowego HTML stron, na których mają się pojawiać reklamy.
   Wskazówka: po umieszczeniu kodu reklamy zalecamy przetestowanie reklam na różnych urządzeniach i ekranach, aby upewnić się, że elastyczne dopasowywanie rozmiaru działa prawidłowo.

Przykłady zaawansowanych funkcji kodu reklamy elastycznej

Jeśli uważasz, że kod reklamy elastycznej nie spełnia Twoich oczekiwań, możesz go zmodyfikować, aby określić za pomocą CSS dokładny rozmiar, jaki ma przyjmować jednostka reklamowa.

Uwaga: zalecamy użycie tych zaawansowanych funkcji tylko wtedy, gdy dokładnie wiesz, jak zmodyfikować kod reklamy.

Określanie zmiennej szerokości i stałej wysokości

Możesz zmienić kod reklamy elastycznej, aby określić za pomocą CSS zmienną szerokość i stałą wysokość jednostki reklamowej. Z poniższego przykładu dowiesz się, jak wprowadzić takie zmiany:

Przykład jednostki reklamowej ze zmienną szerokością i stałą wysokością

Ten przykład pokazuje, jak zmienić kod reklamy elastycznej, aby ustawić stałą wysokość na 90 pikseli i zmienną szerokość na min. 400, a maks. 970 pikseli:
<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>

Określanie dokładnego rozmiaru zgodnie z szerokością ekranu

Możesz zmienić kod reklamy elastycznej, aby określić za pomocą CSS dokładny rozmiar jednostki reklamowej. Z poniższego przykładu dowiesz się, jak wprowadzić takie zmiany:

Przykład określania dokładnego rozmiaru zgodnie z szerokością ekranu

Jeśli znasz dokładne rozmiary jednostek reklamowych, które najlepiej pasują do Twojej witryny elastycznej przy wyświetlaniu na poszczególnych urządzeniach, możesz używać zapytań o media w CSS3 do ustalania rozmiaru elastycznej jednostki reklamowej. Ten przykład pokazuje, jak zmienić kod reklamy, aby używać zapytań o media w 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>

Reguły @media to składnia CSS3 obsługiwana przez wszystkie nowoczesne przeglądarki. Pamiętaj, że określanie rozmiaru jednostki reklamowej przez CSS w zewnętrznych arkuszach stylów nie jest oficjalnie obsługiwane.

Ukrywanie jednostki reklamowej

W niektórych przypadkach, zwłaszcza na mniejszych urządzeniach przenośnych, możesz nie chcieć w ogóle wyświetlać reklamy. Jeśli chcesz ukryć jednostkę reklamową, możesz ustawić parametr z zapytaniami o media w CSS, tak aby nie następowało żądanie ani wyświetlenie reklamy. Z poniższego przykładu dowiesz się, jak wprowadzić te zmiany:

Przykład ukrywania reklam dla określonych rozmiarów ekranu

Jeśli chcesz wyświetlać reklamy wyłącznie dla określonych rozmiarów ekranu, możesz wykorzystać w tym celu CSS. Ten przykład pokazuje, jak zmienić kod reklamy, aby używać zapytań o media w CSS3 do ukrywania reklam na ekranach o określonych rozmiarach:
<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>

W tym przykładzie reklamy nie są wyświetlane, jeśli szerokość ekranu jest mniejsza niż 400 pikseli.

Uwaga: podczas modyfikowania skopiowanego kodu reklamy elastycznej musisz usunąć te 2 wiersze:
data-ad-format="auto"
data-full-width-responsive="true"

Uwaga: korzystając z tych opcji elastycznego modyfikowania, pamiętaj, aby zawsze przestrzegać zasad związanych z miejscami docelowymi reklam. Pamiętaj też, że zgodnie z zasadami programu dozwolone są jedynie ograniczone modyfikacje kodu reklamy.