Инструкция по настройке 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.

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 недель после одобрения заявки, но, по нашему опыту, оно происходит в течение того же дня.