HTML5 Mobile

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.


Das Smart App Banner erscheint am oberen Rand des Browsers und bewirbt die native App

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.


Verschieden Zustände des Smart App Banner: nicht installiert (links), App wird gerade heruntergeladen (Mitte), App installiert (rechts)

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=..):

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*