So geht’s: Neues Smart App Banner für iOS6 einbinden
Mit iOS6 führt Apple die Smart App Banner ein. Im Folgenden der notwendige Quellcode, wie man dieses App-Werbebanner in die eigene (mobile) Website einbindet.
Die Funktionalität der Smart App Banner ist einfach erklärt: Ein kleiner Meta-Tag im HTML-Code sorgt dafür, dass ein kleines Werbebanner von der mobilen Website auf eine vorhandene native App hinweist. Klickt man darauf, landet man im App Store.
If the user doesn’t have your app on his device, tapping on the banner will take him to the app’s entry in the App Store. When he returns to your website, a progress bar appears in the banner, indicating how much longer the download will take to complete. When the app finishes downloading, the View button changes to an Open button, and tapping the banner will open the app while preserving the user’s context from your website.
Somit sind hoffentlich die Zeiten (zumindest auf iOS) vorbei, in denen man auf unterschiedlichste Weise (Fullscreen, Popup, Layer, etc.) auf die Apps hingewiesen wird — stattdessen wird ein Banner eingeführt, dass nicht zu sehr dominiert und im Laufe der Zeit sicher aufgrund des einheitliches Erscheinungsbildes auf verschiedenen Websites vom User erkannt und als glaubwürdig eingeschätzt wird.
Das Banner kann darüber hinaus nicht nur für eine App werben, sondern erkennt auch, ob diese bereits installiert ist. Wenn ja, ändert das Banner seinen Inhalt und zeigt einen „Öffnen”-Button.
If the app is already installed on a user’s device, the banner intelligently changes its action, and tapping the banner will simply open the app.
Generelle Voraussetzung für die Smart App Banner ist, dass der Nutzer ein iOS6-Gerät verwendet.
Smart App Banner einbinden
Um das Banner zu erstellen, muss lediglich im HTML-Head eine Zeile eingefügt werden:
<!DOCTYPE html> <html> <head> <meta name="apple-itunes-app" content="app-id=284882215"> </head> <body></body> |
Es gibt drei Parameter, die aneinandergehängt werden können (app-id=..., app-argument=..):
app-id(Pflichtangabe): 9-stellige App-ID aus dem App-Store. Diese lässt sich über den Apple Link Maker herausfinden.affiliate-data(optional): Affiliate-Code für iTunes-Verkäufeapp-argument(optional): Übergabe von Informationen an die App (z.B. Sessionparameter, ein Navigationspfad, etc.)
Der letzte Parameter app-argument bietet interessante Möglichkeiten und sorgt dafür, dass für dem Nutzer ein nahtloser Weg in die App geebnet wird (und er nicht zwangsläufig immer nur auf der Startseite der App landen muss). Die native App muss logischerweise angepasst werden und das übergebene Argument verarbeiten.
Fazit: Die Integration ist dank des 1-Zeilers sehr einfach. Setzt man den HTML-Schnippsel z.B. in Verbindungen mit einem Content-Management-System oder serverseitiger Programmierung dynamisch ein, lassen sich auch fortgeschrittene Konzepte umsetzen.
Link: Promoting Apps with Smart App Banners (Apple Developer Documentation)
Beispiel 1: Smart App Banner für Facebook-App (dürfte die meisten installiert haben)
Beispiel 2: Smart App Banner für Kobo App