Creazione di annunci Gmail con HTML personalizzato

Adatto agli inserzionisti esperti, l'HTML personalizzato ti permette di creare annunci diversi dai modelli Gmail esistenti e di inserirvi video e più inviti all'azione. Per creare annunci Gmail con il layout personalizzato, carica i tuoi file HTML personalizzati in AdWords. 

Questo articolo spiega come configurare e caricare i tuoi annunci Gmail personalizzati.

Prima di iniziare

Importante: ricorda che gli annunci Gmail con HTML personalizzato conservano la formattazione dell'URL di destinazione e sono incompatibili con gli URL finali e i modelli di monitoraggio. Consulta ulteriori informazioni sull'utilizzo di URL aggiornati.

 

Scegli la versione di AdWords in uso. Ulteriori informazioni

Istruzioni

Un annuncio HTML personalizzato Gmail è una cartella ZIP contenente tutti i file dell'annuncio compresso ed espanso. Per evitare problemi, presta molta attenzione alle rigide specifiche di formattazione descritte di seguito.

I limiti di dimensione complessivi del tuo annuncio sono i seguenti:

  • Cartella ZIP completa: <1,25 MB
  • Numero di file: <100 file
  • Dimensione del file: <500 kB

Come creare un annuncio compresso

Per l'annuncio compresso, dovrai aggiungere 2 file alla cartella ZIP:

  • l'immagine del logo (denominata "logo.png", "logo.jpg" o "logo.gif")
  • il file di testo (denominato "teaser.txt")

Specifiche dell'immagine del logo

Il file deve essere denominato "logo.png", "logo.jpg" o "logo.gif" e il formato file deve essere PNG, JPG o GIF.

  • Dimensione dell'immagine del logo: <144 x 144
  • Dimensione del file: <500 kB
  • Formati file: PNG, JPG o GIF (immagini non animate)

L'immagine del logo può essere un'icona piccola, un grafico o il logo del brand.

L'immagine verrà visualizzata nel formato quadrato 50 x 50 su dispositivi con risoluzione normale. Per una visione migliore su alcuni schermi, è supportato anche il formato 144 x 144. 

Specifiche del file di testo

Il file deve essere denominato "teaser.txt" e il formato file deve essere TXT. Di seguito è riportato un esempio di un file di testo formattato correttamente.

Inserzionista: Nome dell'attività
Oggetto: Sconti del 20% su tutta la merce da Nome attività
Descrizione: Acquista nuovi prodotti a basso prezzo
URL di visualizzazione: www.example.com
Pagina di destinazione: https://www.example.com/sale 

Nota: segui l'esempio fedelmente. Accertati di aver inserito sia la categoria (ad esempio "Inserzionista") che le tue informazioni specifiche. La tabella seguente riporta il limite di caratteri e ulteriori indicazioni su cosa inserire.

  Limiti di caratteri Cosa includere
Inserzionista 20 Nome o dominio dell'azienda.
Oggetto 25 Il titolo può includere un'offerta, una % di sconto o un annuncio accattivante.
Descrizione 100 La descrizione può essere un breve riassunto o un invito all'azione.
URL di visualizzazione 32 L'URL così come sarà visualizzato nel tuo annuncio
Pagina di destinazione Nessun limite URL di reindirizzamento del teaser utilizzato come URL di destinazione per i clic su "URL breve visualizzato del mittente" quando viene aperto l'annuncio espanso. In questo campo puoi aggiungere un URL di monitoraggio dei clic statico. È la pagina a cui arrivano gli utenti che fanno clic sull'URL di visualizzazione.

 

Come creare il tuo annuncio espanso

Per un annuncio espanso, dovrai aggiungere 1 file HTML e 1 cartella delle immagini nella cartella ZIP:

  • Cartella delle immagini (chiamata "Immagini') contenente i file immagine per l'annuncio espanso
  • File HTML denominato "index.html"

Specifiche della cartella di immagini

  • L'annuncio deve contenere almeno 1 immagine e può contenere fino a 100 immagini. Per incorporare video nel tuo annuncio espanso, passa alla sezione video in basso.
  • Larghezza massima per immagine: 650 px
  • Altezza massima per immagine: 1000 px (Nota. Per annunci più efficaci, si consiglia un'altezza massima di 650 px di altezza per il canvas annuncio complessivo, che include tutto il testo e le immagini)

Specifiche del file HTML

Dati tecnici

  • URL: l'annuncio deve contenere almeno 1 URL assoluto (fino a un massimo di 15 caratteri) e tutti i caratteri speciali devono essere codificati (ad esempio spazi, #)
  • Formattazione: controlla il layout con le tabelle HTML standard per garantire una presentazione coerente su tutti i dispositivi
  • Monitoraggio: è possibile utilizzare gli URL di monitoraggio statici per monitorare i clic esterni. Non è consentito l'uso dei pixel di monitoraggio delle impressioni e degli URL di monitoraggio dinamici. Se utilizzi il modello "annuncio Gmail con HTML personalizzato", ricorda di aggiungere gli URL di monitoraggio che vuoi utilizzare nei file index.html e teaser.txt.
  • Markup: sono supportati il codice HTML (con codifica UTF8), alcuni tag HTML5 ( "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR") e alcuni CSS (solo l'attributo "style" dei tag, ad es. <div style="color: black">)

Markup non consentito

  • JavaScript: i tag <script> vengono automaticamente rimossi dall'annuncio
  • Fogli di stile: i tag <link> vengono automaticamente rimossi dall'annuncio
  • Annunci Flash
  • HTML5: gli unici tag supportati sono "ARTICLE", "ASIDE", "FIGCAPTION", "FIGURE", "FOOTER", "HEADER", "MARK", "SECTION", "TIME", "WBR"
  • Annunci audio
  • iFrame
  • Immagini animate: GIF

CSS supportati

azimuth border-right-color font-size-adjust list-style padding-bottom text-decoration-style
background border-right-style font-stretch list-style-image padding-left text-emphasis
background-attachment border-right-width font-style list-style-position padding-right text-emphasis-color
background-blend-mode border-spacing font-synthesis list-style-type padding-top text-emphasis-style
background-clip border-style font-variant margin pause text-indent
background-color border-top font-variant-alternatives margin-bottom pause-after text-justify
background-image border-top-color font-variant-caps margin-left pause-before text-kashida-space
background-origin border-top-left-radius font-variant-east-asian margin-right pitch text-orientation
background-position border-top-right-radius font-variant-ligatures margin-top pitch-range text-overflow
background-repeat border-top-style font-variant-numeric marker-offset quotes text-transform
background-size border-top-width font-weight max-height richness text-underline-position
border border-width height max-width speak unicode-bidi
border-bottom box-sizing image-orientation min-height speak-header vertical-align
border-bottom-color caption-side image-resolution min-width speak-numeral voice-family
border-bottom-left-radius clear ime-mode mix-blend-mode speak-punctuation white-space
border-bottom-right-radius color isolation object-fit speech-rate width
border-bottom-style direction layout-flow object-position stress word-break
border-bottom-width display layout-grid opacity table-layout word-spacing
border-collapse elevation layout-grid-char outline text-align word-wrap
border-color empty-cells layout-grid-char-spacing outline-color text-align-last writing-mode
border-left float layout-grid-line outline-style text-autospace zoom
border-left-color font layout-grid-mode outline-width text-combine-upright  
border-left-style font-family layout-grid-type overflow text-decoration  
border-left-width font-feature-settings letter-spacing overflow-x text-decoration-color  
border-radius font-kerning line-break overflow-y text-decoration-line  
border-right font-size line-height padding text-decoration-skip  

Aggiunta di un video al file HTML dell'annuncio espanso

  1. Come aggiungere un video

    Un video YouTube può essere incorporato in un annuncio con una finestra di anteprima. Quando un utente fa clic sull'immagine del video, il video viene riprodotto in un annuncio lightbox in Gmail. Una volta terminata la visione del video, l'utente viene rimandato all'annuncio espanso Gmail. Su dispositivi mobili, il video viene riprodotto su video player designato dell'utente (come l'app YouTube o un browser). 

    Istruzioni: per aggiungere un video da YouTube, codifica il link, l'origine dell'immagine e il testo visualizzato di YouTube in modo appropriato per il tuo annuncio. Ad esempio:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0"><img src="images/play.jpg" alt="Video Gmail"></a>

    Nota. Quando visualizzi in anteprima l'annuncio in AdWords, il video di YouTube non viene mostrato né riprodotto nella lightbox.

  2. Come aggiungere un video a una nuova scheda

    Se vuoi riprodurre il video con YouTube in una nuova scheda piuttosto che nella lightbox, imposta la classe come "nonplayable".

    Ad esempio:

    <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" class="nonplayable"><img src="images/play.jpg" alt="Video Gmail"></a>

  3. Importante: includi un pulsante di riproduzione nella tua immagine di anteprima.

    Per dimostrare agli utenti che facendo clic sull'immagine si riproduce un video, l'immagine di anteprima deve includere un certo tipo di pulsante di riproduzione. AdWords non aggiunge alcun elemento alle immagini di anteprima per indicare che si tratta di video.

  4. Rimozione di overlay annuncio dai video incorporati

    Nell'account YouTube ospitato, puoi disattivare gli annunci sulla parte superiore del video. Ulteriori informazioni

Aggiunta di un modulo incorporato al file HTML dell'annuncio espanso

Nota: questa funzionalità è disponibile solo per i clienti autorizzati. 

I moduli HTML negli annunci Gmail abbreviano la procedura di conversione. Crea il modulo con il codice HTML e i CSS supportati, accertandoti di utilizzare esclusivamente i campi presenti nel seguente elenco dei campi consentiti.

Problemi di privacy

Se un modulo è incorporato nell'annuncio, devi includere un link alle norme sulla privacy e rispettare le norme relative alla raccolta e all'utilizzo irresponsabile dei dati di AdWords.

Tutte le informazioni inserite nei moduli ti verranno trasmesse direttamente con i metodi GET o POST. Nessuna informazione viene trasmessa o salvata sui server di Google. Tu sei il responsabile dell'elaborazione dei dati.

Quando crei i moduli negli annunci HTML personalizzati, ricorda che gli utenti potrebbero essere riluttanti o contrari a condividere determinate informazioni, specialmente in ambienti esterni al tuo sito web.

Prima di creare un modulo HTML, poniti i seguenti quesiti:

  • Le informazioni che chiedi sono inutili per fornire un'offerta pertinente all'utente?
  • Se l'informazione cadesse nelle mani sbagliate, potrebbe essere utilizzata per danneggiare l'utente?

Se hai risposto positivamente a una di queste domande, potrebbe non essere opportuno includere moduli HTML nella promozione.

Passaggio 1. Crea il tuo modulo

Di seguito sono riportati i campi ammessi nei moduli HTML per gli annunci Gmail.

Informazioni di base Campi di moduli ammessi
Categoria Nome (nome, cognome)
Indirizzo
Città
Stato
Codice postale
Paese
Indirizzo email
Numero di telefono
Età
13-18
18-24
25-34
35-44
45-54
55-64
65 o più
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
Finanza/assicurazioni
Fasce per i campi monetari:
0 - 14999
15000 - 24999
25000 - 39999
40000 - 59999
60000 - 74999
75000 - 99999
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)
Appartenente alle forze armate
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

Passaggio 2. Aggiungi convalide modulo

Per essere certo che gli utenti accedano a informazioni valide, puoi aggiungere le seguenti convalide del modulo.

Input non vuoto: Per assicurarti che un campo non venga lasciato vuoto, aggiungi "required" nella sezione input <input required type="text" size="25">
Input di tipo border-Telephone*: Per assicurarti che il formato del numero di telefono inserito sia valido, aggiungi "x-autocompletetype="phone-full"". Verrà accettato qualsiasi numero con 10 cifre <input type="text" x-autocompletetype="phone-full" size="25">
Input di tipo "email"*: Per assicurarti che il formato dell'indirizzo email inserito sia valido, aggiungi l'attributo "x-autocompletetype="email"". Verrà accettata qualsiasi stringa di testo nel formato xxx@xxx.xxx. <input type="text" x-autocompletetype="email" size="25">
Input di tipo codice postale*: Per assicurarti che il formato del codice di avviamento postale inserito sia valido, aggiungi l'attributo "postal-code". Verrà accettata qualsiasi stringa che inizia con 5 cifre. <input type="text" x-autocompletetype="postal-code" size="25">

*Se il campo non viene contrassegnato come obbligatorio ("required"), viene convalidato solo se contiene un valore.

Link correlati

Hai trovato utile questo articolo?
Come possiamo migliorare l'articolo?