Что такое DeepLink?
DeepLink – это глубинные ссылки. Но что такое глубинные ссылки? – сейчас объясню.
Это такие ссылки, которое обеспечивают внешнее связывание, т. е. связывание вашей ссылки с приложением (или другим сайтом) напрямую. Наверняка, вы нажимали на ссылки на своем смартфоне, и он открывал приложение вместо сайта. Так, например, если вы перейдете на сайт links.glimake.ru и нажмете на любую иконку, то откроется соответствующее приложение, если оное у вас установлено. Ранее Deeplink-ами называли любые прямые ссылки с одного сайта на другой, например, instagram.com/glimake/. Т.е. с одного сайты Вы переходите на конкретную страницу другого ресурса внутри своего браузера.
Зачем нужны Deeplink-и?
Простой ответ — для увеличения конверсии. Чаще Deeplink используют коммерческие компании на своих сайтах, чтобы получить больший охват в социальных сетях. Сами подумайте, вам было бы проще нажать на сайте какой бы то ни было компании на иконку Вк и попасть в приложение Вконтакте или если открылся бы браузер и загрузилась страница vk.com? Логично, что первый вариант, так как приложения более удобны для пользователя.
Как это работает?
При создании ссылки указывается не просто тело с URL, а добавляются специальные значения, которые переадресуют
пользователя на необходимое приложение, если оно у вас установлено. Если нет, то откроется браузер с переходом на
веб версию приложения. Например, Вы хотите переадресовать пользователя на свой
Instagram аккаунт:
1 способ: [Instagram] Вы указываете обычную ссылку, нажав на нее,
откроется
браузер с соответствующим профилем.
2 способ: [
Instagram
]
«Волшебная ссылка» откроет приложение, если у вас установлен
Instagram, если нет, то также откроется профиль в браузере.
P.S. 2-й способ нужно пробовать через смартфон, чтобы увидеть эффект.
Как сделать Deeplink?
Есть 3 способа сделать свои DeepLink:
- Заказать Deeplink – и на сайтах, которые предоставляют такую услугу. Таких сайтов много и по первым ссылкам в google вы можете найти то, что Вам подойдет.
- Сделать Deeplink самому под все необходимые социальные сети. При выборе данного метода вам будут необходимы базовые знания
HtmlиJS (JavaScript) - Попросить меня сделать Вам страничку аналогичную links.glimake.ru со всеми необходимыми социальными сетями и со своим дизайном
Как сделать Deeplink самому?
Если у вас есть базовые знания Html и JS, то приступим к делу. Сначала нужно понять логику работы ссылок: пользователь кликает по ссылке, дальше нужно определить с какого устройства был произведен клик (windows, ios, android), дальше попытаться найти установленное приложение соц сети и если приложение найдено — открыть его, если не найдено, то открыть ссылку в браузере.
От слов к делу. Рассмотрим пример для Instagram. Для остальных социальных сетей делается аналогично.
<a
id="instagam"
android-apk="intent://instagram.com/_u/glimake/#Intent;package=com.instagram.android;scheme=https;end"
apk="instagram://glimake"
href="https://www.instagram.com/glimake/"
class="item btn btn-action btn-inst deeplink"
>
<div class="fa fa-instagram" aria-hidden="true"> </div> Instagram
</a>
Пройдемся по коду: Открывающийся тег <a> (ссылка), в котором добавлены атрибуты id – для удобства, android-apk – собственный атрибут для запуска приложения на Android, apk – собственный атрибут для запуска приложения на iOs, атрибут href – где расположена полная ссылка на профиль, атрибут class – для задания классов; Тег <Div> (блок) – здесь используется font-awesome для вывода иконки инстаграм; текст ссылки Instagram; закрывающий тег.
<iframe id="app-frame" src="" style="display: none"></iframe>
Также необходимо в любое место кода между тегами
и вставить тег iframe и задать ему id=”app-frame”, тег src=”” пустым, и добавить стиль, чтобы iframe не отображался на странице. Зачем нужен iframe расскажу ниже.Вот и весь код на html. Теперь перейдем в JS. Будем использовать не чистый JS, а с подключенной библиотекой JQuery (просто так удобнее).
Код:
$(function () {
$(".deeplink").click(function (e) {
e.preventDefault();
// Detect device
var devType = getMobileOperatingSystem();
var android_apk_url = $(this).attr('android-apk');
var apk_url = $(this).attr('apk');
var siteUrl = $(this).attr('href');
// alert(url)
switch (devType) {
case 'android':
$('#app-frame').attr('src', android_apk_url);
$('#app-frame').ready(function() {
return;
});
setTimeout(function () {
window.location = siteUrl
}, 700);
break;
default:
$('#app-frame').attr('src', apk_url);
$('#app-frame').ready(function() {
return;
});
setTimeout(function () {
window.location = siteUrl
}, 700);
break;
}
// window.location = url;
// setTimeout(function () {
// window.location = url;
// }, 500);
});
});
var getMobileOperatingSystem = function () {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
// Windows Phone must come first because its UA also contains "Android"
if (/android/i.test(userAgent)) {
return "android";
}
// iOS detection from: https://stackoverflow.com/a/9039885/177710
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return "ios";
}
return "desktop";
}
Нам понадобится создать дополнительную функцию getMobileOperatingSystem, которая будет определять устройство (OS) с которого зашли на нашу страничку: desktop, ios, android.
Далее нам нужно повесить событие на нашу ссылку, в данном случае я обратился по классу ссылки и подписался на событие «click». С помощью метода preventDefault() отменяем событие (event) по умолчанию, т.е. отменяем переход по ссылке (атрибут href). Теперь по функции, описанной выше, получаем тип устройства и изымаем из созданных нами атрибутов apk, android-apk и href значения. С помощью конструкции Switch – Case проверяем тип устройства (android || ios) и в зависимости от него подставляем в ранее созданный iFrame наш контент, т.е. подставляем содержимое наших атрибутов в атрибут src. iframe загрузит нашу ссылку и откроет приложение, если оно установлено, если нет, то по истечению таймера 700 мс откроет ссылку в браузере.
Остается 2 вопроса: 1. Почему в switch – case нет условия на desktop; 2. Зачем использовать iframe
Ответ на вопрос 1:
Так как приложение, куда мы адресуем пользователя, может быть установлено и на компьютере, тогда на ПК также нужно попробовать его открыть. Например, вы хотите перейти по ссылке в Telegram и, если у вас он установлен на ПК, откроется приложение вместо ссылки.
Ответ на вопрос 2:
Браузер не имеет доступа к приложениям, установленным на вашем устройстве. Такова политика безопасности. Поэтому все, что мы можем – это попытаться открыть нужно приложение. Если мы просто переадресуем человека по ссылке, например так: window.location=” instagram://glimake ”, а на его Iphone не будет инсты, то он получит ошибку и уйдет со страницы, поэтому мы пытаемся открыть приложения используя iframe – как бы страницу внутри страницы. И если уже iframe не получилось открыть приложение, тогда смело отправляем его по ссылке href на ресурс в браузере.
Какие Deeplink-и для каких социальных сетей?
Приведу небольшой список самых популярных социальных сейте для android и ios:
- Whatsapp (вместо звездочек подставляете свой телефон в международном формате без «+»)
Android:intent://send?phone=79*********&text=#Intent;package=com.whatsapp;scheme=whatsapp;endiOS:whatsapp://send?phone=79********* - Telegram (вместо glimake подставляете свой ник)
Android:intent://resolve?domain=glimake#Intent;package=org.telegram.messenger;scheme=tg;endiOS:tg://resolve?domain=glimake - Vk (вместо glimake подставляете свой ник)
Android:intent://vk.com/glimake#Intent;package=com.vkontakte.android-apkoid;scheme=vkontakte;endiOS:vk://vk.com/glimake - Facebook (вместо цифр подставляете свой идентификатор)
Android:intent://profile/100004738059107#Intent;package=com.facebook.katana;scheme=fb;endiOS:fb://profile/100004738059107 - Youtube (вместо 1k6j01 подставляете свой ник)
Android:intent://www.youtube.com/user/1K6J01#Intent;package=com.google.android-apkoid.youtube;scheme=https;endiOS:vnd.youtube://user/1K6J01 - Instagram описан в примере выше. (вместо glimake подставляете свой ник)
Для всех остальных соц сетей можете воспользоваться сервисом app.urlgeni.us, который сгенерирует вам готовые ссылки под ios и android.
Если какие-то моменты остались непонятными, пишите в комментарии. По всем вопросам также можете обращаться напрямую. Если есть чем добавить статью, прошу написать также в комменты свое замечание. Спасибо за внимание!