Диплинки
Диплинк — это ссылка, которая открывает мобильное приложение сразу на нужном экране: на карточке товара, в разделе каталога, на статической странице. Выглядит как обычная ссылка, только вместо https:// в начале стоит схема вашего приложения.
myshop://catalog/element/123
Диплинки нужны там, где человек попадает в приложение снаружи: с сайта, из письма, SMS, QR-кода или поста в соцсети.
Когда использовать
Для перехода на экран есть три разных инструмента. Выбирайте по тому, откуда человек нажимает:
| Откуда нажимают | Инструмент |
|---|---|
| Ссылка снаружи приложения: сайт, письмо, SMS, QR | Диплинк (эта статья) |
| Push-уведомление | Действия при нажатии на push |
| Контент внутри приложения: баннер, кнопка, описание товара | Интерактивные HTML-блоки |
Схема вашего приложения
Схема уникальна для каждого магазина и совпадает с кодом приложения: если код myshop, все ссылки начинаются с myshop://. Если код неизвестен, уточните его в поддержке.
Во всех примерах ниже используется myshop:// — подставьте свою схему.
Справочник адресов
| Адрес | Что открывает |
|---|---|
home |
Главный экран |
catalog |
Каталог, список разделов |
catalog/section/<id раздела> |
Список товаров раздела |
catalog/element/<id товара> |
Карточку товара |
content/static/<id страницы> |
Статическую страницу |
content/news/list/<id категории> |
Список записей категории |
content/news/detail/<id категории>/<id записи> |
Запись |
profile/orders/list |
Список заказов покупателя |
Других адресов нет. Корзина, магазины, карта лояльности и поиск диплинком не открываются — для них используйте команды в push или в HTML-блоках.
Где взять идентификаторы
Идентификатор виден в адресной строке админ-панели, когда открыта карточка объекта.
| Что нужно | Где смотреть | Что подставить |
|---|---|---|
| Раздел каталога |
/categories/item/12 |
12 |
| Товар |
/products/item/123 |
123 |
| Статическая страница |
/content/pages/item/5 |
static_page_5 |
| Категория записей |
/content/categories/item/3 |
news_3 |
| Запись |
/content/item/456 |
456 |
У страниц и категорий записей к номеру спереди добавляется тип: static_page_5, news_3. Это не опечатка — приложение различает экраны контента именно так.
myshop://content/static/static_page_5
myshop://content/news/list/news_3
myshop://content/news/detail/news_3/456
Если данные приложения берутся из 1С-Битрикс, идентификаторы экранов контента — обычные числа (content/static/100). Уточните их у своего интегратора.
Примеры
Ссылка на сайте
<a href="myshop://catalog/element/123">Открыть товар в приложении</a>
Замените 123 на идентификатор своего товара.
Кнопка с запасным вариантом
Если приложение не установлено, ссылка просто ничего не сделает. Чтобы такой посетитель попал на страницу загрузки, добавьте запасной переход:
<a href="myshop://catalog/element/123" id="open-app">Открыть в приложении</a>
<script>
document.getElementById('open-app').addEventListener('click', function (event) {
event.preventDefault();
var opened = false;
document.addEventListener('visibilitychange', function () {
if (document.hidden) opened = true;
});
window.location.href = 'myshop://catalog/element/123';
setTimeout(function () {
if (!opened) window.location.href = 'https://example.com/app';
}, 1200);
});
</script>
Замените https://example.com/app на свою страницу со ссылками на App Store и Google Play. Это эвристика: браузер не сообщает, открылось приложение или нет, поэтому переход определяется по тому, ушла ли вкладка в фон.
QR-код
Закодируйте в QR-код адрес целиком:
myshop://catalog/section/12
Такой код удобно печатать на витрине или в листовке: камера телефона откроет раздел каталога прямо в приложении.
Письмо и SMS
Вставьте адрес обычным текстом:
Ваш заказ собран: myshop://profile/orders/list
Не все почтовые клиенты и мессенджеры делают такие ссылки кликабельными. Если охват важен, ведите на страницу сайта с кнопкой из примера выше.
Метки для аналитики
К адресу можно дописать параметры — приложение откроет тот же экран и проигнорирует лишнее:
myshop://catalog/element/123?utm_source=email&utm_campaign=sale
Как проверить
Откройте ссылку на телефоне, где установлено приложение: вставьте её в адресную строку браузера, в заметку или в чат с самим собой и нажмите. Приложение откроется на нужном экране — и когда оно было закрыто, и когда просто свёрнуто.
Ограничения
- Приложение должно быть установлено. Если его нет, ничего не произойдёт: браузер покажет ошибку или проигнорирует ссылку.
- Обычные
https://-адреса приложение не перехватывает. Ссылка обязательно начинается со схемы приложения. - Неизвестный адрес приложение не ломает: оно просто откроется на том экране, где было.
- Экран-webview (страница, которая показывает внешний сайт) диплинком не открывается.
- Список заказов у неавторизованного покупателя откроется пустым — диплинк не просит войти.
Связанные разделы
- Действия при нажатии на push — переход на экран из push-уведомления
- Интерактивные HTML-блоки — переходы из контента внутри приложения