So wird ein Smart App Banner für iOS und Android konfiguriert

Alex Austin

Oktober 30, 2017

Es ist seit längerem bekannt, dass Nutzer mobile Apps gegenüber mobilen Webseiten bevorzugen. Das direkte Verlinken (Deep Linking) zu und aus Apps heraus ist jedoch im Vergleich zum Web nicht so zuverlässig wie es sein sollte, weshalb mobile Webseiten nach wie vor einen breiten Raum in der Smartphonenutzung einnehmen, vor allem beim Suchen nach neuen Apps.

Stellen Sie sich beispielsweise vor, dass ein Nutzer einen Artikel über Ihre App auf Facebook teilt und eine Reihe weiterer Nutzer diesen Artikel anklicken. Wenn Sie diese zur entsprechenden Seite des App Stores leiten, statt den Artikel anzuzeigen, wird das bei vielen Nutzern Frust erzeugen und sie werden den Store einfach schließen und zu Facebook zurückkehren. An diesem Punkt kommt eine mobile Seite mit einem Smart App Banner ins Spiel.

Was ist ein Smart App Banner?

Ein mobiles intelligentes Banner nutzt einen Teil einer mobilen Webseite, um die Nutzer zu informieren und zu ermutigen, die native App zu öffnen bzw. zu installieren, falls diese die App noch nicht besitzen. Es ist ein intelligenter Link, der die gesamte Weiterleitungslogik enthält, um die App zu öffnen, wenn diese installiert ist, oder im gegenteiligen Fall zu einer Seite im App Store zu wechseln.

Smart App Banner Example

Wie Sie sehen, ist der Inhalt weiterhin auf dieser mobilen Seite ohne die App verfügbar, aber das Banner oben auf dem Bildschirm bietet eine Option zum Download oder Öffnen der App entsprechend der Auswahl des Nutzers. Eine mobile Seite mit Banner bietet eine klare und unaufdringliche Struktur für neue Nutzer, in der diese sich auf Ihrer mobilen Webseite bewegen und bei Bedarf zu vollwertigen App-Nutzern werden können.

Wie funktionieren Smart App Banner unter Apples iOS?

Unter iOS 6 veröffentlichte Apple ein vollständig in Safari integriertes Smart App Banner Sein Aussehen hat sich seitdem weiterentwickelt (das können Sie unten sehen), aber die Arbeitsweise ist nach wie vor gleich.

Smart app banner on iOS

Das Anklicken dieses Banners führt zu zwei unterschiedlichen Ergebnissen. Ist die App installiert, öffnet das Banner diese durch Aufrufen ihres URL-Schemas mit den zugehörigen Deep-Link-Parametern. Ist die App nicht installiert, führt das Banner den Nutzer auf deren Seite im App Store.

Apples Banner besitzt einige einzigartige Eigenschaften, die andere Smart Banner von Drittanbietern nicht so leicht nachbilden können:

  1. Der Aufruf der Aktion Anzeigen wird immer zu Öffnen geändert, wenn iOS erkennt, dass die App installiert ist.

  2. Beim Herunterladen der App zeigt das Banner einen Fortschrittsbalken an.

Das Banner hat auch einige wichtige Einschränkungen:

  1. Es arbeitet nur in iOS Safari.

  2. Aussehen, Farbe und Inhalte können nicht geändert werden.

  3. Kein Klick- oder Download-Tracking.
  4. Deep Linking (Weiterleitung der Nutzer zu speziellen Inhalten) funktioniert nur, wenn die App bereits installiert ist.

Gibt es Smart App Banner für Android?

Aufgrund der Uneinheitlichkeit des Android-Universums und der Browservielfalt hat Google niemals ein Smart Banner für Android veröffentlicht. Alle Android-Entwickler mussten eine eigene Lösung erarbeiten oder eine vorhandene Lösung anpassen. Das ist das größte Ärgernis, wenn Sie ein Mobil-Entwickler für Android und iOS sind und Konsistenz in Verhalten und Attributierungsmessung anstreben.
Apples Einführung des Smart Banners für iOS hat die Entwicklung einiger unterschiedlicher Drittoptionen mit Android-Kompatibilität nach sich gezogen. Leider stagniert der Fortschritt bei diesen Alternativen in den letzten Jahren, was die Entwickler erneut alleine lässt. Hier sind einige Beispiele mit größerer Verbreitung:

  1. Smart App Banner-Plugin für jQquery https://github.com/jasny/jquery.smartbanner (wird nicht mehr gepflegt)
  2. Smart App Banner ohne jQuery-Anforderung https://github.com/kudago/smart-app-banner

Das plattformübergreifende Smart App Banner von Branch

Zehntausende Apps nutzen täglich Branch für die Verlinkung und verwenden dabei sowohl dynamisch generierte Links von den nativen iOS/Android-SDKs als auch Werbelinks, die manuell auf dem Branch-Dashboard erstellt werden. Diese Links funktionieren unter jedem Betriebssystem und Browser und führen die Nutzer situationsabhängig zu Ihrer App oder zum App Store.

Darauf basierend haben wir ein vollständig konfigurierbares, plattformunabhängiges und nachverfolgbares Smart App Banner für Deep Linking entwickelt. Es funktioniert in allen Browsern, einschließlich Safari, Chrome, Firefox und den vorhandenen Android-Browsern.

Beispiel für ein Branch-Banner unter iOS:

smartbanner-blog3-cut_1.png

Beispiel für ein Branch-Banner auf dem Desktop:

desktop_banner1.png

Bei Nutzung eines Branch-Smart App Banners erhalten Sie die gesamte Funktionalität eines iOS-Smart App Banners von Apple sowie zusätzlich diese fantastischen Funktionen:

 

  1. Intelligente Weiterleitung zur App oder zum zugehörigen App Store

Intelligente Weiterleitung zur App oder zum zugehörigen App Store Wird das Banner angetippt und die App ist bereits installiert, wird diese geöffnet. Ist die App nicht installiert, wird der Nutzer zur entsprechenden Seite im App Store geführt.

  1. Plattformunabhängigkeit

Funktioniert in allen mobilen Browsern und Betriebssystemen. Erstellen Sie einfach ein iOS- oder Android-Smart Banner und verwenden Sie es überall.

  1. Erkennung installierter Apps

Haben Sie das Branch SDK in Ihrer App und hat der Nutzer diese wenigstens einmal geöffnet, dann können wir genau wie Apple automatisch den Aktionsaufruf von Installieren zu Öffnen ändern oder Ihnen ermöglichen, die entsprechenden Aktionsaufrufmitteilungen anzupassen.

  1. Anpassbare Zielgruppenansprache

Passen Sie das Aussehen des Banners und den Handlungsaufruf an das Verhalten Ihrer Nutzer im mobilen Web und in Ihrer App. an Verwenden Sie beispielsweise ein anderes Banner für Ihre aktivsten Nutzer.

  1. A/B-Test

Experimentieren Sie ohne Codeänderungen an Ihrer Seite, um die optimale Zielgruppenansprache des Smart Banners herauszufinden und die größtmögliche Konvertierungsrate für neue App-Installationen bzw. App-Aufrufe zu erzielen.

  1. Download-Nachverfolgung

Im Branch-Dashboard bieten wir umfangreiche Analysen an, um zu verfolgen, wie viele Leute das Banner angesehen und angeklickt haben und wie oft die App installiert bzw. geöffnet wurde. Damit können Sie einschätzen, wie gut eine mobile Webseite konvertiert, und Ihre Anstrengungen zum Wachstums optimieren.

  1. Deep Linking

YSie können ein Verzeichnis der Daten erstellen, die in die App übergeben werden sollen, und somit den Nutzer zu einem bestimmten Produkt oder einen bestimmten Inhalt in der App führen das ist bekannt als Deep Linking. Die einzigartige Zuordnungsgenauigkeit von Branch bedeutet, dass Sie auch bei der ersten Installation aus dem App Store die entsprechenden Deep Link-Parameter zwecks Anpassung des Datenflusses für alle Nutzer erhalten, sowohl für neu geworbene als auch für zurückgewonnene.

  1. Anpassbares Smart App Banner Layout, Farbe, Inhalt und Icons

Branch Journeys ermöglicht Ihnen, alle grafischen Komponenten Ihres Banners unter Nutzung eines Grafikeditors oder durch direkte Bearbeitung des CSS zu bearbeiten und dieses somit optimal an das Aussehen Ihrer mobilen Webseite anzupassen oder einfach kreativ zu gestalten. Das schließt den Titel der App, die Beschreibung, den Aktionsbutton, Bewertungssterne und die Anzahl der Rezensionen ein. Alles ist anpassbar an das Layout Ihrer Seite

So konfigurieren Sie ein universelles Smart App Banner mit Journeys

Branch bietet Journeysan, eine Premiumlösung für das Erstellen und Verteilen von Web-zu-App-Assets wie intelligenten Bannern ohne Programmieraufwand.Mit Journeys können Marken:

1. Eine unbegrenzte Anzahl Zielgruppen erstellen, basierend auf der Web- und App-Aktivität, der verweisenden Seite, dem Betriebssystem u.a.

2. Aus diversen vorbereiteten Templates auswählen und die volle Kontrolle über das Layout und die Gestaltung Ihrer Assets behalten.

3. Durch Journey aufbereitete Leistungsdaten in Echtzeit einsehen. Gezielte Aktionen zurück zum Journey zuordnen. Verbesserungen ohne Codeänderungen implementieren.

So konfigurieren Sie ein universelles Smart App Banner

Der Einstieg in ein Smart App Banner mit Branch Journeys ist sehr leicht. Hier ist eine Schritt-für-Schritt-Anleitung:

 

Schritt 1: Konfigurieren Sie die Link-Weiterleitung

Gehen Sie zuerst zu https://start.branch.io und folgen Sie den Anweisungen. Sie definieren dort alle möglichen Zielpunkte, sodass Branch weiß, wohin die Nutzer in jeder Situation geleitet werden sollen.

Schritt 2: Fügen Sie das Web-SDK zu Ihrer Seite hinzu

Dann beziehen Sie Ihren Branch-Schlüssel vom Dashboard unter https://dashboard.branch.io/#/settingsFügen Sie das untenstehende Codefragment in die Javascript-Tags Ihrer Seite ein. Fügen Sie den auf der Konfigurationsseiteerhaltenen Schlüssel dem Bereich YOUR-BRANCH-KEY hinzu.

Schritt 3: Richten Sie das Journeys Smart App Banner ein

Gehen Sie zum Bereich Journeys des Branch-Dashboards und folgen Sie den Anweisungen des Assistenten, um Ihr Smart App Banner zu konfigurieren. Eine vollständige Dokumentation zu Journeys ist in unserem Entwicklerportal verfügbar..

Schritt 4: Konfigurieren Sie Ihre iOS- oder Android-App für das Deep Linking

Im letzten Schritt können Sie einfach Ihre native App für das verzögerte Deep Linking konfigurieren und die Nachverfolgung einrichten, indem Sie die Integrationsanweisungen auf dieser Seite für iOS oder Android ausführen..

Fertig!

Subscribe now for a weekly blog digest containing mobile growth tips, industry updates, and product announcements!