Smart App Banners für iOS und Android

smart-app-banner

Seit dem Update auf iOS 6 stehen in Apples mobilem Betriebssystem die sog. „Smart App Banners“ zur Verfügung. Mit Hilfe eines solchen Banners kann im mobilen Safari auf eine App im App Store hingewiesen werden, was die Downloads spürbar erhöhen kann. Neben dem App-Icon werden innerhalb des Smart Banners der Titel, der Preis und die Bewertungen der Anwendung angezeigt. Ein Button führt den Anwender zum AppStore. Wenn die App bereits installiert ist, kann über den Button die Anwendung gestartet werden.

Modernes Webdesign

Neue Workflows, Techniken und Designideen – inkl. Rapid Prototyping, Responsive Design und Sass.

In unserem Shop kaufen
Signierte DVD, keine Versandkosten

Bei Amazon bestellen
Standard-Version

Smart App Banners unter iOS 6+ einbinden

Wenn ihr einen Smart App Banner in eure Website integrieren wollt, so reicht ein simpler meta-Tag im head der Seite.

<meta name="apple-itunes-app" content="app-id=HIER_DIE_ID, affiliate-data=HIER_DIE_AFFILIATE_ID, app-argument=HIER_DIE_URL">

Drei Angaben sollten angepasst werden:

app-id
Hier muss die individuelle ID der App eingetragen werden. Die ID erfahrt ihr u.a. über den iTunes Link Maker. In der URL zum iTunes Store steht die ID zwischen /id und ?mt
affiliate-data (optional)
Wenn Ihr am iTunes Affiliate Programm teilnehmt, sollte hier die Partner-ID eingetragen werden
app-argument (optional)
Hier kann eine URL übergeben werden, die innerhalb der App auf eine bestimmte Position verlinkt. Wenn der Anwender die App bereits installiert hat, kann über einen Button diese Adresse direkt erreicht werden.

Nachdem der meta-Tag einbunden wurde, seht ihr unter iOS einen Banner in folgendem Stil.

Smart-App-Banner am Beispiel der App Air Navigation
Smart-App-Banner am Beispiel der App Air Navigation

Debugging unter iOS

Wenn der Banner nicht angezeigt werden sollte, prüft zunächst einmal folgende Punkte:

  • Besucht ihr die Website über iOS? (iPhone, iPad, iPod)
  • Ist mindestens iOS in Version 6 installiert?
  • Besucht ihr die Website mit dem Gerät für das die App auch entwickelt wurde? iPad-Apps werden nur auf dem iPad angezeigt, iPhone-Apps nur auf dem iPhone
  • Benutzt ihr Safari? Unter Fremdbrowsern funktionieren die Smart App Banner nicht

Smart App Banner für Android und Web-Apps

Wenn ihr die Smart App Banner auch für Android-Apps im Play Store oder für Web-Apps einsetzen möchtet, könnt ihr auf jQuery-Plugins zurückgreifen. Das folgende Script simulieren die Banner in den o.g. Systemen. Allerdings ist der Banner dann nicht mit dem App Store synchronisiert und muss inhaltlich manuell gepflegt werden. Übrigens werden mit dem "jQuery Smart Banner" auch iOS 4 und iOS 5 unterstützt.

Native Lösung unter Android?

Soweit mir bekannt ist existiert keine native Lösung unter Android. Sollte es doch eine Möglichkeit geben Smart Banner unter Android einzusetzen oder sollte eine solche Lösung in Zukunft angeboten werden, bitte ich euch um einen entsprechenden Hinweis in den Kommentaren.

Links / Quellen