„AMP for Email” czyli przeglądanie witryn w skrzynce Gmaila

Google dodaje wsparcie technologi przyspieszonych stron mobilnych AMP do Gmaila, aby można było przeglądać całe witryny w skrzynce odbiorczej poczty elektronicznej, a do tego e-maile staną się jeszcze bardziej interaktywne.

AMP for Email (Google)

Nacisk firmy Google na szybkie ładowanie treści internetowych nie jest niczym nowym. W styczniu tego roku firma zmodyfikowała swoje algorytmy wyszukiwania, aby zwiększyć ranking dla stron AMP w wyszukiwarce Google. Dzisiaj pojawiła się nowa opcja wizualnej prezentacji w wynikach wyszukiwania AMP Stories, która ma jeszcze bardziej spopularyzować ten standard.

Technologia AMP (z ang. Accelerated Mobile Page) została wdrożona w 2016 roku jako otwarty standard, który webmasterzy mogą wykorzystać, aby strony ładowały się szybciej i wydajniej dla użytkowników urządzeń mobilnych.

Obecnie firma wdraża tę samą technologię w Gmailu, odpowiednio nazwaną AMP for Email (czyli AMP dla poczty e-mail). Usługa AMP dla poczty e-mail pozwoli tworzyć wiadomości bardziej interaktywne i angażujące. Taka technologia da marketerom i nie tylko narzędzie, które pozwoli serwować wciąż aktualne treści w wiadomości e-mailowej. Innymi słowy, w e-mailu mogą znaleźć się treści, które z czasem mogą się dynamicznie zmieniać i aktualizować.

Przykładem zwiększonej interaktywności będzie na przykład dodanie dynamicznej opcji RSVP dla zaproszeń na wydarzenia, wypełnianie formularzy bezpośrednio w e-mailu oraz przeglądanie całych witryn internetowych (oczywiście tych dostępnych w formacie AMP) w skrzynce e-mailowej!

Oczywiście nowa technologia będzie open source’owa, więc prawdopodobnie pojawią się kolejne ulepszenia AMP oraz narzędzia do tworzenia tego typu e-malingów.

AMP for Email - przykład zastosowania
AMP for Email – przykład zastosowania

Nowa technologia serwowania e-maila brzmi ekscytująco, ale chwilę bedziemy musieli poczekać, zanim stanie się standardem. Firma Google nie wydała jeszcze ostatecznej ETA, która ma się pojawić jeszcze w tym roku. Programiści mogą już teraz uzyskać dostęp do tej funkcji za pośrednictwem witryny GSuite.

Specyfikację AMP for Email można znaleźc na Githubie: AMPHTML Email.

Oto przykład kodu źródłowego e-maila w technologii AMP for Email:

<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js">&lt'/script>
<!-- The AMP4email boilerplate. -->
<style amp4email-boilerplate>body{visibility:hidden}</style>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<style amp-custom> html{font-family: 'Roboto';}
...
</style>
</head>
<body>
<h2>Hello dear user,</h2>
<div class="photo-gallery">
<div class="text">Photos from your latest trips:
<span [text]="+selectedSlide + 1">1</span>/4</div>
<amp-selector layout="container" name="carousel-selector"...>
<amp-carousel controls width="430" height="80">
<amp-img ...></amp-img>
...
</amp-carousel>
</amp-selector>
<amp-carousel ...>
<amp-img ...></amp-img>
...
</amp-carousel>
<div class="trip-location">Please rate your trip location:</div>
<form id="rating" class="p2" method="post" ...>
<fieldset class="rating">
<input name="rating" type="radio" id="rating1" value="1" .../>
<label for="rating1" title="1 stars">★</label>
...
</fieldset>
<div submit-success>
<template type="amp-mustache">
<div class="text">Thanks for rating {{rating}} star(s)!</div>
</template>
</div>
</form>
</div>
</body>
</html>
[Full example in AmpByExample’s Playground]

źródła: Google The Keywords – Bringing the power of AMP to Gmail, G Suite Developers Blog