Sviluppare una creatività espandibile con Google Web Designer

Gli annunci espandibili hanno inizialmente le stesse dimensioni dell'area annuncio in cui vengono pubblicati. Quando poi l'utente interagisce (ad esempio, facendo clic su un pulsante), l'annuncio diventa più grande dell'area annuncio, mostrando più contenuti. Per creare un annuncio espandibile in Google Web Designer, inizia da un file vuoto o apri un modello espandibile predefinito, quindi aggiungi il testo pubblicitario, le immagini ed eventuali altri componenti.

Iniziare da zero

Passaggio 1: crea un nuovo file

Per realizzare una nuova creatività espandibile con video in Google Web Designer, procedi nel seguente modo:

1. Apri Google Web Designer e fai clic su File > Nuovo file. Viene visualizzata la finestra "Crea nuovo file vuoto".
2. Seleziona Espandibile nell'elenco Annunci.
3. Seleziona Display & Video 360 come ambiente.
4. Imposta le dimensioni dell'annuncio compresso ed espanso.
5. Dai un nome alla creatività. Questo è il nome del file HTML.
6. Scegli la Posizione sul computer in cui salvare i file di Google Web Designer. Inserisci il percorso relativo alla posizione o fai clic sull'icona della ricerca per accedere al percorso desiderato.
7. Imposta il campo Modalità animazione:
   1. Veloce. Applica l'animazione alla creatività scena per scena. Per ulteriori informazioni, consulta l'articolo relativo alla creazione di animazioni in modalità Veloce nel Centro assistenza Google Web Designer.
   2. Avanzata. Applica l'animazione a singoli elementi nella rispettiva sequenza temporale. Per ulteriori informazioni, consulta l'articolo relativo alla creazione di animazioni in modalità Avanzata nel Centro assistenza Google Web Designer.
8. Fai clic su OK.

Google Web Designer crea le pagine compresse ed espanse iniziali (chiamate pagina banner e pagina espansa). Viene aggiunto automaticamente un evento Area tocco nella pagina compressa, per espandere l'annuncio, e un evento Chiudi area tocco in una pagina espansa per comprimere nuovamente l'annuncio. Viene aggiunto automaticamente anche il codice iniziale necessario per far comunicare l'annuncio con l'ad server e raccogliere le metriche di monitoraggio.

Passaggio 2: configura la pagina banner

Per configurare l'annuncio compresso nella pagina banner, procedi nel seguente modo:

1. Importa immagini trascinandole nello stage o trascinale dal riquadro Raccolta di asset.
2. Crea animazioni oppure aggiungi alla pagina componenti personalizzati o integrati. (facoltativo)
3. Una volta completato il banner, seleziona il componente Area tocco e fai clic sul pulsante "Porta in alto".
4. Salva.

Per fare espandere la creatività tramite rollover del mouse, procedi nel seguente modo:

1. Apri il riquadro Eventi e fai clic sul pulsante + per aggiungere un evento mouseover.
2. Scegli expand-button come Target.
3. Scegli Mouse > mouseover come Evento.
4. Scegli Annuncio di Google > Vai alla pagina come Azione.
5. Scegli gwd-ad nel passaggio Destinatario.

Ulteriori informazioni sull'utilizzo degli eventi in Google Web Designer

Passaggio 3: imposta la pagina espansa

1. Passa alla pagina espansa utilizzando l'indicatore di pagina in fondo allo stage.
2. Importa immagini trascinandole nello stage o trascinale dal riquadro Raccolta di asset.
3. Crea animazioni oppure aggiungi alla pagina componenti personalizzati o integrati. (facoltativo)
4. Salva.

Aggiungere un invito all'azione

1. Assicurati che l'annuncio abbia un pulsante o un altro chiaro elemento visivo di invito all'azione su cui l'utente possa fare clic o che possa toccare.
2. Trascina sullo stage il componente Area tocco dalla cartella Interazione del riquadro Componenti e posizionalo sopra l'invito all'azione.
3. Fai clic sul pulsante del nuovo evento  nel riquadro Eventi.
4. Nella finestra di dialogo dell'evento, seleziona le seguenti opzioni:

   Target	Il componente Area tocco (gwd-taparea_1)
   Evento	Area tocco > Tocco/clic
   Azione	Annuncio Google > Uscita dall'annuncio Nota: un'azione simile, Uscita dall'annuncio (sostituzione URL), non ti consente di modificare l'URL al di fuori della creatività, ad esempio all'interno di Studio o di Campaign Manager 360, e deve essere usata solo per gli annunci dinamici.
   Destinatario	gwd-ad
   Configurazione	ID metriche. Un'etichetta (ad es., "invito all'azione") per rendere i rapporti più semplici da comprendere. URL: l'URL di uscita. Comprimi all'uscita. Per gli annunci espandibili, seleziona l'opzione per comprimere l'annuncio quando l'utente chiude l'annuncio. Metti in pausa contenuti multimediali all'uscita. Seleziona questa opzione per interrompere la riproduzione dei contenuti audio e video quando l'utente chiude l'annuncio. Pagina minimizzata all'uscita. Per gli annunci espandibili, la pagina da mostrare quando l'utente chiude l'annuncio.

   

Passaggio facoltativo: aggiungi un video

Se vuoi aggiungere video alla creatività, utilizza il componente video o il componente YouTube. Se il video è ospitato su YouTube, utilizza il componente YouTube. In caso contrario, utilizza il componente video per i seguenti formati video HTML5 compatibili: 

• .MP4
• .OGG/.Ogv
• .WEBM

Iniziare da un modello

I modelli sono annunci preconfigurati di dimensioni standard che, in genere, utilizzano gli stili e le funzioni più comuni. Puoi creare rapidamente un annuncio efficace e funzionante, sostituendo le immagini e gli altri asset.

Passaggio 1: crea un nuovo file da un modello

1. Seleziona Nuovo da modello… dal menu File. Viene aperta la Galleria modelli.
2. Per trovare i modelli di banner di Google Marketing Platform:
   1. Fai clic su Cerca .
   2. Espandi la sezione Tipi di annuncio, quindi seleziona Espandibile. 
   3. Espandi la sezione Piattaforme, quindi seleziona Display & Video 360.
   4. Chiudi il riquadro dei filtri. Viene aperto un elenco dei layout compatibili.
3. Fai clic su Utilizza layout per selezionare il layout da adottare.
4. Se sono disponibili più opzioni per le dimensioni, seleziona quella che ritieni opportuna.
5. Assegna un nome al nuovo file. (obbligatorio)
6. In via facoltativa, cambia il percorso in cui salvare il file. Puoi inserire il percorso oppure fare clic sull'icona a forma di cartella per cercare la posizione da utilizzare.
7. Fai clic su Crea.

Passaggio 2: aggiungere o sostituire immagini nel modello

I modelli di annunci espandibili di Google Web Designer includono una pagina banner, che corrisponde all'annuncio compresso, e una pagina espansa, che corrisponde all'annuncio espanso. Per impostazione predefinita, vedrai la pagina banner quando crei il nuovo file. Passa alla pagina espansa, utilizzando l'indicatore di pagina in fondo allo stage .

Ogni pagina include asset segnaposto e ID descrittivi per ciascun elemento. Inizia sostituendo ogni asset segnaposto generico con uno appropriato al tuo annuncio. Gli annunci creati da modelli sono completamente modificabili: puoi aggiungere o eliminare asset, componenti ed eventi secondo le tue esigenze per creare un annuncio più personalizzato.

La funzione "Scambia immagine" ti permette di sostituire un'immagine con un'altra contenuta nella Raccolta o con un'immagine caricata. Ciò è particolarmente utile quando sostituisci le immagini stock da un modello.

Per sostituire un'immagine in un annuncio creato da un modello, procedi nel seguente modo:

1. Fai clic con il pulsante destro del mouse sull'immagine da sostituire.
2. Seleziona Scambia immagine… nel menu popup.
3. Nella finestra di dialogo, seleziona un'immagine dalla Raccolta o fai clic sul pulsante Aggiungi per selezionare un'immagine dal computer.
4. Fai clic su OK.

Visualizzare l'anteprima della creatività completata

Per visualizzare l'anteprima dell'annuncio da Google Web Designer, procedi nel seguente modo:

1. In fondo alla schermata, fai clic sul pulsante Anteprima . Google Web Designer riconosce i browser supportati sul tuo sistema e ti permette di scegliere quali utilizzare.
2. Per selezionare il browser in cui vuoi visualizzare l'anteprima del tuo lavoro, fai clic sulla freccia di selezione a destra del pulsante Anteprima e scegli il browser dall'elenco.
3. Durante il caricamento della pagina, controlla l'annuncio compresso.
4. Fai clic sull'invito all'azione per visualizzare l'annuncio espanso.

Passaggio facoltativo: imposta una creatività espandibile multidirezionale

Le creatività espandibili multidirezionali sono in grado di espandersi nella direzione opportuna a seconda del posizionamento in un sito. Segui la procedura riportata sotto per realizzare una creatività espandibile multidirezionale.

Risparmia tempo iniziando dal modello Multi-directional Expand in Google Web Designer. Il modello include molti elementi di codice e di configurazione presenti nella procedura riportata sotto.

Configurazione multidirezionale

Passaggio 1: aumenta le dimensioni dello stage

1. Aumenta le dimensioni della pagina espansa in modo che l'area espansa abbia lo spazio necessario per ogni direzione.

   Ad esempio, se le dimensioni della creatività compressa sono di 300 x 250, la creatività espansa è di 600 x 250; la creatività può espandersi a sinistra o a destra, pertanto devi impostare le dimensioni della pagina espansa su 900 x 250.
   
   

2. Utilizza l'indicatore di pagina per tornare alla pagina banner .
3. Fai clic sul pulsante della visualizzazione di espansione dell'annuncio . 
4. Riposiziona l'area visualizzabile espandibile in modo che l'elemento compresso si trovi al centro. Leggi ulteriori informazioni sull'utilizzo del pulsante della visualizzazione di espansione dell'annuncio nel Centro assistenza Google Web Designer.
5. Passa alla pagina espansa utilizzando l'indicatore di pagina in fondo allo stage.
6. Adegua la posizione degli elementi della creatività alle nuove dimensioni dello stage.

Passaggio 2: aggiungi il codice di posizionamento

1. Fai clic su Vista codice.
2. Scorri verso il basso fino al tag script con ID gwd-init-code: 
   <script type="text/javascript" id="gwd-init-code">
3. Aggiungi il codice per abilitare l'espansione multidirezionale e aggiungere eventi gestiti. Consulta l'SDK HTML5 di Studio per conoscere metodi API e avere esempi.

   Esempio di codice 

   Questo esempio si espande solo verso sinistra e verso destra. Per ulteriori dettagli, esamina l'SDK HTML5 di Studio.

   Enabler.setIsMultiDirectional(true);
   
   // Edit position of elements based on expanding direction.
   function expandStartHandler() {
     var direction = Enabler.getExpandDirection().toString();
     if (direction == 'tr' || direction == 'br') {
       // Add code here to position elements when expanding to the right.
       // Change btnClose to match the ID of your close button, and modify the position.
       btnClose.style.left = '875px';
     } else {
       // Add code here to position elements when expanding to the left.
       // Change btnClose to match the ID of your close button, and modify the position.
       btnClose.style.left = '10px';
     }
   }
   
   Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);

4. Aggiungi il codice per posizionare ogni elemento della creatività per ogni direzione di espansione che intendi supportare.

Una volta completata la creatività, sei pronto per la pubblicazione in Studio.