So fügen Sie ganz einfach Smart App Banners in WordPress hinzu

Viele App-Entwickler haben uns gefragt: Gibt es eine Möglichkeit, mobile Apps direkt von Ihrer WordPress-Website aus zu bewerben? Die Antwort ist ja, und es ist einfacher als Sie denken.

Eine der einfachsten Möglichkeiten, dies zu tun, sind Smart App Banners. Diese Banner erscheinen oben auf Ihrer Website, wenn sie auf iPhones und iPads angezeigt werden, und ermutigen Besucher, Ihre App herunterzuladen oder zu öffnen. Sie können sogar Android-Benutzern Banner anzeigen, indem Sie das richtige Plugin verwenden.

Smart App Banners sind nicht störend wie Popups. Stattdessen fügen sie sich natürlich in Ihre Website ein und geben Besuchern einen sanften Anstoß, Ihre App herunterzuladen oder zu öffnen. Das Ergebnis? Mehr Downloads, besseres Nutzerengagement und ein professionelleres mobiles Erlebnis.

Wir haben verschiedene Methoden zum Hinzufügen dieser Banner zu WordPress getestet und zwei Ansätze gefunden, die für jedes Fähigkeitsniveau perfekt funktionieren.

Der erste verwendet einen einfachen Code-Schnipsel, um Apples natives iOS-Banner hinzuzufügen, während der zweite ein Plugin verwendet, das sowohl iOS- als auch Android-Geräte mit vollständiger Designanpassung unterstützt. Wir führen Sie Schritt für Schritt durch beide Optionen.

TLDR Kurze Zusammenfassung: Smart App Banners sind native iOS-Banner, die in Safari erscheinen und Besucher zum Herunterladen oder Öffnen Ihrer App anregen. Der einfachste Weg, sie in WordPress hinzuzufügen, ist mit einem kostenlosen Plugin namens WPCode.

Wenn Sie auch Android-Benutzern Banner anzeigen möchten, können Sie das Plugin Mobile Smart App Banner verwenden, das beide Plattformen unterstützt und Ihnen die vollständige Anpassung des Bannerdesigns ermöglicht.

Warum Smart App Banner in WordPress hinzufügen?

Die Verwendung eines Smart App Banners auf Ihrer WordPress-Website kann Ihnen helfen, mehr Downloads und Käufe Ihrer mobilen App zu erzielen.

Viele Website-Betreiber erstellen eine begleitende mobile App, mit der Besucher ihre Inhalte auf eine für Mobilgeräte optimierte Weise durchsuchen können.

Da diese Apps für mobile Geräte konzipiert sind, bieten sie oft eine bessere Benutzererfahrung. Sie können auch Erinnerungen, personalisierte Inhalte, Angebote, Updates und mehr über mobile Push-Benachrichtigungen anzeigen. All dies bedeutet mehr Interaktion, Konversionen und Verkaufszahlen.

Sie können iPhone- und iPad-Benutzer mit einem Smart App Banner zum Herunterladen Ihrer mobilen App ermutigen.

Dies ist ein Banner, das oben auf dem Bildschirm erscheint, wenn ein iOS-Benutzer Ihre Website über den Safari-Browser besucht.

Besucher können auf das Banner klicken, um Ihre App aus dem App Store herunterzuladen. Wenn der Besucher Ihre App bereits hat, werden sie vom Banner aufgefordert, stattdessen die App zu öffnen. Auf diese Weise können Sie mehr App-Downloads und Interaktionen erzielen.

Wenn der Besucher ein Nicht-Apple-Gerät oder einen anderen Webbrowser verwendet, wird Apples natives Smart App Banner nicht angezeigt.

Wie wir Ihnen jedoch in Methode 2 zeigen werden, können Sie mit einem Plugin App-Download-Banner für Android-Benutzer und Besucher anderer Browser anzeigen.

Mit diesem Wissen wollen wir sehen, wie Sie Smart App Banner in WordPress hinzufügen können. Verwenden Sie einfach die Schnelllinks unten, um direkt zu der Methode zu springen, die Sie verwenden möchten:

Methode 1: WPCode verwenden (Smart App Banner in ganz WordPress anzeigen)

Der einfachste Weg, Smart App Banners zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von WPCode. Dieses kostenlose Plugin ermöglicht es Ihnen, mit einer Codezeile auf jeder Seite und in jedem Beitrag dasselbe Banner anzuzeigen.

Wenn Sie benutzerdefinierten Code zu WordPress hinzufügen, werden Sie in einigen Anleitungen aufgefordert, die functions.php-Datei Ihrer Website zu bearbeiten. Wir empfehlen dies nicht, da selbst ein kleiner Tippfehler oder Fehler häufige WordPress-Fehler verursachen oder Ihre Website sogar unzugänglich machen könnte.

Mit WPCode können Sie benutzerdefinierten Code zu Ihren WordPress-Theme-Dateien hinzufügen, ohne Risiken einzugehen. Sie können Code-Snippets auch per Knopfdruck aktivieren und deaktivieren.

Zuerst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserer Anfänger-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu Code-Snippets » Snippet hinzufügen. Klicken Sie dann unter der Option „Benutzerdefinierten Code hinzufügen (Neues Snippet)“ auf die Schaltfläche „+ Benutzerdefiniertes Snippet hinzufügen“.

Als Nächstes müssen Sie 'HTML-Snippet' als Code-Typ aus der Liste der Optionen auswählen, die auf dem Bildschirm erscheinen.

Dies führt Sie zur Seite „Benutzerdefinierten Ausschnitt erstellen“, auf der Sie einen Namen für den Code-Ausschnitt eingeben können.

Dies dient nur zu Ihrer Information, sodass Sie alles verwenden können, was Sie möchten.

Für den nächsten Schritt müssen Sie die ID Ihrer Anwendung kennen.

Um diese Informationen zu erhalten, öffnen Sie einen neuen Browser-Tab und rufen Sie die Seite Apple Services Marketing Tools auf. Geben Sie hier den Namen der Anwendung ein, die Sie bewerben möchten, und klicken Sie auf das 'Suchen'-Symbol.

Um alle iOS-Apps anzuzeigen, die Ihrem Suchbegriff entsprechen, scrollen Sie einfach zum Abschnitt 'Apps'.

Hier finden Sie die App, die Sie bewerben möchten, und klicken Sie darauf.

Am unteren Bildschirmrand sehen Sie einen 'Content Link'.

Die App-ID ist der Wert zwischen id und ?. Sie benötigen diese Informationen im nächsten Schritt, lassen Sie diesen Tab also geöffnet oder notieren Sie sich die App-ID.

Nachdem Sie die App-ID haben, wechseln Sie zurück zum WordPress-Dashboard.

Sie können nun den folgenden Schnipsel in den Code-Editor einfügen und die App-ID durch die Informationen ersetzen, die Sie im vorherigen Schritt erhalten haben:

<meta name="apple-itunes-app" content="app-id=12345678">

Wenn Sie damit fertig sind, scrollen Sie zum Feld „Einfügen“.

Wenn es noch nicht ausgewählt ist, klicken Sie auf „Automatisch einfügen“ und wählen Sie dann aus dem Dropdown-Menü „Website-weit Kopfzeile“ aus.

Wenn Sie bereit sind, scrollen Sie zum Seitenanfang und schalten Sie den Schalter 'Inaktiv' auf 'Aktiv'.

Klicken Sie abschließend einfach auf die Schaltfläche „Snippet speichern“, um Ihre Änderungen zu speichern.

Nun erscheint das Smart App Banner auf Ihrer WordPress-Website.

So zeigen Sie unterschiedliche Banner auf bestimmten Seiten und Beiträgen an

Wie Sie gesehen haben, ist es einfach, mit WPCode ein Smart Banner zu WordPress hinzuzufügen.

Aber was ist, wenn Sie verschiedene Apps auf verschiedenen Seiten bewerben möchten?

Zum Beispiel betreiben Sie vielleicht einen Lifestyle-Blog und haben eine Rezept-App, die Sie auf Ihren lebensmittelbezogenen Beiträgen bewerben möchten. Gleichzeitig haben Sie vielleicht eine Fitness-App, die Sie auf Ihren Workout-Seiten bewerben möchten.

In diesem Fall empfehlen wir ein Upgrade auf WPCode Premium (ab 49 $/Jahr). Dieses Plugin verfügt über eine intelligente bedingte Logik, mit der Sie genau steuern können, wo jedes Code-Snippet ausgeführt wird. Das bedeutet, Sie können mehrere intelligente App-Banner erstellen und diese dann auf jeder Seite oder jedem Beitrag anzeigen. 

Gehen Sie zunächst auf die WPCode-Website und kaufen Sie ein Abonnement. Sie können es dann wie jedes andere WordPress-Plugin installieren.

Gehen Sie danach in Ihrem WordPress-Dashboard zu WPCode » Einstellungen und geben Sie Ihren Lizenzschlüssel ein.

Diese Informationen finden Sie, indem Sie sich auf der WPCode-Website in Ihr Konto einloggen oder die Kaufbestätigungs-E-Mail überprüfen, die Sie beim Kauf von WPCode erhalten haben. 

Gehen Sie anschließend in Ihrem WordPress-Dashboard zu Code-Snippets » Snippet hinzufügen. Fahren Sie hier mit der Maus über den Abschnitt „Eigene Codes hinzufügen“.

Wenn es erscheint, wählen Sie „Benutzerdefiniertes Snippet hinzufügen“.

Klicken Sie im folgenden Fenster auf „HTML-Snippet“.

Geben Sie Ihrem Snippet einen beschreibenden Namen, damit Sie leicht erkennen können, für welche App es wirbt.

Zum Beispiel könnten Sie es „Smart App Banner – Rezept-App“ nennen.

Fügen Sie im Code-Editor den Meta-Tag für Ihre erste App hinzu.

Stellen Sie sicher, dass Sie die App-ID durch die richtige für Ihre Anwendung ersetzen:

<meta name="apple-itunes-app" content="app-id=YOUR_FIRST_APP_ID">

Scrollen Sie dann zum Abschnitt „Einfügung“ und wählen Sie „Automatisch einfügen“, falls dies noch nicht ausgewählt ist.

Öffnen Sie danach das Dropdown-Menü „Position“ und wählen Sie „Website-Header“, falls dies noch nicht ausgewählt ist.

Scrollen Sie als Nächstes etwas weiter nach unten zum Abschnitt „Intelligente bedingte Logik“. 

Klicken Sie hier, um die Einstellung „Logik aktivieren“ zu aktivieren.

Jetzt ist es an der Zeit, Ihre Regel für die intelligente bedingte Logik zu erstellen.

Öffnen Sie zunächst das Dropdown-Menü „Bedingungen“ und wählen Sie „Anzeigen“. Klicken Sie dann auf „Neue Gruppe hinzufügen“.

Klicken Sie anschließend auf das erste Dropdown-Menü (das standardmäßig „Angemeldet“ anzeigt).

Dadurch wird ein völlig neuer Abschnitt hinzugefügt.

Wählen Sie im linken Menü „Wo“.

Wählen Sie dann „Beitrag/Seite“.

Klicken Sie dann auf das zweite Dropdown-Menü und wählen Sie „Ist einer von“, falls dies noch nicht ausgewählt ist.

Klicken Sie schließlich auf das dritte Feld und suchen Sie nach der spezifischen Seite oder dem Beitrag, auf dem Sie diesen App-Banner anzeigen möchten.

Möchten Sie diesen Banner auf mehreren Seiten oder Beiträgen anzeigen? Klicken Sie dann einfach auf „Neue Gruppe hinzufügen“.

Sie können diese Schritte nun wiederholen, um zusätzliche Beiträge oder Seiten auszuwählen.

Wenn Sie mit der Einrichtung dieses Snippets zufrieden sind, scrollen Sie zum Seitenanfang und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“. Klicken Sie schließlich auf die Schaltfläche „Snippet speichern“, um Ihre Änderungen zu speichern.

Wiederholen Sie diesen Vorgang nun für jede zusätzliche App, die Sie bewerben möchten. 

WPCode zeigt nun den richtigen intelligenten App-Banner an, basierend auf der Seite oder dem Beitrag, den der Besucher gerade ansieht.

So testen Sie den Smart App Banner-Code in WordPress

Der beste Weg, das Smart App Banner zu testen, ist, Ihre Website auf einem iOS-Gerät mit der mobilen Safari-App zu besuchen. Tatsächlich wird das Smart App Banner nicht einmal angezeigt, wenn Sie versuchen, die mobile Version Ihrer WordPress-Site vom Desktop aus anzuzeigen.

Wenn Sie schnell prüfen möchten, ob der Code-Schnipsel funktioniert, ist eine Lösung die Verwendung des Inspect-Tools Ihres Browsers. Es ermöglicht Ihnen zu sehen, ob der <meta name>-Code in den <head>-Bereich Ihrer Website eingefügt wurde, was darauf hindeutet, dass er wie erwartet funktioniert.

Gehen Sie dazu auf eine beliebige Seite oder einen Beitrag auf Ihrem WordPress-Blog. Klicken Sie dann mit der rechten Maustaste irgendwo auf die Seite und wählen Sie 'Inspect'.

Ein neues Panel wird geöffnet und zeigt den gesamten Code der Website an.

Suchen Sie einfach den <head>-Abschnitt und klicken Sie auf den Pfeil, um ihn zu erweitern.

Suchen Sie nun nach dem <meta name="apple-itunes-app"> Code, den Sie im vorherigen Schritt hinzugefügt haben.

Wenn Sie diesen Code sehen, sollte das Smart App Banner auf iOS-Geräten angezeigt werden.

Methode 2: Verwendung von Mobile Smart App Banner (Banner für iOS und Android hinzufügen)

Wenn Sie ein Plugin wünschen, das sowohl iOS- als auch Android-Benutzer unterstützt, empfehlen wir die Verwendung des Mobile Smart App Banner-Plugins.

Es ist ein kostenloses Plugin, das automatisch das Gerät des Besuchers erkennt und den entsprechenden App-Store-Link anzeigt. 

Das Banner enthält eine integrierte „Schließen“-Schaltfläche, damit Besucher das Banner ausblenden können. Es verwendet Cookies, um diese Entscheidung zu speichern.

Beachten Sie, dass das Banner 7 Tage nach dem Ausblenden nicht mehr angezeigt wird.

Zuerst müssen Sie das Mobile Smart App Banner-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zum Installieren eines WordPress-Plugins.

Nach der Aktivierung gehen Sie in Ihrem WordPress-Dashboard zu Einstellungen » Mobile Smart App Banner.

Aktivieren Sie hier das Kontrollkästchen neben der Option „App-Banner aktivieren“, um das Banner auf Ihrer Website zu aktivieren. 

Wenn Sie damit fertig sind, klicken Sie auf die Schaltfläche „Hochladen“.

Wählen Sie dann das Bild aus, das Sie als App-Symbol verwenden möchten (wir empfehlen ein Bild mit 512x512 Pixel).

Sie können auch festlegen, wo das Banner auf dem Bildschirm angezeigt werden soll, indem Sie das Dropdown-Menü „Bannerposition“ öffnen und eine Option aus der Liste auswählen.

Wir haben festgestellt, dass die Platzierung des Banners am unteren Bildschirmrand weniger aufdringlich ist und oft zu einer höheren Interaktion führt.

Danach können Sie Ihren App-Namen in das Feld „App-Name“ und eine kurze Beschreibung in das Feld „App-Untertitel“ eingeben. 

Fügen Sie als Nächstes Ihren App Store-Link und Ihren Play Store-Link in die entsprechenden Felder ein.

Wenn Sie ändern möchten, wie das Banner aussieht, scrollen Sie einfach zum Abschnitt „Farbeinstellungen“. 

Hier können Sie die Hintergrundfarbe, die Schaltflächenfarbe, die Textfarbe der Schaltfläche und mehr mit den verschiedenen Einstellungen ändern.

Es gibt auch eine Echtzeitvorschau, sodass Sie leicht viele Einstellungen ausprobieren können, um zu sehen, was am besten aussieht. 

Alternativ können Sie Apples natives Smart App Banner in Safari verwenden, indem Sie das Kontrollkästchen neben „iOS Smart App Banner aktivieren“ deaktivieren.

Sie müssen dann Ihre App Store-ID eingeben, die Sie mit demselben Verfahren wie in Methode 1 finden. 

Wenn dies aktiviert ist, sehen Safari-Benutzer das native Apple-Banner, während Benutzer von Chrome, Firefox und anderen iOS-Browsern stattdessen Ihr benutzerdefiniertes Banner sehen.

Wenn Sie damit fertig sind, scrollen Sie zum Ende des Bildschirms und klicken Sie auf „Änderungen speichern“, um Ihr Banner live zu schalten.

FAQs zum Hinzufügen von Smart App Banners in WordPress

Wenn Sie noch Fragen haben, finden Sie hier unsere Top-FAQs, wie Sie Smart Banners zu Ihrer WordPress-Website hinzufügen.

Was ist ein Smart App Banner?

Smart App Banner werden am oberen Rand des Safari-Webbrowsers angezeigt und bieten App-Benutzern die Möglichkeit, eine App zu öffnen oder sie aus dem Apple App Store herunterzuladen.

Da Smart App Banners von Apple entwickelt wurden, haben sie ein einheitliches Design, das viele iOS-Benutzer erkennen. Sie werden nur Personen angezeigt, die iPhones und iPads mit iOS 6 oder höher verwenden.

Warum sehe ich mein Smart App Banner nicht auf dem Desktop?

Das Smart App Banner wird auf Desktop-Computern nicht angezeigt, auch wenn Sie die mobile Version Ihrer Website aufrufen.

Um das Banner in Aktion zu sehen, müssen Sie Ihre Website auf einem iPhone oder iPad über die mobile Safari-App besuchen.

Warum sehe ich das Smart App Banner auf meinem iPhone oder iPad nicht?

Smart App Banner werden nur auf Geräten mit iOS 6 oder höher angezeigt, wenn Sie die mobile Safari-App verwenden. Wenn Sie das Smart App Banner nicht sehen, sollten Sie zunächst prüfen, ob Sie die neuesten Versionen von iOS und der mobilen Safari-App haben.

Das Smart App Banner erkennt auch, ob das Gerät die App unterstützt und ob die App an Ihrem Standort verfügbar ist. Wenn Sie das Smart App Banner nicht sehen, ist es möglich, dass Ihr Gerät eine dieser Prüfungen nicht bestanden hat.

Warum ist das Smart App Banner in Safari verschwunden?

Wenn Sie das Banner durch Klicken auf das 'x'-Symbol ausblenden, wird es standardmäßig nicht wieder angezeigt.

Abhängig von Ihrem Mobilgerät müssen Sie möglicherweise einen privaten Browser-Tab öffnen, Ihren Cache oder Ihre Cookies löschen oder eine andere Aktion ausführen, um Ihre Einstellungen zurückzusetzen.

Funktionieren Smart App Banner auf Android-Geräten?

Nein, Apples native Smart App Banner sind exklusiv für iOS-Geräte, die den Safari-Browser verwenden. Android hat kein integriertes Äquivalent.

Sie können jedoch ein WordPress-Plugin wie Mobile Smart App Banner verwenden, um Android-Besuchern benutzerdefinierte App-Download-Banner anzuzeigen.

Wir hoffen, dieses Tutorial hat Ihnen geholfen zu lernen, wie man Smart App Banner in WordPress hinzufügt. Möglicherweise möchten Sie auch unseren Leitfaden zu Best Practices für Call-to-Actions oder unsere Expertenauswahl für die besten WordPress Lead-Magnet-Tools zur Steigerung der Conversions sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.