Design Marketing Modelli How-to AMP
~ 8 minuti letti
2 commenti
46137 visualizzazioni
valutalo
23 giugno 2019

Come Creare AMP-carousel per le Tue E-mail con Stripo

Stripo / Blog / Come Creare AMP-carousel per le Tue E-mail con Stripo

Da marzo, Google ha rilasciato il suo AMP per le email e a partire dal 2 luglio invece, sarà disponibile anche per gli utenti di G-Suite e sarà "attivo" di default per tutti gli utenti di Gmail.

Sappiamo che ciò consentirà ai destinatari di aggiungere elementi desiderati ai carrelli, applicare l'effetto lightbox alle immagini e così via. Naturalmente, tutte queste azioni possono ora essere selezionate direttamente nelle e-mail.

Questa è la nuova era dell'e-mail marketing che, di fatto, porta a grandi cambiamenti: gli ESP ora devono modificare i loro tipi di protocollo, i destinatari devono capire che le e-mail ora sono  versioni ridotte dei siti web e sono quasi funzionali come il sito stesso, e noi come  “venditori” di email dobbiamo acquisire nuove capacità di codifica. Tutti questi cambiamenti richiedono molto tempo.

Ridurre il tempo speso per la produzione di e-mail automatizzando la maggior parte dei processi di creazione è sempre stato l'obiettivo principale di Stripo.

Pertanto, ci impegnamo ad automatizzare la creazione di e-mail con AMP. Il 18 giugno abbiamo pubblicato il nostro blocco "AMP-carousel" drag-and-drop.

Building-AMP-carousel-with-Stripo_Simple-Carousel

Prima di introdurre la guida, desidero porre l’accento sui vantaggi derivanti dalla creazione di e-mail AMP con Stripo.

Perché creare email AMP con Stripo:

  1. Non è necessario aggiungere alcun elemento del codice AMPHTML (all'intestazione dell'email);
  2. Nessuna abilità di codifica richiesta - si utilizza un elemento già preparato;
  3. Ti permette di risparmiare tempo: basta inserire i collegamenti alle immagini in questo modulo di contenuto;
  4. Per ogni singola immagine nel tuo AMP-carousel che costruisci con noi, puoi impostare un link che porterà i lettori direttamente alle rispettive pagine del tuo sito web.

Guida su come creare AMP-carousel con l'editor di Stripo

Sono necessari solamente due passaggi per creare un'immagine AMP-carousel con Stripo:

Fase 1. Come costruire l’AMP-carousel

  • Trascinare il blocco AMP-carousel nel modello di email HTML con cui stai lavorando;

Building AMP Carousel_AMP Block

Vedrai che questo elemento avrà il simbolo "⚡HTML" vicino. Ciò significa che questo elemento sarà mostrato solo nelle email AMP e sarà nascosto nei client di posta elettronica che non supportano AMP. 

Dovremo creare un fallback per altri destinatari, ma ne parleremo più tardi.

AMPHTML-odule-in-Email

  • fare doppio clic per attivarlo nel pannello delle impostazioni;
  • ora, nel pannello delle impostazioni, sarà necessario attivare il tasto "Display" se si desidera mostrare piccole immagini di anteprima;
  • impostare la larghezza per le immagini di anteprima;

Image Preview Button_It

  • caricare l'immagine 1;
  • premere il testo ALT;
  • incollare un collegamento al rispettivo articolo del prodotto;

Uploading Images and Adding Links_Building AMP Carousel

  • premere il pulsante "Aggiungi slide";

Adding New Slides Button_Building AMP Carousel

  • seguire lo stesso procedimento con tutte le altre immagini;
  • verificare se le dimensioni di tutte le immagini corrispondono. Se non corrispondono, ritagliale con l’aiuto del nostro editor di foto;
  • fatto!

Dragging-Image-AMP-carousel

Nota bene:

Ho aggiunto 16 immagini e su Gmail e altri dispositivi hanno funzionato molto bene.

Fase 2. Costruire un fallback per altri destinatari

Quindi, ora che tutti i nostri destinatari che utilizzano Gmail vedranno questa sequenza di immagini, dobbiamo pensare a coloro che preferiscono altri client di posta elettronica.

Per impostazione predefinita, l’AMP-carousel che abbiamo appena creato funziona bene sui desktop in Gmail.

Dobbiamo costruire un fallback per gli altri.

In questo caso, esistono due tipologie di fallback:

Tipo 1: Sequenza interattiva

È supportato solo dai dispositivi Apple e da Yahoo! Mail.

  • creare una normale sequenza di contenuti con FreshInbox;
  • copiare il codice da incorporare;
  • trascinare il blocco HTML nel modello di email desiderato;
  • cliccare due volte per attivare l'editor di codice;
  • nell'editor del codice, incollare il codice;
  • chiudere l'editor di codice;

The-Close-the-Code-Editor-Button_Building-AMP-Emails-with-Stripo

  • cliccare due volte su questo modulo all’interno del modello per attivare il pannello delle impostazioni;
  • nel pannello delle impostazioni, nella riga "Includi in", selezionare l'opzione "HTML". In questo modo, ci si assicura che questo modulo di contenuto venga visualizzato solo in quei client di posta elettronica che non supportano AMP per le email.

Include in Traditional HTML_Building AMP Carousel

Ciò significa che ogni client di posta elettronica decide quale versione del tuo carousel mostrare!

Ricorda:

Se il client di posta elettronica di un destinatario non supporta questo tipo di interattività, vedrà solo la prima immagine.

Per altre informazioni su come creare un carousel di immagini interattive, ti preghiamo di leggere il post presente nel blog.

Tipo 2. Moduli statici contenenti informazioni sul prodotto

  • trascinare una struttura a 2 colonne nel modello di email;
  • rilasciare il blocco immagine nella prima colonna;
  • caricare un'immagine desiderata;
  • rilasciare il blocco di testo nella seconda colonna;
  • applicare al testo un carattere adatto;
  • nel pannello delle impostazioni, nella sezione "Includi in", selezionare l'opzione "HTML". Come abbiamo detto, facendo ciò, ci si assicura che questo modulo di contenuto sarà mostrato solo in quei client di posta elettronica, che non supportano AMP per le email.

Product-Content-Modules_Building-AMP-Emails

Puoi aggiungere tutti i moduli del prodotto alla tua email che desideri. Per ulteriori informazioni su come risparmiare tempo quando si creano elementi di posta elettronica simili, si prega di leggere il post presente nel blog, nella sezione "Copia e sposta gli elementi".

Nota importante:

Una volta selezionata l'opzione "Includi in HTML", l'elemento scelto verrà mostrato a tutti i client di posta elettronica, che supportano solo il tipo di HTML-mime tradizionale.

Una volta selezionata l'opzione "Includi in AMPHTML" (⚡HTML), l'elemento scelto verrà mostrato in tutti i client di posta elettronica che supportano il tipo di MIME AMPHTML (text-x-amphtml).

Se non è stato impostato nessun particolare elemento di posta elettronica, l’elemento sarà mostrato su tutti i dispositivi e tutti i client di posta elettronica. 

Seguendo questa semplice procedura, abbiamo creato un AMP-carousel semplice: utilizzando immagini senza descrizioni. Funziona alla perfezione quando mostri alcuni oggetti di uno stesso tipo o lo stesso prodotto visto da diverse angolazioni.

Ma cosa succede se hai bisogno di una sequenza complessa con immagini più informative e pulsanti "finti" posizionati sulle foto stesse? Puoi applicarli grazie al nostro editor che consente di aggiungere testo alle immagini e applicare filtri multipli ;)

Creare AMP-carousel con descrizioni e "pulsanti" sulle immagini

Quindi, prima di tutto, è necessario creare un normale AMP-carousel come descritto nel paragrafo precedente. Ora, passiamo al design delle sequenze:

a) scrivere la copia sulle immagini

  • una volta caricata un'immagine, aprire l'editor di foto; 

Editing Image Button_Building AMP Carousel

  • nel pannello delle impostazioni dell'editor di foto, scegliere l'opzione "ATEXT" per posizionare la copia sulle immagini. L'editor permette l’utilizzo di circa 1000 caratteri;

Embedded Photo Editor_Stripo

  • scegliere il tipo di carattere e il colore;
  • nell'angolo in alto a destra dell'editor, fare clic sul pulsante "applica" per salvare i parametri impostati.

b) aggiungere un "pulsante" CTA sulle tue immagini

  • prima di tutto, è necessario preparare questo pulsante - il formato dell'immagine deve essere SVG o qualsiasi altro a sfondo trasparente;
  • nell'angolo in alto a sinistra nel pannello delle impostazioni, fare clic sul pulsante "Apri" (Open);
  • selezionare l'opzione "sovrapponi immagine" (Overlay Image);

Adding Second Image in Embedded Photo Editor

  • caricare l'immagine scelta per il pulsante;
  • posizionarla esattamente dove vuoi vederla nella tua sequenza;
  • impostare le dimensioni; 
  • cliccare sul pulsante "salva" per salvare le modifiche apportate sulla sequenza.

Save Image Button in Embedded Photo Editor

Ecco quello che abbiamo appena realizzato insieme:

Building-AMP-carousel-with-Stripo-Images-with-Button

I client di posta elettronica che supportano AMP oggi sono:

  • Gmail Desktop — già lo fa;
  • Mail.ru — già lo fa;
  • Yahoo, AOL e Outlook lo faranno molto presto.

Conclusioni

Abbiamo appena creato 2 sequenze di immagini con AMP-carousel, senza aprire l'editor di codice HTML. La slide di immagini mostra i tuoi prodotti da diverse angolazioni o gli elementi più recenti dalla tua collezione. E ciascuna foto che scorre, una volta cliccata, indirizzerà i destinatari alle rispettive pagine del tuo sito web. 

Questo è un buon modo per ravvivare le tue e-mail, per interagire meglio con il tuo pubblico e rendere le e-mail più funzionali.

Per sapere come visualizzare in anteprima ed esportare le tue email AMP, leggi i rispettivi paragrafi nel nostro post presente sul blog.

Creare e-mail potenziate tramite AMP è un gioco da ragazzi se si utilizza il creatore di modelli di e-mail di Stripo ;)

Tieni presente che è necessario essere sulla whitelist di Google per poter inviare email AMP.

Prova Stripo

Elly Peers 1 anno fa

How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks

Hanna Kuznietsova ha commentato Elly Peers 1 anno fa

Hello, Elly. Thank you for your question. If your ESP or a recipient's email client is not on the list, he or she will see just the traditional HTML version of your email. And AMP element will be just cut off. List of ESPs that currently support AMP: 1. eSputnik — via the API method only. The SMTP method will be added soon; 2. Amazon SES and PinPoint — via the API method only; 3. SparkPost — via the SMTP and API methods; 4. SendGrid — via the API method only; As for email clients, only two do support AMP today: Gmail; Mail.ru. Outlook says they are about to release AMP support this summer. In this blog post, we show how to build and add a fallback in your email to make sure all recipients see your promo emails. Thank you. Hope this helps.

Potresti essere interessato a

← indietro avanti →
Stripo_Building AMP Emails with Stripo_Featured Image
11 marzo · 21 minuti letti
Diferentes formas de construir emails AMP con Stripo

Aggiornamenti dinamici, contenuti in tempo reale, iper-personalizzazione, un nuovo livello di gamification, possibilità di lasciare valutazioni nei moduli aperti, prenotare riunioni, ecc - tutte queste azioni sono ora possibili direttamente nelle caselle di posta elettronica degli utenti con l'utilizzo di email AMP. C'è bisogno di dire che queste email ravvivano le tue newsletter, danno un tocco di freschezza e novità nelle caselle di posta elettronica degli utenti, e di conseguenza aumentano le conversioni, in alcuni casi di 5 volte? Ma...

Design Marketing Modelli How-to AMP
Stripo Notification Emails
01 marzo · 14 minuti letti
​​​​​​​Esempi di Email di Notifica e Linee Guida da seguire

Le email di notifica sono il modo migliore e più semplice per informare i clienti dei cambiamenti che sono avvenuti o che stanno per avvenire. Queste email hanno il più alto tasso di apertura. Ma anche qui abbiamo bisogno di seguire alcune linee guida quando progettiamo le email per non perdere la fiducia degli abbonati. Questo modello di email di notifica è ben strutturato, contiene tutte le caratteristiche necessari Usalo Abbiamo messo insieme i migliori esempi di email di notifica...

Design Marketing How-to
Rimani sempre informato sulle ultime notizie, alle guide, agli articoli e alle tecniche relativi all'email marketing