Інструкція з налаштування Gmail Inbox Actions

Щоб спростити взаємодію користувачів із листами у Gmail, ви можете додати до розмітки листа Gmail Inbox Actions – кнопки, які на десктопі дозволяють користувачеві виконати цільову дію, не відкриваючи емейл. Багато відомих сервісів уже використовують цю можливість: AliExpress та Amazon пропонують відстежити замовлення, Asana – переглянути завдання, Linkedin – прийняти запрошення, Spotify – послухати пісню безпосередньо у вхідних та ін.

Крім того, відкривши лист як на мобільних, так і на десктопних пристроях, користувач теж матиме можливість скористатися такою кнопкою, а також побачити інформацію про магазин, комплект і вартість замовлення тощо.

Види дій у папці вхідних Gmail:

1. Дії одним кліком (One Click Actions) – послухати пісню, прийняти запрошення та ін.

2. Відповідь на RSVP (RSVP Actions) – три кнопки, щоб відповісти на запрошення: Так, Ні або Можливо.

3. Перехід за посиланням (Go-To Actions) – відстежити замовлення, перейти на сайт і т.ін.

Щоб відправляти розсилки з розміткою, вам потрібно:

1. Відповідати вимогам Gmail до відправника. Якщо раніше ви вже отримали дозвіл на використання AMP-елементів у розсилці – це означає, що ви відповідаєте їм: вимоги збігаються.

2. Підготувати та надіслати тестового листа.

3. Отримати дозвіл від Gmail.

Last post 

1. Лист із розміткою Gmail Inbox Actions. Інструкція з підготовки

Для створення розмітки Gmail використовуються мікродані. Мікродані – це специфікація для вбудовування машиночитаних даних у HTML-документи. Вони складаються зі значень (відомих як items), визначених відповідно до словника. Колекція часто використовуваних словників розмітки надається спільнотою Schema.org.

Базовий синтаксис містить itemscope-атрибут для визначення елемента і itemprop-атрибут для опису однієї із властивостей елемента. Типи даних зазначаються за допомогою itemtype-атрибута і можуть приймати значення, визначені у вибраному словнику. Наприклад, Schema.org визначає такі типи, як Person або PostalAddress.

Щоб додати розмітку в емейл, вам треба вставити код у тіло листа. Приклади коду для різних типів розмітки ви знайдете в інструкції від Gmail for Developers.

Розглянемо створення листа з кнопкою для відстеження посилки та інформацією щодо продавця.

Додаємо до листа такий код:

<div itemscope itemtype="http://schema.org/EmailMessage">
    	<!--#if($data.get('additionalInfo').get('trackingUrl').contains('tracking'))--> <!-- (если динамическая ссылка на отслеживание посылки есть, то отображаем весь код ниже, до #else) -->
    	<meta itemprop="description" content="Отследить посылку">
    	<div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
        	<link itemprop="target" href="$data.get('additionalInfo').get('trackingUrl')">
        	<meta itemprop="name" content="Отследить посылку">
        	<link itemprop="url" href="$data.get('additionalInfo').get('trackingUrl')">
    	</div>
    	<!--[endif]---->
    	<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
        	<meta itemprop="name" content="Название компании-продавца">
        	<link itemprop="url" href="Ссылка на сайт компании-продавца">
    	</div>
	</div>
	<div itemprop="customer" itemscope itemtype="http://schema.org/Person">
    	<meta itemprop="name" content="$!data.get('firstName') $!data.get('lastName')">
	</div>
	<div itemscope itemtype="http://schema.org/Order">
    	<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
        	<meta itemprop="name" content="Название компании">
    	</div>
    	<link itemprop="orderStatus" href="http://schema.org/OrderProcessing">
    	<meta itemprop="priceCurrency" content="Валюта">
    	<meta itemprop="price" content="$data.get('totalCost')">
    	<div itemprop="acceptedOffer" itemscope itemtype="http://schema.org/Offer">
        	<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
            	<meta itemprop="name" content="Категория товаров в заказе">
        	</div>
        	<meta itemprop="price" content="$data.get('totalCost')">
        	<meta itemprop="priceCurrency" content="Валюта">
        	<div itemprop="eligibleQuantity" itemscope itemtype="http://schema.org/QuantitativeValue">
            	<meta itemprop="value" content="Количество товаров в заказе">
        	</div>
    	</div>
    	<div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
        	<link itemprop="url" href="$data.get('additionalInfo').get('trackingUrl')">
    	</div>
    	<link itemprop="url" href="$data.get('additionalInfo').get('trackingUrl')">
    	<!--[endif]---->
    	<div itemprop="priceSpecification" itemscope itemtype="http://schema.org/PriceSpecification">
        	<meta itemprop="validFrom" content="2020-11-05T21:00:00-12:00">
        	<meta itemprop="price" content="$data.get('totalCost')">
        	<meta itemprop="priceCurrency" content="Валюта">
    	</div>
	</div>
	<!--#else--> <!-- (если ссылки нет, то отображаем весь код ниже) -->
	<!--[endif]---->
	<div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    	<meta itemprop="name" content="Название компании-продавца">
    	<link itemprop="url" href="Ссылка на сайт компании-продавца">
	</div>
	<div itemprop="customer" itemscope itemtype="http://schema.org/Person">
    	<meta itemprop="name" content="$!data.get('firstName') $!data.get('lastName')">
	</div>
	<div itemscope itemtype="http://schema.org/Order">
    	<div itemprop="merchant" itemscope itemtype="http://schema.org/Organization">
        	<meta itemprop="name" content="Название компании-продавца">
    	</div>
    	<link itemprop="orderStatus" href="http://schema.org/OrderProcessing">
    	<meta itemprop="priceCurrency" content="UAH">
    	<meta itemprop="price" content="$data.get('totalCost')">
    	<div itemprop="acceptedOffer" itemscope itemtype="http://schema.org/Offer">
        	<div itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
            	<meta itemprop="name" content="Категория товаров в заказе">
        	</div>
        	<meta itemprop="price" content="$data.get('totalCost')">
        	<meta itemprop="priceCurrency" content="Валюта">
        	<div itemprop="eligibleQuantity" itemscope itemtype="http://schema.org/QuantitativeValue">
            	<meta itemprop="value" content="Количество товаров в заказе">
        	</div>
    	</div>
    	<!--[endif]---->
    	<div itemprop="priceSpecification" itemscope itemtype="http://schema.org/PriceSpecification">
        	<meta itemprop="validFrom" content="2020-11-05T21:00:00-12:00">
        	<meta itemprop="price" content="$data.get('totalCost')">
        	<meta itemprop="priceCurrency" content="Валюта">
    	</div>
	</div>
	<!--#end-->
JSON
COPY
MORE

У результаті одержувач побачить у своїй пошті такий лист із кнопкою, натиснувши яку, він потрапить на сторінку відстеження статусу доставки:

Відкривши листа, він побачить коротку інформацію щодо продавця і своє замовлення, а також кнопку для його відстеження:

2. Отримання дозволу від Gmail. Інструкція

Щоб відправляти листи з розміткою, необхідно отримати погодження від Gmail. Для цього:

1. Підготуйте тестовий лист з розміткою. Лист і відправник повинні відповідати правилам, викладеним на сторінці Register with Google.

2. Перевірте коректність розмітки в маркап-тестері.

3. Надішліть підготовлений лист на адресу schema.whitelisting+sample@gmail.com.

4. Заповніть форму заявки. Для кожного сценарію використання розмітки слід відправляти окремий лист і окремо заповнювати форму.

Коли заявку буде прийнято до розгляду, з вами поділяться посиланням на документ для зворотного зв'язку.

Якщо у служби підтримки виникнуть запитання або зауваження щодо оформлення вашого тестового листа, їх внесуть у цей документ. Коли заявку буде схвалено, ви також отримаєте повідомлення поштою. Внесення відправника у білий список може тривати до 3 тижнів після схвалення заявки, але за нашим досвідом воно відбувається протягом того самого дня.