494 utenti online in questo momento
494 utenti online in questo momento
Benvenuti nella Community degli Inserzionisti Google
star_border

Annuncio Gmail Espanso: crearlo con HTML personalizzato. #OKDisplay

oK-display-mbiagiotti.png

 

In un precedente articolo abbiamo trattato l’utilizzo della tipologia di annuncio Gmail denominata “HTML Personalizzato” evidenziandone le peculiarità e trattando le caratteristiche necessarie per configurare l’annuncio compresso.

 

Procediamo adesso a trattare l’annuncio espanso la cui realizzazione deve seguire determinate regole di formattazione riguardanti le immagini, l’HTML, la gestione dei fogli di stile, l’inserimento di video e l’integrazione di moduli.

 

Per creare l’annuncio espanso è necessario aggiungere un file HTML e una cartella delle immagini nella cartella ZIP:

  • la cartella delle immagini dovrà essere denominata chiamata “images” e contenere tutti i file immagine necessari per l'annuncio espanso;
  • il file HTML denominato "index.html".

 

La cartella delle immagini deve contenere almeno una ma non oltre 100 immagini; la dimensione massima per le immagini è di 650px per larghezza e 1000px per altezza.

 

Il file HTML, invece, deve contenere almeno un URL assoluto (fino a un massimo di 15 caratteri) e tutti i caratteri speciali devono essere codificati in UTF8 e, inoltre, la formattazione di eventuali tabelle dovrà garantire una presentazione coerente su tutti i dispositivi.

 

Non è consentito l'uso di pixel di monitoraggio delle impressioni e di URL di monitoraggio dinamici mentre è possibile utilizzare gli URL di monitoraggio statici per monitorare i clic esterni; non è possibile usare javascript, fogli di stile, filmati flash, HTML5, audio, iframe e GIF animate; è però possibile utilizzare l'attributo "style" all’interno dei tag HTML: background, border-bottom-width, border-top-color, font-size, margin-top, padding-right, background-attachment, border-collapse, border-top-left-radius, font-stretch, max-height, padding-top, background-clip, border-color, border-top-right-radius, font-style, max-width, quotes, background-color, border-left, border-top-style, font-variant, min-height, table-layout, background-image, border-left-color, border-top-width, font-weight, min-width, text-align, background-origin, border-left-style, border-width, letter-spacing, outline, text-decoration, background-position, border-left-width, caption-side, line-height, outline-color, text-indent, background-repeat, border-radius, clear, list-style, outline-style, text-overflow, background-size, border-right, color, list-style-image, outline-width, text-transform, border, border-right-color, direction, list-style-position, overflow, vertical-align, border-bottom, border-right-style, display, list-style-type, overflow-x, white-space, border-bottom-color, border-right-width, empty-cells, margin, overflow-y, width, border-bottom-left-radius, border-spacing, float, margin-bottom, padding, word-break, border-bottom-right-radius, border-style, font, margin-left, padding-bottom, word-spacing, border-bottom-style, border-top, font-family, margin-right, padding-left, word-wrap.

 

E’ anche possibile incorporare l’immagine di un video YouTube che, una volta cliccata, fa iniziare la riproduzione del video in un annuncio lightbox in Gmail: al termine della riproduzione l'utente viene inviato all'annuncio espanso Gmail.

 

Per integrare il video è sufficiente utilizzare un codice come questo: <a href="https://www.youtube.com/watch?v=5vclQoKWwA8"><img src="images/play.jpg" alt="Video"></a>.

 

E’ possibile riprodurre il video in una nuova scheda piuttosto che nella lightbox utilizzzando la classe "nonplayable" come nell’esempio che segue: <a href="https://www.youtube.com/watch?v=5vclQoKWwA8" class="nonplayable"><img src="images/play.jpg" alt="Video"></a>.

 

Vale la pena osservare che AdWords non aggiunge alcun elemento alle immagini di anteprima per indicare che si tratta di video quindi, per dimostrare agli utenti che facendo clic sull'immagine si avvia la riproduzione di un video è necessario che l'immagine di anteprima includa un’apposita indicazione.

 

Chi avesse attivato la monetizzazione dei propri video potrà disattivare la possibilità di vedere comparire degli annunci in overlay deselezionando la casella “Monetizza il mio video” nella scheda Monetizzazione del video in oggetto.

 

Una delle funzionalità più interessanti di un annuncio Gmail con HTML personalizzato è senza dubbio quella di poter integrare un modulo direttamente all’interno dell'annuncio espanso e dunque accorciare la procedura di conversione.

 

Vale la pena osservare che, gestendo dati personali, è necessario includere un link alle norme sulla privacy e rispettare le norme di AdWords.

 

Il modulo può essere creato utilizzando il codice HTML e i CSS supportati utilizzando solo i campi ammessi ovvero:

  • Categoria: Nome, Indirizzo, Città, Provincia, Codice postale, Paese, Indirizzo email, Numero di telefono, Età (13-18, 18-24, 25-34, 35-44, 45-54, 55-64, Oltre 65), Sesso, Orario preferito per il contatto telefonico, Programma o prodotto a cui l'utente è interessato;
  • Formazione: Anno di laurea, Grado di istruzione raggiunto;
  • Annunci economici e locali: Ubicazione del servizio desiderata, Tipo di servizio;
  • Finanze/assicurazioni: Fasce per i campi monetari (0-14.999, 15.000-24.999, 25.000-39.999, 40.000-59.999, 60.000-74.999, 75.000-99.999, Oltre 100.000), Importo del prestito (fascia), Valuta, Tipo di finanziamento (prestito, mutuo, carta di credito), Reddito familiare (fascia), Beni investibili (fascia), Importo della copertura dell'assicurazione sulla vita (fascia), Membro dell'esercito, Di proprietà o in affitto (auto, casa e così via), Valutazione del credito (molto bassa, bassa, discreta, buona, eccellente), Valore dell'immobile (fascia);
  • Auto e motori: Marca/modello automobile;
  • Viaggi: Origine o destinazione, Data di partenza/ritorno;
  • B2B: Azienda, Occupazione, Titolo, Numero di dipendenti (1-10, 10-50, 50-100, 100-500, Più di 500).

 

E’ possibile aggiungere delle convalide del modulo per assicurarsi che gli utenti accedano a informazioni valide:

  • Input non vuoto (<input required type="text">): per assicurarsi che un campo non venga lasciato vuoto;
  • Input di tipo border-Telephone (<input type="text" x-autocompletetype="phone-full">): per assicurarsi che il formato del numero di telefono inserito sia valido;
  • Input di tipo email (<input type="text" x-autocompletetype="email">): per assicurarsi che il formato dell'indirizzo email inserito sia valido;
  • Input di tipo codice postale (<input type="text" x-autocompletetype="postal-code">): per assicurarsi che il formato del codice di avviamento postale inserito sia valido.

Vale la pena osservare che, gestendo dati personali, è necessario includere un link alle norme sulla privacy e rispettare le norme di AdWords.

 


Una volta compressa la cartella in formato ZIP sarà possibile caricarla su AdWords e l’annuncio sarà di fatto acquisito dal sistema e utilizzabile.

 

Bio Marco Biagiotti

Laureato in economia ma ufficiosamente hacker, è socio amministratore di Telemaco, agenzia di marketing in Italia e in Marocco, Top Contributor di Google Ad​W​ords​, formatore e​ autore di libri quali Web Marketing Internazionale, Social Media Advertising e Google ​Data Studio Per Tutti. ​​La potenza di AdWords sia in ottica di pubblicità che di raccolta di informazioni non poteva non sedurlo e coinvolgerlo al punto di aiutare altri che vi si avvicinano.