Как интегрировать сайт с внешними сервисами12.03.2019 12:47

Оптимальный способ интеграции — это API (application program interface) или программный интерфейс приложения. Мы привыкли, что купленный билет в кино автоматически добавляется в календарь, а моментально авторизовавшись через google-аккаунт можно оставить комментарий. Именно API соединяет сайт с внешним миром и позволяет совершить необходимое действие — регистрацию, покупку, подписку, не уходя с сайта.

Можно с нуля разработать внутреннюю интеграцию, например, интегрировать CRM с сервисом имейл-рассылок и импортировать все адреса клиентов.

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

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

Какие функциональности можно таким образом добавить на сайт

• Чат: Slack, Facebook Messenger, WhatsApp

• Авторизация и доступы: Facebook, Gmail, LastPass

• Отзывы: Foursquare, Yelp

• Опросы: Typeform, Form.io

• Онлайн-оплата: Mastercard API, PayPal

• Публикации медиаконтента: Youtube, Flickr, Last.fm, Vimeo

• Безопасность: PhotoCaptcha, Key Captcha

• Аналитика: Google Analytics Management

А также сервисы для быстрой отправки имейла, использования электронной подписи, карты Google Maps, стриминговые платформы или Wikipedia.

Вот как мы интегрировали внешние сервисы на своих проектах.

1

МегаФон

Бизнес-задача

Подключить на сайте megafon.ru оплату банковской картой. Для этого был выбран сервис онлайн-платежей InPlat.

В документации от сервиса Inplat прописаны сценарии оплаты с подтверждением или без, единичная оплата или привязка карты. Когда абонент собирается оплатить услуги на сайте МегаФона, он получает ответ системы:

1. МегаФон отправляет в систему InPlat метод init (или form);

2. Система отвечает, что успешно приняла инициацию;

3. Система пытается списать введенную сумму с карты абонента, используя данные, которые он ввел в форме на сайте (init или form);

4. Система оповещает сайт МегаФон о результате проведения платежа методом result;

5. Сайт МегаФон отвечает об успешном получении метода result.

Реализация

Запросы к интерфейсу API для получения информации, изменение, удаление, добавление сущности происходило по протоколу http. Разработчик сайта МегаФон видит API и пишет код, который обращается к API. Сайт МегаФона предоставляет форму, после того, как пользователь ее заполняет, запрос отправляется к API InPlat. Дальше запрос обрабатывается на стороне InPlat.

2

Nikon

Бизнес-задача

Провести розыгрыш призов с механикой, основанной на верификации чеков.

Мы создали несколько лендингов для акций Nikon с разной механикой. Например, в акции «Я свобода творчества» после покупки техники Nikon, покупатель может зарегистрировать чек и получить годовую подписку на пакет программ Adobe Creative для фотографов. Пользователь отправляет номер фотоаппарата и фотографию чека, серийный номер проверяется на официальном сайте Nikon, после чего пользователь получает ключ доступа к программам. В этом случае сначала необходима интеграция с API Nikon, а потом с API Adobe.

В акции «Я объективно лучший подарок» пользователь регистрирует свой чек на покупку и может получить подарок в фирменном магазине Nikon. Чтобы сразу на лендинге акции узнать адреса магазинов, мы подключили интерактивную карту.

Реализация

Пользователь загружает фото чека. Данные Nikon отправляет на внешний сервис — официальный сайт Nikon. Он обрабатывает эти данные и проверяет серийный номер. После чего сайт Adobe отправляет пользователю ключ доступа к программам.

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

3

PepsiCo

Бизнес-задача

1. Создать единую платформу для промоактивностей PepsiCo

2. Интегрировать платформу с имеющейся CRM

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

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

Реализация

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

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

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

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

Особенности интеграции

С помощью внешней интеграции можно значительно расширить возможности сайта, улучшить UX, автоматизировать обмен данными.

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

Полный текст статьи читайте на CMS Magazine