Jeśli uznasz, że nasz kod reklamy elastycznej nie spełnia Twoich wymagań, możesz go zmodyfikować pod kątem swojej witryny elastycznej. Z poniższych przykładów dowiesz się, jak poprawnie wprowadzić takie modyfikacje.
Ważne:
- 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.
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, by ustawić konkretne rozmiary jednostek reklamowych dla ekranów o trzech 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:
- Utwórz na swoim koncie AdSense displayową jednostkę reklamową, pamiętając, aby w sekcji „Rozmiar reklamy” pozostawić zaznaczoną opcję Elastyczna. Zanotuj te informacje z kodu reklamy elastycznej:
- Twój identyfikator wydawcy, np. ca-pub-1234567890123456;
- identyfikator jednostki reklamowej (
data-ad-slot
), np. 1234567890.
- 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.
- Zastąp wszystkie wystąpienia ciągu
- 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
i100px
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
i60px
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
i90px
szerokością i wysokością jednostki reklamowej, które chcesz zastosować dla ekranów o szerokości 800 pikseli i szerszych.
- Zastąp wartości
- Skopiuj zmodyfikowany kod reklamy i wklej go do kodu źródłowego HTML stron, na których mają się pojawiać reklamy.
Uwaga: po umieszczeniu kodu reklamy zalecamy przetestowanie reklam na różnych urządzeniach i ekranach, by 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ć, by określić za pomocą CSS dokładny rozmiar, jaki ma przyjmować jednostka reklamowa.
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:
<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:
<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>
@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:
<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 będą wyświetlane, jeśli szerokość ekranu jest mniejsza niż 400 pikseli.