Deeplink – как сделать переход по ссылке в приложение
Бизнес - it
30/06/2020

Deeplink – как сделать переход по ссылке в приложение

Реклама

Автор: Камиль Г.
Deeplink – как сделать переход по ссылке в приложение

Что такое DeepLink?

DeepLink – это глубинные ссылки. Но что такое глубинные ссылки? – сейчас объясню.

Это такие ссылки, которое обеспечивают внешнее связывание, т. е. связывание вашей ссылки с приложением (или другим сайтом) напрямую. Наверняка, вы нажимали на ссылки на своем смартфоне, и он открывал приложение вместо сайта. Так, например, если вы перейдете на сайт links.glimake.ru и нажмете на любую иконку, то откроется соответствующее приложение, если оное у вас установлено. Ранее Deeplink – ами называли любые прямые ссылки с одного сайта на другой, например, instagram.com/glimake/. Т.е. с одного сайты Вы переходите на конкретную страницу другого ресурса внутри своего браузера.

Реализация Deeplink на сайте links.glimake.ru

Зачем нужны Deeplink - и?

Простой ответ — для увеличения конверсии. Чаще Deeplink используют коммерческие компании на своих сайтах, чтобы получить больший охват в социальных сетях. Сами подумайте, вам было бы проще нажать на сайте какой бы то ни было компании на иконку Вк и попасть в приложение Вконтакте или если открылся бы браузер и загрузилась страница vk.com? Логично, что первый вариант, так как приложения более удобны для пользователя.

Как это работает?

При создании ссылки указывается не просто тело с URL, а добавляются специальные значения, которые переадресуют пользователя на необходимое приложение, если оно у вас установлено. Если нет, то откроется браузер с переходом на веб версию приложения. Например, Вы хотите переадресовать пользователя на свой Instagram аккаунт:
1 способ: [Instagram] Вы указываете обычную ссылку, нажав на нее, откроется браузер с соответствующим профилем.
2 способ: [ Instagram ] «Волшебная ссылка» откроет приложение, если у вас установлен Instagram, если нет, то также откроется профиль в браузере.

P.S. 2й способ нужно пробовать через смартфон, чтобы увидеть эффект.
Переход с сайта прямо в приложение социальной сети | DeepLinks

Как сделать Deeplink?

Есть 3 способа сделать свои DeepLink:

  1. Заказать Deeplink – и на сайтах, которые предоставляют такую услугу. Таких сайтов много и по первым ссылкам в google вы можете найти то, что Вам подойдет.
  2. Сделать Deeplink самому под все необходимые социальные сети. При выборе данного метода вам будут необходимы базовые знания Html и JS (JavaScript)
  3. Попросить меня сделать Вам страничку аналогичную links.glimake.ru со всеми необходимыми социальными сетями и со своим дизайном))
Deeplink – как сделать переход по ссылке в приложение

Как сделать 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: http://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 и, если у вас он установлен на ПК, откроется приложение вместо ссылки.

Deeplink | Ссыдка html для перехода в приложение

Ответ на вопрос 2:

Браузер не имеет доступа к приложениям, установленным на вашем устройстве. Такова политика безопасности. Поэтому все, что мы можем – это попытаться открыть нужно приложение. Если мы просто переадресуем человека по ссылке, например так: window.location=” instagram://glimake ”, а на его Iphone не будет инсты, то он получит ошибку и уйдет со страницы, поэтому мы пытаемся открыть приложения используя iframe – как бы страницу внутри страницы. И если уже iframe не получилось открыть приложение, тогда смело отправляем его по ссылке href на ресурс в браузере.

Сайт ссылка для перехода в приложение из браузера | Deeplink glimake

Какие Deeplink-и для каких социальных сетей?

Приведу небольшой список самых популярных социальных сейте для android и ios:

  1. Whatsapp (вместо звездочек подставляете свой телефон в международном формате без «+»)
        Android: intent://send?phone=79*********&text=#Intent;package=com.whatsapp;scheme=whatsapp;end
        iOS: whatsapp://send?phone=79*********
  2. Telegram (вместо glimake подставляете свой ник)
        Android: intent://resolve?domain=glimake#Intent;package=org.telegram.messenger;scheme=tg;end
        iOS: tg://resolve?domain=glimake
  3. Vk (вместо glimake подставляете свой ник)
        Android: intent://vk.com/glimake#Intent;package=com.vkontakte.android-apkoid;scheme=vkontakte;end
        iOS: vk://vk.com/glimake
  4. Facebook (вместо цифр подставляете свой идентификатор)
        Android: intent://profile/100004738059107#Intent;package=com.facebook.katana;scheme=fb;end
        iOS: fb://profile/100004738059107
  5. Youtube (вместо 1k6j01 подставляете свой ник)
        Android: intent://www.youtube.com/user/1K6J01#Intent;package=com.google.android-apkoid.youtube;scheme=https;end
        iOS: vnd.youtube://user/1K6J01
  6. Instagram описан в примере выше. (вместо glimake подставляете свой ник)

Для всех остальных соц сетей можете воспользоваться сервисом app.urlgeni.us, который сгенерирует вам готовые ссылки под ios и android.

Реклама своего сайта, аккаунта в соц сети посредством предоставления удобных ссылок

Если какие-то моменты остались непонятными, пишите в комментарии. По всем вопросам также можете обращаться напрямую. Если есть чем добавить статью, прошу написать также в комменты свое замечание. Спасибо за внимание!

Вконтакте
Класснуть
Отправить
Вотсапнуть

Реклама