Guida allo sviluppo di in-page HTML5

Impostazione di un caricamento "polite" in HTML5 (facoltativo)

Che cos'è il caricamento "polite"?

Il caricamento "polite" ritarda il caricamento degli asset della creatività (come le immagini) fino a quando la pagina principale non è stata caricata completamente.

3-part polite load image: a) website partly loaded b) website fully loaded c) full ad appears including video
blue letter A Caricamento della pagina completato al 20%: vengono visualizzati i contenuti iniziali.
green letter b Caricamento pagina completato al 50%: rimangono i contenuti iniziali e non si verifica nessuna azione aggiuntiva.
red letter c Caricamento della pagina completato al 100%: vengono visualizzati azioni e contenuti aggiuntivi.

Studio non richiede che i file utilizzino il caricamento "polite", ma è possibile che quest'ultimo sia richiesto dalle specifiche del publisher.

Quando utilizzi questa funzione, puoi progettare la creatività con un'immagine di precaricamento iniziale, attendere che la pagina finisca di caricarsi e quindi caricare gli altri asset, come immagini, animazioni o video.

Impostare il caricamento "polite" in Google Web Designer

Se progetti le creatività in Google Web Designer, non devi aggiungere stringhe di codice. Quando pubblichi il file, in locale o direttamente, su Studio, seleziona la casella di controllo Caricamento "polite" nella sezione Impostazioni della finestra di dialogo relativa alla pubblicazione:

Publish dialog in Google Web Designer with Polite Loading checked

Utilizzare un'immagine di precaricamento

Per mostrare un'immagine iniziale mentre attendi il caricamento della pagina, utilizza il gestore handleAdInitializedUlteriori informazioni

Impostare il caricamento "polite" con JavaScript

Aggiungi il seguente codice al file JavaScript dopo il codice di inizializzazione del componente Enabler. Questo codice verifica se la pagina viene caricata utilizzando il metodo isPageLoaded del componente Enabler, che restituisce "true" o "false". Se il valore è "true", esegui una chiamata per avviare la funzione personalizzata che carica la creatività (nel seguente esempio tale funzione è denominata politeInit). Se il valore restituito è "false", controlla che si sia verificato l'evento PAGE_LOADED del componente Enabler prima di eseguire la chiamata a politeInit.

Scarica l'esempio di una creatività con caricamento "polite", quindi apri DCRM_HTML5_inPage_Polite_300x600.html per vedere il codice richiesto per il componente Enabler.

Snippet di codice per il caricamento "polite" 

if (Enabler.isInitialized()) {
  init();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
}

// Runs when Enabler is ready.
function init() {
  if (Enabler.isPageLoaded()) {
    politeInit();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.PAGE_LOADED, politeInit);
  }
};

// Runs when the page is completely loaded.
function politeInit(){
  // Add your code to hide any loading image or animation and load creative  
  // assets or begin creative animation.
};

Utilizzare un'immagine di precaricamento

Per mostrare un'immagine iniziale mentre attendi il caricamento della pagina, puoi caricare l'immagine di precaricamento per poi nasconderla una volta ricevuto l'evento PAGE_LOADED. Nei file di esempio, l'immagine in fase di caricamento viene chiamata "loading.gif" e il relativo ID dell'elemento div è "loading_image_dc".

È stato utile?

Come possiamo migliorare l'articolo?

Hai bisogno di ulteriore assistenza?

Prova i passaggi successivi indicati di seguito:

Ricerca
Cancella ricerca
Chiudi ricerca
App Google
Menu principale
7262904112801398434
true
Cerca nel Centro assistenza
true
true
true
true
true
74220
false
false