Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Einfaches Hinzufügen von Smart-App-Bannern in WordPress

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

Eine der einfachsten Möglichkeiten, dies zu tun, sind intelligente App-Banner. Diese eleganten kleinen Banner erscheinen nahtlos am oberen Rand Ihrer Website, wenn sie auf iPhones und iPads angezeigt werden, und fordern die Besucher sanft auf, Ihre App herunterzuladen oder zu öffnen, wenn sie sie bereits haben.

Intelligente App-Banner sind eine fantastische Möglichkeit, Downloads zu steigern, Benutzer zu binden und ein nahtloses mobiles Erlebnis zu bieten. Wenn Sie mehr darüber erfahren möchten, haben wir 2 einfache Methoden gefunden, um sie zu Ihrer WordPress Website hinzuzufügen.

How to add smart app banners in WordPress (easy)

Warum intelligente App-Banner in WordPress hinzufügen?

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

Da diese Apps für mobile Geräte konzipiert sind, bieten sie oft ein besseres Benutzererlebnis. Außerdem können Sie mit mobilen Push-Benachrichtigungen Erinnerungen, personalisierte Inhalte, Angebote, Aktualisierungen und mehr anzeigen. All dies bedeutet mehr Engagement, Konversionen und Verkäufe.

Wenn Sie noch keine mobile App haben, können Sie sich unsere vollständige Anleitung ansehen, wie Sie eine WordPress-Website in eine mobile App umwandeln.

Sie können iPhone- und iPad-Benutzer mit einem intelligenten App-Banner zum Herunterladen Ihrer mobilen App auffordern. Dies ist ein Banner, das oben auf dem Bildschirm erscheint, wenn ein iOS-Nutzer Ihre Website mit dem Safari-Browser besucht.

An example of a smart app banner on a WordPress website

Besucher können auf das Banner klicken, um Ihre App aus dem App Store herunterzuladen. Wenn der Besucher Ihre App bereits hat, wird er durch das Banner aufgefordert, die App zu öffnen. Auf diese Weise können Sie mehr App-Downloads und Engagement erreichen.

Wenn der Besucher ein Nicht-Apple-Gerät oder einen anderen Webbrowser verwendet, blendet WordPress das Banner automatisch aus.

Das folgende Bild zeigt zum Beispiel die gleiche Website im mobilen Chrome-Browser.

A hidden smart app banner.

Sehen wir uns also an, wie Sie Smart-App-Banner in WordPress hinzufügen können. Verwenden Sie einfach die unten stehenden Links, um direkt zu der gewünschten Methode zu gelangen:

Methode 1: Verwendung von WPCode (Anzeigen eines Smart App-Banners in WordPress)

Der einfachste Weg, Smart-App-Banner zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung von WPCode. Mit diesem kostenlosen Plugin können Sie das gleiche Banner auf jeder Seite und jedem Beitrag mit nur einer Codezeile anzeigen.

In diesem Sinne ist WPCode die perfekte Wahl, wenn Sie eine einzelne iOS-Anwendung bewerben möchten. Wenn Sie jedoch verschiedene Banner auf verschiedenen Seiten anzeigen möchten, empfehlen wir stattdessen Methode 2.

Wenn Sie individuellen Code zu WordPress hinzufügen, werden Sie in einigen Anleitungen aufgefordert, die Datei functions.php Ihrer Website zu bearbeiten. Davon raten wir ab, denn schon ein kleiner Tippfehler kann zu häufigen WordPress-Fehlern führen oder Ihre Website sogar unzugänglich machen.

Mit WPCode können Sie ohne Risiko benutzerdefinierten Code zu Ihren WordPress-Theme-Dateien hinzufügen. Außerdem können Sie Code-Snippets mit einem Klick auf eine Schaltfläche aktivieren und deaktivieren.

Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Anweisungen finden Sie in unserem Leitfaden für Anfänger zur Installation eines WordPress-Plugins.

Gehen Sie nach der Aktivierung zu Code Snippets “ Snippet hinzufügen. Klicken Sie anschließend auf die Schaltfläche „Snippet verwenden“ unter der Option „Eigenen Code hinzufügen (neues Snippet)“.

Adding an iOS smart app banner to WordPress

Dadurch gelangen Sie auf die Seite „Benutzerdefiniertes Snippet erstellen“, wo Sie einen Namen für das Code-Snippet eingeben können. Dieser Name dient nur als Referenz, Sie können also alles verwenden, was Sie wollen.

Öffnen Sie anschließend das Dropdown-Menü „Codetyp“ und wählen Sie „HTML Snippet“.

Creating an Apple app banner using WPCode

Für den nächsten Schritt benötigen Sie die ID Ihrer Anwendung.

Um diese Informationen zu erhalten, öffnen Sie eine neue Browser-Registerkarte und rufen Sie die Seite Apple Services Marketing Tools auf. Geben Sie hier den Namen der Anwendung ein, für die Sie werben möchten, und klicken Sie auf das Symbol „Suchen“.

The App Marketing Tools website

Um alle iOS-Apps zu sehen, die Ihrem Suchbegriff entsprechen, scrollen Sie einfach zum Abschnitt „Apps“.

Suchen Sie hier die App, für die Sie werben möchten, und klicken Sie sie an.

Getting the app ID for an iPhone or iPad iOS app

Am unteren Rand des Bildschirms sehen Sie einen „Inhaltslink“.

Die App-ID ist der Wert zwischen id und ?. Sie werden diese Information im nächsten Schritt benötigen. Lassen Sie also entweder diese Registerkarte geöffnet oder notieren Sie sich die App-ID.

An Apple App ID

Da Sie nun die App-ID haben, wechseln Sie zurück zum WordPress-Dashboard. Sie können nun das folgende Snippet in den Code-Editor einfügen, wobei Sie die App-ID durch die im vorherigen Schritt erhaltenen Informationen ersetzen:

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

Danach müssen Sie zum Feld „Einfügen“ blättern. Wenn es nicht bereits ausgewählt ist, klicken Sie auf „Automatisch einfügen“ und wählen Sie dann „Site Wide Header“ aus dem Dropdown-Menü.

Adding custom code to the WordPress theme header

Wenn Sie bereit sind, blättern Sie zum oberen Rand der Seite und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“ um.

Zum Schluss klicken Sie einfach auf die Schaltfläche „Snippet speichern“, um Ihre Änderungen zu speichern.

Publishing a smart app banner to WordPress

Jetzt wird das Smart-App-Banner auf Ihrer WordPress-Website angezeigt.

So testen Sie den Smart App Banner Code in WordPress

Am besten testen Sie das Smart-App-Banner, indem Sie Ihre Website auf einem iOS-Gerät mit der Safari-Mobil-App besuchen. Das Smart-App-Banner wird nicht einmal angezeigt, wenn Sie versuchen, die mobile Version Ihrer WordPress-Website vom Desktop aus anzuzeigen.

Wenn Sie schnell überprüfen müssen, ob der Code-Schnipsel funktioniert, können Sie das Inspektionstool Ihres Browsers verwenden. Damit können Sie sehen, ob der <meta name>-Code in den <head>-AbschnittIhrer Website eingefügt wurde, was darauf schließen lässt, dass er wie erwartet funktioniert.

Gehen Sie dazu auf eine beliebige Seite oder einen Beitrag in Ihrem WordPress-Blog. Klicken Sie dann mit der rechten Maustaste auf eine beliebige Stelle der Seite und wählen Sie „Untersuchen“.

The Google Chrome Inspect tool

Es öffnet sich ein neues Fenster, in dem der gesamte Code der Website angezeigt wird.

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

Apple app code in the WordPress header

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

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

Testing the Apple smart app banner code

Methode 2: Verwendung von Smart App Banner (Hinzufügen von Bannern zu bestimmten Seiten und Beiträgen)

Manchmal möchten Sie vielleicht nur auf bestimmten Seiten und Beiträgen für Anwendungen werben.

In diesem Fall empfehlen wir die Verwendung des Smart App Banner-Plugins. Dieses Plugin ermöglicht es Ihnen, verschiedene Banner auf verschiedenen Webseiten anzuzeigen und Affiliate-Daten in diese Banner einzubinden. Diese Funktionen machen es zu einem großartigen Plugin für Affiliate-Vermarkter.

Zunächst müssen Sie das Smart App Banner-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie ein App-Banner auf bestimmten Seiten oder Beiträgen, auf der WordPress-Startseite oder auf Ihrer gesamten Website einfügen.

Werfen wir zunächst einen Blick auf die Einstellungen der App. Hier können Sie jeder Seite und jedem Beitrag ein Banner hinzufügen oder ein Smart-App-Banner nur auf Landingpages mit hoher Konversionsrate einrichten.

Gehen Sie zunächst auf Einstellungen “ Smart App Banner und geben Sie den Wert der Anwendung in das Feld „App ID“ ein.

Adding an app ID to a WordPress plugin

Sie können diese Informationen auf die gleiche Weise wie in Methode 1 beschrieben erhalten.

Wenn Sie Affiliate-Marketing nutzen, um mit einem Online-Blog Geld zu verdienen, können Sie Ihren Affiliate-Token in das Feld „Affiliate-Daten“ eingeben. Die Informationen variieren, so dass Sie sich möglicherweise bei Ihrem Partnerportal anmelden oder mit Ihren Partnern sprechen müssen, um den richtigen Token zu erhalten.

Danach können Sie entweder das Kästchen „Auf allen Seiten anzeigen“ ankreuzen oder es unmarkiert lassen. Wenn Sie das Kästchen nicht ankreuzen, wird das App-Banner nur auf Ihrer Homepage angezeigt.

Showing a smart app banner across your WordPress blog or website

Wenn Sie mit der Gestaltung des Banners zufrieden sind, klicken Sie einfach auf die Schaltfläche „Änderungen speichern“, um das Banner zu aktivieren.

Möchten Sie stattdessen ein Smart-App-Banner zu bestimmten Seiten und Beiträgen hinzufügen? So können Sie genau steuern, wo das Banner auf Ihrer Website erscheint.

Wenn Sie zum Beispiel ein Affiliate-Vermarkter sind, könnten Sie verschiedene Apps auf verschiedenen Seiten bewerben und dann Google Analytics verwenden, um zu sehen, welche Banner die meisten Konversionen erzielen.

Öffnen Sie dazu einfach die Seite oder den Beitrag, auf der/dem Sie das Banner hinzufügen möchten. Suchen Sie nun den neuen Abschnitt „Smart App Banner“ im WordPress Editor für Inhalte.

Adding a smart app banner to a WordPress page or post

Fügen Sie hier einfach die ID der Anwendung und optionale Partnerinformationen hinzu, indem Sie den oben beschriebenen Prozess befolgen.

Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie einfach auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu aktivieren.

An example of a smart app banner on a WordPress blog or website

Anschließend können Sie diese Schritte einfach wiederholen, um ein Smart-App-Banner zu Ihren anderen Seiten hinzuzufügen.

FAQs zum Hinzufügen von Smart-App-Bannern in WordPress

Wenn Sie noch Fragen haben, finden Sie hier die wichtigsten FAQs zum Hinzufügen von Smart Banners zu Ihrer WordPress-Website.

Was ist ein intelligentes App-Banner?

Intelligente App-Banner werden oben im Safari-Webbrowser angezeigt und bieten App-Nutzern die Möglichkeit, eine App zu öffnen oder sie aus dem Apple App Store herunterzuladen.

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

Warum kann ich mein Smart-App-Banner auf dem Desktop nicht sehen?

Das Smart-App-Banner wird auf Desktop-Computern nicht angezeigt, selbst 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 mit der Safari-Mobil-App besuchen.

Warum kann ich das Smart-App-Banner auf meinem iPhone oder iPad nicht sehen?

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

Das Smart-App-Banner erkennt auch, ob das Gerät die App unterstützen kann 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 die Schaltfläche „x“ ausblenden, wird es standardmäßig nicht mehr angezeigt.

Je nach Mobilgerät müssen Sie möglicherweise eine private Browser-Registerkarte öffnen, Ihren Cache oder Ihre Cookies löschen oder eine andere Aktion durchführen, um Ihre Einstellungen zurückzusetzen.

Wir hoffen, dass dieses Tutorial Ihnen geholfen hat, zu lernen, wie man intelligente App-Banner in WordPress hinzufügt. Vielleicht interessieren Sie sich auch für unseren Leitfaden zu den besten Call-to-Action-Praktiken oder unsere Expertenauswahl für die besten WordPress-Leadmagnet-Werkzeuge, um die Konversionsrate in die Höhe zu treiben.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

5 KommentareEine Antwort hinterlassen

  1. Jiří Vaněk

    Is there a similar option for Android device owners, or is it only for the Apple store? I write articles on the topic of Android and this would really come in handy.

    • WPBeginner Support

      We do not have a method we would recommend at the moment for Android users.

      Admin

      • Jiří Vaněk

        I’m sorry because my articles are mostly about Android. But thank you for your response, and I’ll try to find an equivalent plugin for Android and Google Play.

  2. Ralph

    I didn’t know such thing… is a thing :)
    I have technical blog and often get offers of promoting apps for money in my articles and this is great way to do this. Especially that we get more and more mobile traffic. I used to have 60% mobile 40% desktop, but now it is 75% mobile and still growing trend.

    • WPBeginner Support

      Mobile is definitely a growing way that sites are being viewed :)

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.