Co to jest kontrola wczytywania?
Jest to funkcja, która opóźnia ładowanie zasobów kreacji (np. obrazów) do czasu zakończenia wczytywania strony nadrzędnej.
 |
Strona jest wczytana w 20%: wyświetlają się początkowe treści. |
 |
Strona jest wczytana w 50%: nadal wyświetlają się początkowe treści, brak dodatkowych aktywności. |
 |
Strona jest wczytana w 100%: wyświetlają się dodatkowe treści i aktywności. |
Studio nie wymaga stosowania kontroli wczytywania, ale mogą jej wymagać specyfikacje wydawcy.
Gdy stosujesz tę funkcję, możesz zaprojektować kreację z początkowym wstępnie wczytywanym obrazem, poczekać na zakończenie wczytywania strony, a następnie wczytać dodatkowe zasoby (takie jak obrazy, animacje czy filmy).
Konfigurowanie kontroli wczytywania w Google Web Designer
Gdy projektujesz kreacje w Google Web Designer, nie musisz dodawać żadnego kodu. Podczas publikowania pliku (lokalnie lub bezpośrednio do Studio) zaznacz pole wyboru Kontrola wczytywania w sekcji Ustawienia okna dialogowego publikowania:
Używanie wstępnie wczytywanego obrazu
Jeśli podczas oczekiwania na wczytanie strony chcesz wyświetlić obraz początkowy, użyj modułu obsługi handleAdInitialized. Więcej informacji
Konfigurowanie kontroli wczytywania za pomocą kodu JavaScript
Dodaj ten kod do pliku JavaScript po kodzie inicjowania komponentu Enabler. Sprawdza on, czy strona została wczytana za pomocą metody isPageLoaded komponentu Enabler, która zwraca wartość prawda lub fałsz. Jeśli wartość to prawda, wywołaj funkcję niestandardową, która wczytuje kreację (w tym przykładzie jest to politeInit). Jeśli wartość to fałsz, poczekaj na zdarzenie PAGE_LOADED komponentu Enabler przed wywołaniem funkcji politeInit.
Fragment kodu kontroli wczytywania
if (Enabler.isInitialized()) {
init();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}
// Uruchamia się, gdy komponent Enabler jest gotowy.
function init() {
if (Enabler.isPageLoaded()) {
politeInit();
} else {
Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
}
};
// Uruchamia się po całkowitym wczytaniu strony.
function politeInit(){
// Dodaj kod, by ukryć wczytywany obraz lub animację i załadować zasoby
// kreacji lub rozpocząć animację kreacji.
};
Używanie wstępnie wczytywanego obrazu
Jeśli podczas oczekiwania na wczytanie strony chcesz wyświetlić obraz początkowy, możesz załadować wstępnie wczytywany obraz, a następnie ukryć go po wystąpieniu zdarzenia PAGE_LOADED. W przykładowych plikach wczytywany obraz ma nazwę „loading.gif”, a jego identyfikator elementu div to „loading_image_dc”.