Guida allo sviluppo di in-page HTML5

Aggiungere il componente Enabler HTML5

Il componente Enabler è la libreria di codice di base di Studio. Può essere considerato il cervello della creatività. Tutte le chiamate agli altri componenti rich media e all'API passano attraverso l'Enabler La libreria Enabler è un componente obbligatorio per tutte le creatività rich media. Aggiungendo questo componente, garantisci automaticamente che la creatività:

  • Includa la funzionalità di monitoraggio standard per metriche quali il tempo di visualizzazione, il numero di impressioni, il tempo di interazione e altre metriche standard.
  • Sia in grado di gestire funzioni più complesse come le funzionalità video e di espansione.
Quando crei un annuncio con Google Web Designer, il componente Enabler è incluso automaticamente nell'ambiente Display & Video 360. Non è necessario aggiungere alcuna porzione del codice mostrato sotto.

Aggiungere il componente Enabler

Al tag <head> del file HTML, aggiungi un tag di script come collegamento al componente Enabler:

<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>

In questo modo, viene fornito un oggetto singleton nello spazio dei nomi globale denominato Enabler. Per richiamare metodi su questo oggetto, richiama semplicemente Enabler.isInitialized(), Enabler.exit(), e così via.

Impostare le dimensioni della creatività

A differenza delle immagini o dei video, i documenti HTML non hanno dimensioni proprie. Per mostrare l'annuncio nel formato corretto, aggiungi un meta tag per le dimensioni dell'annuncio al file HTML nella sezione dell'intestazione.

Copia il meta tag di esempio riportato di seguito e modifica la larghezza e l'altezza in modo che corrispondano alle dimensioni della creatività.

Esempio di meta tag per le dimensioni dell'annuncio per una creatività 300 x 250

<meta name="ad.size" content="width=300,height=250">

Metodi opzionali: impostare contrassegni espandibili

Esistono alcuni metodi opzionali per impostare il comportamento di annunci espandibili. Se devi utilizzare uno di questi metodi, inseriscilo prima del codice di inizializzazione dell'Enabler sotto. I metodi sono i seguenti:

  • Enabler.setExpandingPixelOffsets(left:number, top:number, opt_expandedWidth:number, opt_expandedHeight:number)
    Imposta gli offset di fase per gli annunci espandibili.
  • Enabler.setIsMultiDirectional(value:Boolean)
    Consente all'annuncio di espandersi in più direzioni.

  • Enabler.setStartExpanded(startExpanded:Boolean)
    Quando l'annuncio viene caricato, carica l'espansione già aperta, invece di attendere l'espansione da parte dell'utente.

    Scopri di più su questi metodi nell'SDK HTML5 di Studio.

Attendere l'inizializzazione dell'Enabler

Nessun elemento dell'annuncio deve venire eseguito in automatico prima dell'inizializzazione dell'Enabler. Ciò garantisce il corretto caricamento di ogni elemento, oltre a consentire l'accesso ai metodi dell'Enabler prima che un utente interagisca con l'annuncio.

Nel file JavaScript, verifica che l'inizializzazione dell'Enabler sia avvenuta tramite il metodo isInitialized, che restituisce una risposta di tipo "true" o "false". Se restituisce true, esegui una chiamata per avviare la funzione, in questo esempio enablerInitHandler(). Nel secondo caso, effettua una chiamata di riserva che esamini l'evento INIT dell'Enabler.

// If true, start function. If false, listen for INIT.
window.onload = function() {
  if (Enabler.isInitialized()) {
    enablerInitHandler();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
  }
}

function enablerInitHandler() {
  // Start polite loading, or start animation,
  // load in your image assets, call Enabler methods,
  // and/or include other Studio modules.
}

Una volta inizializzato l'Enabler, avvia l'animazione, carica gli asset immagine e richiama i metodi di monitoraggio oppure includi altri moduli di Studio.

Aggiornare il componente Enabler

Quando viene rilasciata una nuova versione dell'Enabler, vedrai un messaggio di avviso indicante che la versione del componente usata dalla creatività è obsoleta nell'interfaccia utente di Studio. Per eseguire l'upgrade alla versione più recente dell'Enabler, carica nuovamente l'asset HTML principale della creatività.

È stato utile?

Come possiamo migliorare l'articolo?

Hai bisogno di ulteriore assistenza?

Prova i passaggi successivi indicati di seguito:

Ricerca
Cancella ricerca
Chiudi ricerca
Menu principale
1242414669962674263
true
Cerca nel Centro assistenza
true
true
true
true
true
74220
false
false