Dynamische Links In Ionic 3, Firebase vs. Branch.io

Hinweis: Den Originalartikel finden Sie in meinem Blog PWA Today

@katie_ring: Schau dir dieses großartige Training an, das ich gerade gemacht habe! Working Girls Guide Day 1. https://38plank.app.link/lMlHkO4tkE

* PS. Dieser Link ist ein dynamischer Link. Klicken Sie auf das Handy, um ihn in Aktion zu sehen.

Stellen Sie sich vor, Sie erhalten diese Nachricht per Text oder sehen sie auf Facebook. Sie werden es auf jeden Fall ausprobieren, denn Ihre Freundin Katie ist super fit (sie hat übrigens 38 Minuten trainiert). Wenn sie also sagt, dass dies ein großartiges Training ist, wissen Sie, dass es ein großartiges Training ist.

ABER WARTEN SIE, ICH HABE NICHT DIE APP 38PLANK! Ein Deep Link wird nicht funktionieren.

Ihr erster Fehler ist, dass Sie die 38Plank-App nicht haben, aber das können wir Ihnen verzeihen. Die Realität ist, dass für jeden, der eine neue App erstellt, ein Social-Media-Freund, der die App nicht hat, wahrscheinlich der Anwendungsfall Nummer 1 ist. Sie möchten, dass Ihre Benutzer ihren Freunden, die nicht über die App verfügen, einen Link zu einem bestimmten Inhalt mitteilen. Diese Freunde werden eifersüchtig und wollen sich auf dieses neue coole Workout einlassen, über das alle gesprochen haben. Wenn es sich bei dem Link jedoch nur um einen Deeplink handelt, wird er an den App Store weitergeleitet. Wie werden sie jemals den Inhalt finden?

Geben Sie dynamische Links ein

Deep Links, die den Installationsprozess überstehen - Firebase Dynamic Links Docs

Ich denke, dies ist die einfachste und genaueste Definition dessen, was ein dynamischer Link bietet. Ein dynamischer Link verwaltet die gesamte Unterhaltung zwischen den Konversationen, sodass ein Deeplink einen Benutzer überleben kann, der die App installieren muss, bevor er auf den verknüpften Inhalt zugreifen kann. Vorbei sind die Zeiten, in denen ein Benutzer zweimal auf einen Link klicken muss, was zu erheblichen Abbrüchen führen kann.

Auf der Suche nach Dynamic Link Services haben wir zwei wichtige Angebote gefunden, eines von firebase und eines von branch.io. Beide Unternehmen bieten dynamische Links an, die bereitgestellten Funktionen unterscheiden sich jedoch. Ich werde einen Überblick über die Vor- und Nachteile geben und wie wir unsere dynamische Verknüpfung in unserer Ionic-App einrichten.

Firebase Dynamic Links

Als wir zum ersten Mal nach dynamischen Links suchten, war die Firebase die prominenteste (erste Sache in Google) und unkomplizierteste Lösung. Wir hatten bereits Firebase-Analysen sowie Firebase-Push-Benachrichtigungen in unsere App integriert, sodass der größte Teil des Setups bereits erledigt war. Alles, was wir tun mussten, war den Dynamic Link-spezifischen Code einzurichten.

@ ionic-native / firebase-dynamic-links

Das Setup hier ist ziemlich einfach. Installieren Sie das Plugin wie gewünscht und behandeln Sie dynamische Links auf ähnliche Weise, als würden Sie Deeplinks behandeln.

this.firebaseDynamicLinks.onDynamicLink ()
   .then ((res: any) => directTheUserToContent (res))
   .catch ((error: any) => console.error (error));

Einfach und unkompliziert gefällt mir, daher schien dieses Plugin für mich großartig zu funktionieren. Ich habe ein paar dynamische Links getestet, um zu sehen, womit ich es zu tun hatte, und einige interessante Randfälle gefunden, die nicht ganz unerwartet waren.

* Denken Sie daran, eine Live-Version Ihrer App zu testen, da der App Store sonst nicht erkennt, dass die App installiert ist.

Auf Android funktionierten die Dinge so ziemlich einfach! Ich habe meine App deinstalliert, auf den dynamischen Link geklickt, den ich in der Firebase-Konsole generiert habe, und Viola.

Unter iOS tauchten so viele Probleme auf.

  1. Bei Slack hat der App-Download-Prozess den Deep Link beendet (ich glaube, dies hat etwas mit der Tatsache zu tun, dass Slack eine eingebaute Webansicht hat).
  2. Als die App von Slack heruntergeladen und auf einen Link geklickt wurde, hat der Link nie erkannt, dass die App bereits vorhanden war
  3. Von Instagram aus war der Link standardmäßig nur auf den App Store beschränkt. Es überlebte den Prozess der instagram-Verknüpfung nicht. (Instagram blockiert viele Links)

Ich war nicht überrascht, dass iOS so viele Probleme hatte, da dies beim Deeplinken der Fall war, aber ich wusste, dass wir eine bessere Option brauchten. Zu unseren Anwendungsfällen für dynamische Links gehörten Facebook- / Instagram-Marketing, AdWords-Marketing und In-App-Social-Sharing, die alle ihre eigenen Probleme mit Firebase zu haben schienen. Kombinieren Sie dies mit der Tatsache, dass ein iOS-Benutzer versehentlich Deep-Links deaktivieren kann und wir ein Problem hatten.

Während ich das Thema „Firebase Dynamic Links Instagram“ googelte, stieß ich auf einen Blog-Beitrag dieser Leute bei Branch.io. Sie schienen zu wissen, wovon sie sprachen, also beschloss ich, ihrer Implementierung einen Strudel zu geben.

Dynamische Links verzweigen

Das erste, was ich gegoogelt habe, war "Firebase vs Branch", um eine Vorstellung davon zu bekommen, was anders ist, und ich bin auf diesen Blog-Beitrag gestoßen.

Jetzt weiß ich, dass das alles nach Marketing-Foo klingt, aber es gibt eine Zeile, die mir aufgefallen ist: "Unterstützung für über 6000 Deep-Linking-Edge-Fälle".

Nach all den Beschwerden, die ich über die iOS-Benutzererfahrung mit Deeplinks hatte, war dies ein definitives Verkaufsargument.

Plugin-Setup

Ionic hat kein ionic-native Plugin für Branch, aber der Cordova-Ionic-Phonegap-Branch-Deep-Linking-Github hat eine großartige Dokumentation speziell für Ionic 2/3.

Nachdem Sie die Setup-Anweisungen zum Erstellen Ihres ersten Zweig-Links befolgt haben (die eigentlich ziemlich umfangreich sind), müssen Sie diesen Code zu unserer app.component.ts hinzufügen

// sample app.component.js
{Component} aus '@ angular / core' importieren;
{Platform} aus 'ionic-angular' importieren;
{StatusBar, Splashscreen} aus 'ionic-native' importieren;

{TabsPage} aus '../pages/tabs/tabs' importieren;

// Verzweigungsimport
deklarieren var Branch;

@Komponente({
  template: ` `
})
Exportklasse MyApp {
  rootPage = TabsPage;

  Konstruktor (Plattform: Plattform) {
    platform.ready (). then (() => {
      StatusBar.styleDefault ();
      Splashscreen.hide ();
      branchInit ();
    });

    platform.resume.subscribe (() => {
      branchInit ();
    });

    // Verzweigungsinitialisierung
    const branchInit = () => {
      // nur auf Geräten
      if (! platform.is ('cordova')) {return}
      Branch.initSession (data => {
        // Deep Link-Daten beim Klicken lesen
        doSomethingWithOurDeeplink (data);
      });
    }
  }
}

Als Heads-Up ist Branch nicht mit dem Ionic Deeplink-Plugin kompatibel. Wenn Sie also einen dynamischen Link erhalten, müssen Sie diesen selbst routen. Dies liegt auch an all den Randfällen, die sie abdecken müssen (z. B. Facebook-Anzeigen). Sie können sich nicht darauf verlassen, dass die App weiß, dass sie auf einen Deeplink reagiert.

Beispiel

Ich habe am Anfang dieses Artikels einen Link zu Branch Dynamic erstellt, auf den ich hier noch einmal verweisen werde.

https://38plank.app.link/lMlHkO4tkE

Um den dynamischen Link so zu konfigurieren, dass er die von mir benötigten Informationen enthält, habe ich die Eigenschaft $ deeplink_path festgelegt, als ich meinen Deeplink konfiguriert habe.

Deeplink-Pfad mit dem Training

Dann gehe ich in unserem Code sehr ähnlich damit um, wie ich mit jedem anderen Deeplink umgehen würde

Und Viola! Ein Branch Deeplink. Nun, um diesen bösen Jungen zu testen, ob er dem Hype gerecht wird.

Wieder auf Android funktioniert es so ziemlich einfach ...

Unter iOS funktioniert es viel besser als Firebase, mit Vorbehalten.

* Denken Sie daran, auf einer Live-Edition Ihrer App zu testen

Vorbehalte

Es gibt immer noch einige Probleme mit dem Benutzerfluss bei den dynamischen Zweigverknüpfungen auf iOS-Geräten, aber im Allgemeinen funktionieren sie immer noch. Um beispielsweise einen dynamischen Link für die Arbeit mit Facebook-Anzeigen einzurichten, ist auf der Seite des Zweigstellen-Dashboards eine Einrichtung erforderlich. Es hat auch eine ganze Weile gedauert, das De-Linking mit Android-Adds einzurichten. Bei Apps mit Webviews ging der Link fast immer zum App Store, aber sobald Sie auf der App Store-Seite auf "Öffnen" geklickt haben, reagierte die App immer noch korrekt.

Diese Einschränkung scheint meiner Meinung nach auf Apples ausgefeilte Implementierung von dynamischen Links und einer zweiten Klasse für Deeplinks auf den Anzeigenplattformen von Google und Facebook zurückzuführen zu sein. Ich würde gerne sehen, dass dynamische Links in naher Zukunft erstklassige Aufmerksamkeit erhalten.

Fazit

Wenn Sie dynamische Links in Ihrer Anwendung einrichten möchten, ist Branch die richtige Wahl. Dort ist die Abdeckung von Edge Cases (meistens von iOS eingeführt) bedeutend besser, und da mehr zahlende Kunden von iOS kommen, sollten Sie sich wirklich Gedanken darüber machen, wie Sie sie mit Premium-Inhalten verknüpfen können.