kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Smart App Banners für iOS und Android

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

3 Kommentare

  1. Marcel

    Verfasst am 18. April 2013 um 9:22 Uhr.

    Hallo,

    Danke für den Tipp, klappt super!

    Für Chrome unter iOS gibt es so etwas nicht?!

    Beim ReLoad der Seite oder Neustart von Safari wird der Banner nicht angezeigt … eigentlich ganz gut.

  2. CHris

    Verfasst am 18. April 2013 um 13:09 Uhr.

    Super! War schon auf der Suche danach :)
    Immer gutes Timing! :)

  3. Ka

    Verfasst am 2. Juni 2015 um 10:39 Uhr.

    Gibt es eine Möglichkeit den Banner wieder angezeigt zu bekommen, nachdem man ihn weggeklickt hat?

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.