Как использовать OneSignal + SendGrid для отправки автоматических рассылок по электронной почте из вашего веб-приложения

Сегодня пользователи ожидают, что компании предоставят беспроблемный многоканальный опыт. Электронная почта может помочь вам оправдать эти ожидания и связаться с пользователями за пределами вашего веб-приложения. Помимо того, что электронная почта хорошо подходит как для транзакционных, так и для маркетинговых сообщений, она является устоявшимся и надежным каналом связи.

Автоматизация ваших кампаний по электронной почте на основе поведения пользователей в режиме реального времени и предпочтений пользователей поможет вам обеспечить персонализированный опыт в любом масштабе. С OneSignal и SendGrid легко отправлять электронные письма на основе определенных триггеров и критериев взаимодействия.

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

В этом руководстве мы покажем вам, как бесплатно интегрировать OneSignal с SendGrid для создания кампаний по электронной почте, напрямую связанных с вашим веб-приложением!

Обзор руководства

Шаг 1. Настройте свою учетную запись OneSignal

Если вы еще этого не сделали, создайте бесплатную учетную запись OneSignal или просто войдите в свою учетную запись.
После входа в систему настройте свою учетную запись, введя название своего приложения или веб-сайта.
Выберите _ Web Push _ в качестве платформы.

Затем нажмите синюю кнопку _ Далее: настроить платформу _.

Веб-конфигурация

На первом этапе настройки выберите _ Типичный сайт _.
В разделе под названием 2. Настройка сайта , введите веб-конфигурацию. Для нашего примера конфиг будет выглядеть так, как на картинке ниже. Обратите внимание, что в целях тестирования мы ввели URL-адрес нашего локального хоста. Если вы делаете то же самое, убедитесь, что вы выбрали вариант ЛОКАЛЬНОЕ ТЕСТИРОВАНИЕ. Это обеспечит обработку _ HTTP _ localhost как HTTPS для тестирования.

Наконец, прокрутите страницу вниз и нажмите Сохранить.
Вы будете перенаправлены на другую страницу с очень важным шагом: нажмите ЗАГРУЗИТЬ ФАЙЛЫ ONESIGNAL SDK и сохраните их на свой компьютер.

В разделе _Добавить код на сайт_ вы увидите серую кнопку, позволяющую скопировать фрагмент кода. Нажмите эту кнопку, чтобы скопировать код и вставить его в код вашего index.html.

Нажмите кнопку Готово.

Шаг 2. Настройте электронную почту с помощью OneSignal и SendGrid

OneSignal и SendGrid имеют интеграцию, которая позволяет вам управлять вашей почтовой кампанией из вашего приложения OneSignal с помощью SendGrid. SendGrid — это надежная платформа доставки электронной почты и облачное решение, которое помогает пользователям отправлять транзакционные и маркетинговые электронные письма тысячам клиентов.

Следуйте инструкциям в этом руководстве, чтобы интегрировать свою учетную запись SendGrid с OneSignal.

Шаг 3. Настройте приглашение по электронной почте для отправки адресов электронной почты пользователей в OneSignal

Метод OneSignal setEmail позволит вам автоматически назначать адрес электронной почты пользователя его записи пользователя. Просмотрите этот Образец электронной почты веб-приложения GitHub, чтобы получить окончательный код, который вам понадобится для настройки приглашения электронной почты и связанных тегов.

Вернувшись в свое приложение, найдите файл index.html — вам нужно немного изменить код JavaScript.
В нижней части тега <script> создайте функцию с именем setEmail(). Внутри этой функции вызовите приглашение, чтобы запросить у пользователя адрес электронной почты.
Наконец, внутри этой функции используйте метод setEmail() OneSignal SDK, чтобы назначить адрес электронной почты, который вы ввели в приглашении, текущему пользователю приложения.

Если вы внимательно посмотрите на наш пример кода ниже, вы заметите, что мы также используем метод OneSignal.sendTag() для автоматического применения тега данных user_name к этой записи.

Теги данных — это пара строковых или целочисленных данных ключ:значение, которые вы можете добавить в код своего приложения, чтобы идентифицировать конкретное пользовательское событие или значение. Их можно использовать для создания сегментов аудитории на основе поведения и предпочтений пользователей в режиме реального времени, для персонализации содержимого сообщений, а также для обогащения вашей внутренней системы данных и предоставления более продвинутой аналитической информации.

В нашем примере мы добавляем ключ user_name, но вы можете добавить любую информацию и столько тегов, сколько вам нужно. Например, вы можете создать тег country: USA, чтобы сегментировать пользователей по странам и создавать кампании по обмену сообщениями, адаптированные для пользователей в США. Чтобы узнать больше о том, как использовать теги данных для автоматизации и персонализации вашей стратегии обмена сообщениями, ознакомьтесь с нашей реализацией тегов данных.

function setEmail() {
    const email = prompt("Please enter your email", "[email protected]");
    if(email !== null) {
        OneSignal.push(function() {
            OneSignal.setEmail(email).then(function(emailId) {
                // Callback called when email have finished sending
                console.log("emailId: ", emailId);
                /*Creating a user_name identifier tag to be used in the email
                Example: OneSignal.sendTag("user_name", "devpato");
                */
                OneSignal.sendTag("user_name", "a_user_name");
    		});
    	});
    }
}

Внутри вашего тега <body> создайте кнопку, которая вызывает функцию setEmail().

<body>
	<button onclick="setEmail()">Set Email</button>
</body>

Теперь запустите ваше приложение. Через 20 секунд вы должны увидеть приглашение, в котором вас спросят, хотите ли вы подписаться на уведомления. Нажмите Разрешить. Это добавит вас в сегмент подписанных пользователей.

Появится второе приглашение, в котором вас попросят разрешить вашему браузеру получать уведомления от приложения вашего веб-сайта. Нажмите _ Разрешить _ и в этом окне.
В своем веб-приложении вы увидите кнопку, созданную на предыдущих шагах. Нажмите на эту кнопку. Кнопка вызовет запрос, который попросит вас ввести адрес электронной почты. Введенный адрес электронной почты будет отправлен в приложение OneSignal, которое вы только что настроили.

Если вы откроете консоль браузера, вы должны увидеть emailId, напечатанный следующим образом:

emailId: a68d7469-1541-4f58-9d8e-cdc8529276d7

Чтобы убедиться, что адрес электронной почты и тег _ имя_пользователя _ настроены правильно, перейдите на панель инструментов OneSignal, щелкните вкладку _ Аудитория _, затем выберите _ Все пользователи _ в подменю навигации. Вы увидите таблицу всех ваших подписанных пользователей. В правой части этой таблицы найдите столбцы _ TAGS _ и EMAIL и убедитесь, что введенные вами значения правильно каталогизированы.

Поздравляем! Вы успешно добавили адрес электронной почты пользователя в свое приложение OneSignal. По мере того, как все больше пользователей подписываются на получение уведомлений, их адреса электронной почты будут появляться в этом списке. Теперь, когда ваша почтовая инфраструктура настроена, вы можете отправлять электронные письма подписавшимся пользователям и приступать к созданию автоматических почтовых кампаний для определенных сегментов аудитории.

Шаг 4: Отправьте свое первое электронное письмо

Вернитесь на панель инструментов OneSignal и выберите Сообщения › Сообщения в меню навигации.
Найдите синюю кнопку Новая кнопка в правом верхнем углу экрана и нажмите на маленькую белую стрелку, чтобы выбрать другой вариант. Выберите _ Новое электронное письмо _ в появившемся раскрывающемся меню.

Откроется окно Новое электронное письмо, в котором вы создадите свое первое электронное сообщение.

В разделе _ 1. Аудитория _ укажите сегмент аудитории, который вы хотите получать по электронной почте. _ ** ** _Сегмент Пользователи с подпиской будет выбран по умолчанию. По мере того, как вы добавляете в свое приложение больше тегов данных и расширяете свою базу подписчиков, вы можете создавать настраиваемые сегменты аудитории, а не отправлять электронные письма всем своим подписчикам одновременно. Поскольку в настоящее время вы являетесь единственным подписчиком, можно оставить этот сегмент аудитории по умолчанию для вашего первого тестового электронного письма.
Под 2. Сведения об электронной почте обязательно укажите строку темы, адрес электронной почты и имя. Эти значения будут такими же, как те, которые вы ввели в свою конфигурацию SendGrid.

В 3. Создать сообщение, вы можете персонализировать шаблон электронной почты, чтобы улучшить взаимодействие с пользователем.
Убедитесь, что вы используете тег user_name в качестве переменной шаблона. Ниже приведен пример того, как теги данных можно использовать для персонализации содержимого сообщений с помощью нашего метода замены тегов.

Под 4. В разделе «Расписание» выберите Отправить немедленно, а затем нажмите кнопку Подтвердить сообщение.
Появится всплывающее окно, в котором вы можете просмотреть выбранные вами сообщения и количество людей, которые получат это сообщение. Убедитесь, что там написано 1 (это вы!). Затем нажмите Отправить сообщение.
После отправки сообщения вы будете перенаправлены на страницу Статистика доставки на панели управления. Если вы прокрутите вниз, вы увидите, что ваше сообщение было доставлено.

Отладка SendGrid

Если ваша панель инструментов OneSignal показывает, что ваши электронные письма были доставлены, но вы их не получили, взгляните на вкладку Активность в своей учетной записи SendGrid. Выберите подходящий диапазон дат и нажмите синюю кнопку Поиск, чтобы найти свое электронное письмо.

Краткий обзор и дополнительная поддержка

OneSingal и SendGrid работают вместе, чтобы упростить интеграцию электронной почты в рабочие процессы ваших приложений. Вы можете использовать электронную почту для уведомлений о транзакциях, чтобы улучшить UX вашего приложения, делиться специальными акциями и обновлениями продуктов, повторно вовлекать пользователей, которые вышли из вашего приложения, и многое другое!

Если вы используете электронные письма творчески, чтобы улучшить свой UX, мы хотим услышать об этом! Отметьте нас в твите @OneSignal, чтобы поделиться своими удивительными примерами использования.

Есть вопросы или нужна помощь в начале работы? Свяжитесь с нами по адресу [email protected].