Crea la tua prima e-mail AMP
Important: this documentation is not applicable to your currently selected format websites!
Il formato AMP per e-mail consente ai mittenti di e-mail di utilizzare contenuti AMP nei loro messaggi di posta elettronica e di usufruire di una vasta gamma di nuove funzionalità. Le e-mail scritte in formato AMP possono contenere elementi interattivi, come sequenze di immagini o pannelli a soffietto, e mantenere aggiornati i contenuti del messaggio, mentre i destinatari hanno la possibilità di agire su tali elementi, ad esempio compilando moduli, il tutto senza lasciare la propria casella di posta.
Il formato AMP per E-mail è compatibile con le e-mail esistenti. La versione AMP del messaggio è incorporata nell'e-mail come nuova parte MIME, che si aggiunge a quelle in formato HTML e in testo semplice, garantendo la compatibilità con tutti i client di posta elettronica.
Suggerimento: per un elenco di piattaforme di posta elettronica (ESP), client e fornitori che supportano il formato AMP per e-mail, consultare la sezione Piattaforme e-mail supportate tra le domande frequenti.
Al termine di questa esercitazione, sarai in grado di creare e inviare la tua prima e-mail con contenuti dinamici supportati dal formato AMP. Puoi visualizzare un esempio di codice completo qui.
Iniziare con il codice boilerplate dell'email AMP
Lo strumento playground AMP supporta il formato AMP per e-mail, permettendo di sviluppare, testare e convalidare le e-mail AMP. Aprire Playground AMP e impostarne il formato su AMP for Email nell'angolo in alto a sinistra. Dovrebbe apparire il codice seguente:
<!DOCTYPE html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>
body {
visibility: hidden;
}
</style>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>Hello, I am an AMP EMAIL!</h1>
</body>
</html>
Tale codice contiene i markup e gli elementi di codice minimi richiesti per creare un'e-mail AMP valida. Si possono anche consultare i numerosi esempi di modelli e-mail validi, disponibili nell'elenco a comparsa del menu a discesa in alto a destra.
Iniziamo ad evidenziare alcune notevoli differenze rispetto alle e-mail HTML classiche:
- Le e-mail AMP devono identificarsi come tali includendo i tag
⚡4emailoamp4emailnel loro tag html. - Il tag
<head>deve contenere anche un tag<script>che carica il sistema di runtime AMP.<script async src="https://cdn.ampproject.org/v0.js"></script> - Devono contenere un codice boilerplate CSS per nascondere inizialmente i contenuti fino al caricamento completo del runtime AMP.
<style amp4email-boilerplate>body{visibility:hidden}</style>
Chi ha già lavorato con le e-mail, potrebbe essere perplesso dall'idea di inserire uno script in un'e-mail! Nessun problema, i fornitori di sistemi di posta elettronica che supportano le e-mail AMP applicano severi controlli di sicurezza che consentono l'esecuzione nei propri client solo degli script AMP verificati. Ciò consente alle funzionalità dinamiche e interattive di essere eseguite direttamente nelle caselle postali dei destinatari senza rischi per la sicurezza! Ulteriori informazioni sui markup richiesti per le e-mail AMP sono disponibili qui.
Aggiunta di un’immagine
La maggior parte dei tag HTML utilizzati nelle e-mail possono essere utilizzati anche nelle e-mail AMP. Tuttavia, alcuni di essi, come il tag <img>, vengono sostituiti con un equivalente AMP, <amp-img>.
Il tag <amp-img> richiede che la larghezza e l'altezza di un'immagine siano definite e, a differenza di <img>, il tag <amp-img> deve essere chiuso esplicitamente tramite </amp-img>.
<amp-img
src="https://link/to/img.jpg"
alt="photo description"
width="100"
height="100"
>
</amp-img>
Inoltre, i file GIF sono supportati tramite il tag <amp-anim> .
Poiché le e-mail non sono ospitate sul server dell'utente, gli URL nelle e-mail AMP devono utilizzare percorsi assoluti e essere in formato HTTPS.
Placekitten è un sito web che usa immagini di gattini come segnaposto. Gli utenti hanno la possibilità di scegliere la dimensione delle immagini direttamente nell'URL!
Possiamo includere un'immagine nella nostra prima e-mail aggiungendo il codice seguente.
<body>
<amp-img
src="https://placekitten.com/800/400"
alt="Welcome"
width="800"
height="400"
>
</amp-img>
</body>
Aggiunta di elementi reattivi
Le e-mail possono essere visualizzate su una vasta gamma di dispositivi con schermi delle più svariate dimensioni. AMP facilita tutto questo grazie al suo sistema di layout integrato! Grazie al sistema amp-layout e alle media query, l'implementazione di e-mail con elementi reattivi è facile. Per ridimensionare opportunamente l'immagine del nostro gattino in base alle schermate in cui va collocata, basta aggiungere l'attributo layout="responsive" al componente <amp-image>.
<amp-img layout="responsive" src="https://placekitten.com/800/400" alt="Welcome" height="400" width="800"></amp-img>
Ingrandendo e rimpicciolendo la finestra del browser sarà possibile vedere l'immagine che si adatta alle dimensioni! L'elenco dei componenti specifici del layout supportati è disponibile qui.
Modifica di presentazioni e layout
Con una sola immagine le cose sono abbastanza semplici da gestire, ma cosa succede se vogliamo visualizzarne di più? AMP per e-mail supporta elementi di layout, come pannelli a soffietto e barre laterali.
In questa esercitazione, realizzeremo un esempio che utilizza l'elemento <amp-carousel> per visualizzare le foto di gatti in un messaggio che ne popone l'adozione.
Aggiungere lo script amp-carousel all'intestazione dell'e-mail.
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>
Quindi racchiudiamo la nostra prima immagine tra i tag <amp-carousel>.
<amp-carousel layout="responsive" width="800" height="400" type="slides">
<amp-img
layout="fill"
src="https://placekitten.com/800/400"
alt="Welcome"
height="400"
width="800"
></amp-img>
</amp-carousel>
All'apparenza non è cambiato nulla, e questa è una cosa buona! Abbiamo assegnato al nostro elemento per la sequenza di immagini l'attributo type=slides, il che significa che mostrerà una foto alla volta. Poiché all'interno dei tag abbiamo inserito solo una foto, il sistema non mostra frecce di scorrimento all'utente.
Successivamente, sostituiamo all'interno del componente <amp-carousel> l'immagine del gattino per il segnaposto con le immagini dei gatti da adottare.
<amp-carousel
id="carousel-with-preview"
width="800"
height="400"
layout="responsive"
type="slides"
on="slideChange:AMP.setState({currentCat: event.index})"
>
<amp-img
layout="fill"
src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg"
alt="photo courtesy of Unsplash"
></amp-img>
<amp-img
layout="fill"
src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg"
alt="photo courtesy of Unsplash"
></amp-img>
<amp-img
layout="fill"
src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg"
alt="photo courtesy of Unsplash"
></amp-img>
<amp-img
layout="fill"
src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg"
alt="photo courtesy of Unsplash"
></amp-img>
</amp-carousel>
Ora dovrebbe essere possibile cambiare le foto, facendo clic sulle frecce di scorrimento disponibili sui lati sinistro e destro della sequenza!
Invia messaggi con stile
AMP consente di applicare uno stile all'intestazione del documento inserendovi il tag <style amp-custom>. Inoltre, ora sono utilizzabili classi e pseudo-classi CSS precedentemente vietate. Consultare l'elenco completo qui.
Aggiorniamo il messaggio Hello, AMP4EMAIL world con un titolo reale.
<body>
<h1>Adorable Adoptable Animals</h1>
...
</body>
E poi aggiungiamo alcuni elementi di stile nell'intestazione.
<head>
...
<style amp-custom>
h1 {
font-family: arial;
margin: 10px;
}
.center {
text-align: center;
}
.carousel-preview {
margin-top: 10px;
}
</style>
</head>
Aggiunta di funzionalità dinamiche
Le e-mail tipicamente consentono solo contenuti statici. Grazie ad AMP, le e-mail possono ora offrire un mondo di possibilità del tutto nuove! Gli utenti possono ora compilare moduli, ricevere elenchi di contenuti aggiornati in modo dinamico e interagire con tali contenuti.
Nel seguito di questa esercitazione, useremo il componente <amp-bind> per visualizzare il nome e una descrizione dei nostri gatti in adozione, quando l'utente seleziona la diapositiva di quel gatto. Iniziamo includendo lo script amp-bind nell'intestazione dell'e-mail.
<script
async
custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
></script>
Successivamente, dichiareremo una variabile di associazione AMP "myState" come stringa JSON all'interno di un tag <amp-state>. Dato che la nostra sequenza comprende le foto di quattro gatti, includeremo lo stato per ciascuna di esse.
<body>
<amp-state id="myState">
<script type="application/json">
{
"cats": [
{
"name": "Aakash",
"description": "Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug."
},
{
"name": "Filip",
"description": "Friendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it."
},
{
"name": "Julian",
"description": "Both bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!"
},
{
"name": "John",
"description": "This playful and spirited cat would like to be outside his kennel and will be so happy when he gets to his forever home with more room to move."
}
]
}
</script>
</amp-state>
</body>
Le azioni e gli eventi AMP attivano diversi stati. Nel nostro caso, vogliamo aggiornare lo stato quando un utente fa clic sulle frecce di scorrimento della sequenza. L'elemento amp-carousel attiva un evento slideChange, alla cui ricezione aggiorneremo la variabile currentCat usando AMP.setState.
<h1>Adorable Adoptable Animals</h1>
<amp-carousel
width="800"
height="400"
layout="responsive"
type="slides"
on="slideChange:AMP.setState({ currentCat: event.index} )"
>
...
</amp-carousel>
Questo codice imposta lo stato di currentCat a quello della foto del gatto corrispondente all'indice selezionato nella sequenza. In questo modo, se ci troviamo sulla diapositiva event.index=2, lo stato corrisponderà a quello dell'indice in posizione 2 dell'array.
L'ultima cosa che resta da fare è visualizzare il nome e le descrizioni del nostro gatto. Aggiungere il codice seguente sotto la chiusura del tag amp-carousel.
</amp-carousel>
<div class="center">
<h1>
<span [text]="myState.cats[currentCat].name">Aakash</span> is available for adoption!
</h1>
</div>
L'estensione amp-bind fa uso di espressioni e associazioni per modificare il contenuto in modo dinamico. L'esempio di codice precedente utilizza l'associazione [text] per aggiornare il testo all'interno del tag <span> ogni volta che lo stato viene modificato, valutando l'espressione "myState.cats[currentCat].name".
Occorre anche aggiungere le descrizioni dei nostri gatti dopo il tag </div>!
</div>
<p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p>
<p class="center" [text]="myState.cats[currentCat].description">Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.</p>
</body>
Ora, cambiando la foto del gatto nella sequenza, anche il nome e la descrizione associati dovrebbero aggiornarsi!
Invio di e-mail AMP
Per sapere come inviare e-mail alla propria casella di posta in arrivo, qui sono disponibili ulteriori informazioni sul test delle e-mail AMP
Congratulazioni! Hai appena inviato la tua prima e-mail AMP!
Per sapere come continuare, si consiglia di consultare ulteriori informazioni sui fondamenti di AMP per E-mail.
-