Przesunięcie układu występuje, gdy widoczny element na stronie zmienia swoją pozycję lub rozmiar, wpływając na pozycję treści wokół niego. Czasami zmiana jest zamierzona, np. gdy kontener rozszerza się w wyniku działania użytkownika. Jednak dynamiczny charakter reklam może prowadzić do nieoczekiwanych zmian układu, które mają negatywny wpływ na wrażenia użytkownika i mogą powodować poważne problemy z użytecznością.
Z tego przewodnika dowiesz się, jak mierzyć przesunięcie układu i jak je minimalizować podczas korzystania z tagów wydawcy Google (GPT).
Jak reklamy powodują przesunięcie układu
Żądania reklam są zwykle przesyłane asynchronicznie i dynamicznie dodają treści do strony podczas jej wczytywania lub po nim. Podczas pobierania reklam reszta strony jest nadal wczytywania, a użytkownik może zobaczyć treści inne niż reklamy. Jeśli nie zarezerwujesz wystarczająco dużo miejsca na wczytywane reklamy, mogą one wypchnąć widoczne treści, które nie są reklamami, gdy zostaną dodane do strony.
Podczas pracy z tagami Google Publisher Tag występuje kilka punktów w cyklu życia reklamy, w których może nastąpić zmiana układu:
- Gdy wywoływana jest funkcja
display(). W zależności od konfiguracji slot może się rozwijać lub zwijać. - kiedy renderowane są treści reklamy; Boks może zostać powiększony, jeśli wyświetlana jest reklama płynna lub jeśli nie ma wystarczającej ilości miejsca. W tym miejscu może się on też rozwinąć lub zwinąć, w zależności od jego konfiguracji.
- po renderowaniu treści reklamy; Niektóre typy kreacji są zaprojektowane tak, aby po wyświetleniu na stronie się rozwijały.
Pamiętaj, że im wyżej w widocznym obszarze znajduje się boks reklamowy, tym więcej treści może on potencjalnie zastąpić. Szczególnie uważaj na boksy reklamowe znajdujące się w górnej części początkowo widocznego obszaru (powyżej zagięcia). Te miejsca mogą powodować nieproporcjonalne przesunięcia układu, ponieważ są bardziej widoczne, gdy wczytują treści reklamy.
Pomiar przesunięcia układu
Skumulowane przesunięcie układu (CLS) to wskaźnik podstawowych wskaźników internetowych, którego możesz używać do ilościowego określenia wpływu przesunięć układu na Twoją stronę, zarówno w laboratorium, jak i w warunkach rzeczywistych.
W laboratorium
Narzędzia laboratoryjne mierzą CLS w sposób syntetyczny. Oznacza to, że nie wymagają one interakcji z użytkownikiem, dzięki czemu są odpowiednie do stosowania w ciągłej integracji i lokalnych procesach programowania. Jednak te narzędzia zwykle mierzą tylko wydajność podczas wczytywania strony i mają ograniczone możliwości symulowania warunków, więc podawane wartości mogą być niższe niż te, które odczuwałby prawdziwy użytkownik.
Publisher Ads Audits for Lighthouse to narzędzie, które umożliwia pomiar CLS w przypadku reklam tagów wydawcy Google. Szczegółowe informacje znajdziesz w dokumentacji dotyczącej audytu ograniczania przesunięcia układu związanego z reklamą.
Narzędzie deweloperskie Chrome można też skonfigurować tak, aby podświetlało zmiany układu podczas poruszania się po witrynie. Możesz go użyć, aby ręcznie zidentyfikować zmiany układu, które występują w pobliżu boksów reklamowych na stronie.
W terenie
Narzędzia w polu mierzą CLS w przypadku prawdziwych użytkowników, którzy wchodzą w interakcję z Twoją witryną. Ten proces jest powszechnie znany jako monitorowanie rzeczywistych użytkowników (RUM). RUM umożliwia obserwowanie wpływu czynników rzeczywistych (takich jak możliwości urządzenia, warunki sieci, interakcje użytkownika i personalizacja strony), które często trudno jest symulować za pomocą testów syntetycznych.
Minimalizowanie przesunięć układu
Jedynym pewnym sposobem na uniknięcie przesunięcia układu jest zarezerwowanie wystarczającej ilości miejsca dla danego miejsca na reklamę za pomocą kodu CSS. Najskuteczniejszym sposobem jest ustawienie stałej wysokości i szerokości bezpośrednio w boksie reklamy div. Chociaż takie rozwiązanie sprawdza się w przypadku statycznych, stałych rozmiarów miejsc reklamowych, bardziej skomplikowane scenariusze mogą wymagać bardziej zróżnicowanego podejścia. W następnych sekcjach omawiamy kilka typowych scenariuszy.
Boksy reklamowe o różnych rozmiarach
W przypadku miejsc reklamowych, które obsługują wiele rozmiarów, zalecamy 1 z tych podejść:
- Zarezerwuj miejsce na największy rozmiar skonfigurowany do wyświetlania.
- Zarezerwuj miejsce na najmniejszy rozmiar obrazu skonfigurowany do wyświetlania.
- Rezerwowanie miejsca na rozmiar, który najprawdopodobniej będzie wyświetlany, na podstawie danych o wypełnianiu z raportów Google Ad Managera.
Wybór odpowiedniego podejścia
Rezerwowanie miejsca na największy rozmiar obrazu skonfigurowany do wyświetlania to najskuteczniejszy sposób na wyeliminowanie przesunięć układu. Ta metoda może jednak spowodować, że wokół reklamy pojawi się dodatkowa pusta przestrzeń, jeśli wyświetlana jest kreacja mniejsza niż zarezerwowany rozmiar. Zmniejszenie boksu reklamowego do rozmiaru wyświetlanej kreacji spowoduje zmianę układu, dlatego zalecamy unikanie tego. Zamiast tego możesz użyć wyśrodkowania w pionie i w poziomie, aby zmniejszyć wpływ nadmiernej ilości pustego miejsca na odbiór wizualny.
Z drugiej strony, zarezerwowanie miejsca na najmniejszy rozmiar skonfigurowany do wyświetlania pozwala uniknąć nadmiernego pustego miejsca wokół reklamy. Może to być dobry wybór, jeśli boks reklamowy jest zwykle wypełniony mniejszymi kreacjami lub jeśli wszystkie obsługiwane przez niego rozmiary są podobne. Jednak ta metoda powoduje zmianę układu w przypadku wyświetlenia kreacji o większym rozmiarze niż zarezerwowany (chociaż takie zmiany są zazwyczaj mniejsze niż w przypadku braku rezerwacji miejsca).
Aby zachować równowagę między pustą przestrzenią a zmianami układu, możesz zarezerwować „średnią” ilość miejsca na swoje szale reklamowe. Na przykład rezerwacja 100px
w pionie powoduje powstanie niewielkiej pustej przestrzeni podczas wyświetlania kreacji 320x50, ale zmniejsza wynik CLS w porównaniu z brakiem rezerwacji miejsca. Musisz eksperymentować z różnymi rozmiarami, aby znaleźć najlepszy rozmiar dla swojej witryny.
Aby podjąć świadomą decyzję, ile miejsca zarezerwować na dany slot, warto sprawdzić dane o wypełnieniu reklam z raportów Google Ad Managera z uwzględnieniem ich historii. Najlepiej wyjaśnić to na przykładach.
Przykład 1
| Wymiar kreacji (wyświetlone) | Wyświetlenia z serwera reklam (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
W takim przypadku rezerwowanie 250px w poziomie może znacznie zmniejszyć CLS, ponieważ większość wyświetlanych kreacji to 300x250.
Przykład 2
| Wymiar kreacji (wyświetlone) | Wyświetlenia z serwera reklam (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
W tym przypadku większość reklam ma wysokość maksymalnie 90px, więc zarezerwowanie 90px
w kierunku pionowym powinno w większości przypadków zapobiegać zmianie układu.
Jak zarezerwować miejsce
Zalecamy rozwiązanie tego problemu przez określenie rozmiaru miejsca na reklamę za pomocą właściwości CSS min-height i min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
Użycie atrybutów min-height i min-width pozwala zarezerwować minimalną ilość miejsca na boks reklamowy, a jednocześnie umożliwia przeglądarce zwiększenie rozmiaru kontenera w razie potrzeby. Dzięki temu żadne treści nie zostaną obcięte, jeśli wyświetlana jest większa kreacja.
Możesz połączyć tę technikę z zapytaniami multimedialnymi w CSS, aby określić różne wartości minimalne dla różnych rozmiarów ekranu:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Nie zalecamy rezerwowania miejsca za pomocą kodu JavaScript, ponieważ może to spowodować przesunięcie układu podczas wczytywania skryptu. Rezerwowanie miejsca za pomocą kodu CSS pozwala uniknąć tego ryzyka.
Elastyczne boksy reklamowe
Elastyczne boksy reklamowe nie określają stałego zestawu obsługiwanych rozmiarów. Zamiast tego automatycznie dostosowują swój rozmiar do wyświetlanych w nich treści kreacji, co pozwala na obsługę kreacji o nieokreślonym rozmiarze. W związku z tym nie można zarezerwować miejsca na te boksy przed przesłaniem treści reklamy, a reklamy o płynnej wielkości zawsze powodują przesunięcia układu.
Aby ograniczyć wpływ przesunięć układu podczas korzystania z płynnych miejsc na reklamę, zalecamy:
- Rozmiar
fluidużywaj tylko w przypadku slotów poniżej talii. - Pobieraj elastyczne boksy jak najwcześniej, aby zminimalizować ryzyko, że użytkownik przewinie je do widocznego obszaru, zanim zmieni się ich rozmiar.
Zwijanie i rozwijanie boksów reklamowych
Metoda collapseEmptyDivs() pozwala zwinąć elementy div boksu reklamowego, aby nie zajmowały miejsca na stronie, gdy nie ma treści reklamy do wyświetlenia. Należy jednak zachować ostrożność podczas korzystania z tej funkcji, ponieważ może ona powodować niezamierzone zmiany układu. Jak już wspomnieliśmy w poprzedniej sekcji, zwijanie i rozwijanie boksów reklamowych może powodować zmiany układu w 2 różnych momentach cyklu życia reklamy.
Jeśli chcesz korzystać z tej funkcji, możesz ograniczyć wpływ zmian układu, korzystając z historycznych danych o wypełnieniu z raportów Ad Managera, aby wdrożyć te sprawdzone metody:
- Miejsca, które prawdopodobnie zostaną wypełnione, powinny być zawsze rozwinięte.
- Miejsca, które prawdopodobnie nie zostaną wypełnione, powinny być zawsze zwinięte.
Przykładową implementację znajdziesz w artykule Zwijanie pustych boksów reklamowych.