Non perderti una notizia!

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Sì, voglio ricevere aggiornamenti sulla formazione e sugli eventi di MailUp.
Ricevi aggiornamenti
su Messenger
10 min
  • 12

Video sì o video no nelle email? Per rispondere alla domanda, è utile gettare uno sguardo oltreoceano dove – ci informa un articolo del Content Marketing Institute – il 76% di chi inserisce video nelle email ottiene click-through rate molto più alti oltre a registrare una maggiore propensione all’acquisto da parte dei prospect, quantificata in una percentuale del 72%.

Scarica l'ebook "Video o GIF animate"?

In realtà, la domanda era già emersa, scontrandosi sia con l’impossibilità di molti client di supportare video, sia con l’assenza di una valida alternativa. Oggi la situazione è cambiata e, sulla base di ricerche approfondite, possiamo finalmente dire che i video si possono usare con successo all’interno di una campagna di email marketing.

HTML5: la soluzione ora c’è!

Oltre all’aggiornamento di nuovi client di posta e di browser, l’arrivo dell’HTML 5 ha reso possibile inserire video nelle email, visualizzando il contenuto in diversi client e browser, permettendo così la scelta migliore. Nel nostro ebook dedicato, trovi cinque idee per piegare i vantaggi dell’HTML 5 al tuo business.

Storicamente, l’uso di Adobe Flash è sempre stato scoraggiato per l’impossibilità di supportare qualsiasi client di posta e, quindi, nessun supporto per il video in un’email. L’HTML5, invece, offre un supporto migliore: con Apple Mail e Outlook (prima ancora Hotmail) è possibile la visione del video direttamente nella casella inbox. Ma le novità non sono finite. Nei client che non consentono la visualizzazione del video, comparirà un’immagine alternativa (immagine fallback) – specificata nel codice HTML – a cui è linkata una pagina web per riprodurre il contenuto video da browser. Ora che conosciamo i vantaggi di HTML5, vediamo quali sono le operazioni dietro a una campagna email con un video incorporato.

Come preparare file video 

L’operazione di copiare e incollare il codice da YouTube (e simili) non rappresenta la soluzione ideale. L’inserimento di un video nell’email richiede qualche operazione in più. L’HTML5 arriva in nostro soccorso, perché il codice permette la visualizzazione dei file in diversi formati: il client (di posta o il browser) può scegliere quello adatto. Per esempio, Firefox preferisce il format video .ogv.

Come si preparano questi file video e quanto tempo occorre? Per fortuna, è possibile convertire il video in due diversi formati usando tool di conversione come Online Convert. Ecco le operazioni che spesso vengono richieste:

  • Trova il file originale del video: dovrebbe essere in MP4 (o può essere salvato come file MP4)
  • Se il video è già stato caricato su YouTube, effettua il login nel tuo account e scarica la versione MP4
  • Usa il file MP4 come base per generare i file *.ogv  e *.webm
  • Le tre versioni del video sono quelle necessarie per il codice HTML
  • Crea un’immagine alternativa del video (fallback image), per esempio con estensione .jpg
  • Nel nostro test, questa è l’immagine usata
  • Carica i file in un’area web accessibile (come una cartella del tuo sito web).

Scrivere il codice HTML5 per il video

Ora sei pronto per scrivere il codice della tua email.  O meglio, generarlo, servendoti di un servizio come Video for Everybody Code Generator.

Fallback image

Nel messaggio usato per i nostri test, questo è il codice relativo al video:

<!– “Video For Everybody” http://camendesign.com/code/video_for_everybody –>
<video controls=”controls” poster=”https://dl.dropboxusercontent.com/u/18351710/fallback_image_video_email.jpg” width=”500″>
<source src=”https://dl.dropboxusercontent.com/u/18351710/mailupIntro.mp4″ style=”width:500;”>
<source src=”https://dl.dropboxusercontent.com/u/18351710/mailupIntro.webm” type=”video/webm” style=”width:500;”>
<source src=”https://dl.dropboxusercontent.com/u/18351710/mailupIntro.ogv” type=”video/ogg” style=”width:500;”>
<a target=”_blank” href=”http://b7h8c.s47.it/frontend/nl_preview_window.aspx?idNL=17″ name=”showInBrowser”><img alt=”MailUp Preview” src=”https://dl.dropboxusercontent.com/u/18351710/fallback_image_video_email.jpg” title=”Click to play the video in your browser” width=”500″></a>
</video>
<!– end of video block –>

… dove l’immagine alternativa al video (fallback image) è linkata alla versione HTML del messaggio creato da MailUp.
Se un client di posta non visualizza immediatamente il video, compare questa immagine alternativa linkata alla versione web del messaggio, per definizione mostrata nel browser. Il browser recupererà, mostrandolo, il video.

Ecco l’immagine dell’email che abbiamo usato per i nostri test:

video_in_email_test_message_preview

I video nell’email: cosa fare

  • Prepara il file video nei formati: MP4, OGV e WEBM
  • Crea un’immagine alternativa (fallback image) che sarà mostrata se il video non può visualizzarsi immediatamente  (guarda la tabella)
  • Usa un servizio come Video for Everybody Code Generator per generare il codice HTML
  • Inserisci il codice nell’editor HTML del tuo provider email
  • Linka l’immagine alternativa (fallback image) alla versione web della tua email o, se preferisci, a un’altra pagina.

Ecco fatto!

Video nelle email: cosa abbiamo scoperto

Grazie ai nostri test abbiamo scoperto che:

  • Su Apple Mail, in diversi device, si visualizza il video per intero
  • Sul nuovo Outlook.com il video si visualizza per intero con Internet Explorer 10 e parzialmente con gli altri browser

Tipo di client email

  • Sugli altri client di posta, incluso Gmail, non è possibile visualizzare il video direttamente nella inbox. La buona notizia è che il codice fa sì che sia proposta un’immagine alternativa, quella che abbiamo chiamato fallback image.
  • Avere un’immagine sostitutiva ti permette di costruire un’email che può essere letta su diversi clienti di posta, browser e device mobili. Alcuni dei tuoi destinatari potrebbero rimanere ben impressionati dalla possibilità di visualizzare il video direttamente nella propria casella di posta; per altri, invece, potrebbe essere necessario cliccare l’immagine alternativa per vederlo. Un compromesso più che accettabile! Per i nostri test, abbiamo creato un semplice messaggio che incorpora video usando HTML5 e li testa sui principali e più diffusi client di posta, di webmail e su mobile.

Quanti destinatari vedranno il video nella inbox?

Ora hai un’idea di quali client di posta supportano il video in una email, e sai come usare l’HTML5 per ottimizzare la visualizzazione. Ma quanti dei tuoi destinatari vedranno il video nella inbox? Conoscere quali device e quale sistema operativo è fondamentale: i report statistici di MailUp ti aiutano a rispondere alla domanda.

La sezione dedicata all'analisi per dispositivo

Il 30% delle aperture avviene su dispositivo mobile, di cui per l’80% su iPhone e iPad. Ciò significa che circa il 24% dei destinatari aprono da mobile e gradirebbero poter visualizzare il video. In più, circa il 28% dei clienti da pc usa Apple OS: una percentuale che si somma al totale di quanti usano un client di posta che consente di visualizzare il video direttamente nella inbox.

Sapendo che il 30% dei tuoi destinatari può visualizzare un video direttamente nella inbox e che i rimanenti potrebbero usare il link dell’immagine alternativa, cosa faresti? Raccontacelo qua sotto, nello spazio dedicato ai commenti.

Ti è piaciuto questo articolo? Ne abbiamo molti altri in serbo per te.

Iscriviti ora per rimanere sempre aggiornato sulle novità di email e SMS marketing.

Leggi anche

HTML e CSS: guida introduttiva

Non serve essere programmatori per creare email che funzionino... ma qualche nozione aiuta. Oggi entriamo nell'universo di HTML e CSS, svelandone le caratteristiche base per ...

Continua a leggere

“Compra ora” o “Scopri di più”? Come fare A/B test sulla call-to-action

I bottoni sono da sempre usati dall’uomo per interagire con il mondo fisico. Nella vita di tutti i giorni schiacciamo bottoni per accendere il pc, ...

Continua a leggere

5 principi chiave per far crescere una lista di contatti

Ampliare in modo costante e produttivo il numero di destinatari delle email è fondamentale. Oggi analizziamo i punti teorici fondamentali in grado di guidare le ...

Continua a leggere

8 email promozionali che convertono davvero

Come creare email promozionali che convertano davvero? Ecco 5 consigli da tenere a mente e 8 esempi di promozione da sperimentare subito. Veicolare una promozione per ...

Continua a leggere

Tutorial: come inserire link di ancoraggio nelle email

Aggiungere anchor link in HTML ai messaggi email ne facilita lo scorrimento e la navigazione. Oggi scopriamo come fare, grazie a un breve tutorial. Gli anchor link ...

Continua a leggere

Email deliverability: do’s e dont’s per garantire il recapito delle campagne

Quando un brand invia un’email al proprio cliente, che si tratti di una comunicazione di natura promozionale o transazionale, si dà per scontato che termini ...

Continua a leggere
  • Nuova Cultura

    Bel post sull’integrazione di video in HTML5 nelle newsletter!
    Sarebbe interessante analizzare anche il livello di compatibilità con i più diffusi client di posta (Microsoft Office Outlook, Thunderbird, Mail, ecc.).
    Che ne dite?

  • Marco Massara

    Ciao! nell’articolo c’è proprio una parte dedicata ai Client, nel paragrafo “I video nell’email: cosa fare”

  • Pingback: Salone del Mobile: i 7 consigli per arrivare pronti()

  • Bip Barinprogress

    Mi manca un passaggio…come faccio a linkare la fallback image alla versione web dell’email?

  • Ciao Bip, trovi le indicazioni necessarie nel paragrafo “Scrivere il codice HTML5 per il video” di questo blog post. Ti consigliamo inoltre di utilizzare il servizio Video for Everybody Code Generator (v4e.thewikies.com).
    Buon lavoro

  • Elena Tsareva

    Tutto spiegato bene, fino alla creazione della newsletter. Dove devo inserire i codice html? Ho creato la lettera con mailup, fatto la copia html, ora sono bloccata..

  • Ciao Elena,
    dopo aver fatto la copia HTML, modifica il messaggio con l’editor HTML e inserisci il codice del video nella sezione HTML, nel punto della newsletter che preferisci.

  • Home Decor

    Ho inserito nel convertitore di codici tutti e 3 i formati dei video richiesti + l’immagine, ma mi dice ancora che manca qualcosa e non me lo genera, che faccio?

  • Ciao Home, potresti indicarci esattamente quando compare l’errore e cosa ti comunica?

  • Home Decor

    Ciao, inserisco i link di tutti i miei elementi e mi dice
    NON È STATO TROVATO ALCUN VIDEO CON FORMATO O MIME TYPE SUPPORTATI, questo mi compare dove dovrebbe esserci l’anteprima del mio video.