Wenn du deine progressive Web-App (PWA) installierst, kann sie von Nutzern leichter gefunden und verwendet werden. Selbst bei Browserwerbung wissen einige Nutzer nicht, dass sie eine PWA installieren können. Daher kann es hilfreich sein, eine In-App-Erfahrung anzubieten, über die Sie die Installation Ihrer PWA bewerben und aktivieren können.
Dieser Artikel ist bei Weitem nicht vollständig, sondern bietet einen Ausgangspunkt für verschiedene Möglichkeiten, die Installation Ihrer PWA zu fördern. Unabhängig davon, welche oder welche Muster Sie verwenden, führen sie alle zum selben Code, der den Installationsvorgang auslöst. Dies wird unter Bereitstellen einer eigenen In-App-Installation beschrieben.
Best Practices
Es gibt einige Best Practices, die unabhängig von den auf Ihrer Website verwendeten Werbemustern gelten.
- Werbung sollte sich nicht während des Kaufprozesses befinden. Auf einer PWA-Anmeldeseite können Sie den Call-to-Action beispielsweise unterhalb des Anmeldeformulars und der Schaltfläche „Senden“ platzieren. Eine störende Nutzung von Werbemustern verringert die Nutzerfreundlichkeit Ihrer PWA und wirkt sich negativ auf Ihre Engagement-Messwerte aus.
- Bieten Sie die Möglichkeit, die Werbung abzulehnen oder abzulehnen. Erinnere dich an die Präferenz des Nutzers, wenn er dies tut, und frage nur dann noch einmal nach, wenn sich die Beziehung des Nutzers zu deinen Inhalten ändert, z. B. wenn er sich angemeldet oder einen Kauf abgeschlossen hat.
- Kombiniere Techniken in verschiedenen Teilen deiner PWA, aber achte darauf, dass du deine Nutzer nicht mit Installationswerbung überfordert oder verärgerst.
- Das Angebot sollte erst nach dem Auslösen des Ereignisses
beforeinstallpromptangezeigt werden.
Automatische Werbung für Browser
Wenn bestimmte Kriterien erfüllt sind, zeigen die meisten Browser dem Nutzer automatisch an, dass deine progressive Web-App installierbar ist. In Chrome für Computer wird beispielsweise in der Omnibox eine Schaltfläche zum Installieren angezeigt.
In Chrome für Android wird dem Nutzer eine Mini-Infoleiste angezeigt. Dies kann jedoch verhindert werden, indem preventDefault() für das Ereignis beforeinstallprompt aufgerufen wird.
Wenn Sie preventDefault() nicht aufrufen, wird das Banner angezeigt, wenn ein Nutzer Ihre Website zum ersten Mal besucht und die Kriterien für die Installierbarkeit unter Android erfüllt. Nach etwa 90 Tagen wird das Banner wieder eingeblendet.
Werbemuster der Benutzeroberfläche
Werbemuster der Benutzeroberfläche können für fast jede Art von PWA verwendet werden und erscheinen beispielsweise in der Websitenavigation und auf Bannern. Wie bei jeder anderen Art von Werbemuster ist es wichtig, den Kontext des Nutzers zu kennen, um Störungen der User Journey so gering wie möglich zu halten.
Websites, die mit Bedacht vorgehen, wenn sie die Benutzeroberfläche für Werbung auslösen, erzielen eine größere Anzahl von Installationen und vermeiden, den Kaufprozess von Nutzern zu beeinträchtigen, die nicht an der Installation interessiert sind.
Schaltfläche für die einfache Installation
Am einfachsten ist es, eine Schaltfläche „Installieren“ oder „App herunterladen“ an einer geeigneten Stelle im Webinhalten einzufügen. Die Schaltfläche darf keine anderen wichtigen Funktionen blockieren und den Nutzer beim Durchqueren Ihrer Anwendung gehindert werden.
Fester Header
Dies ist eine Installationsschaltfläche im Header Ihrer Website. Andere Headerinhalte umfassen oft das Branding der Website, z. B. ein Logo und das Dreistrich-Menü. Je nach Funktionalität und Nutzeranforderungen deiner Website können Header den Wert position:fixed haben oder nicht.
Wenn Sie die Installation von PWAs im Header Ihrer Website richtig verwenden, können Ihre treuesten Kunden leichter zu Ihrer Website zurückkehren. Pixel im PWA-Header sind wertvoll. Achten Sie deshalb darauf, dass der Call-to-Action der Installation eine geeignete Größe hat, eine größere Wichtigkeit hat als andere Header-Inhalte und unaufdringlich ist.
Folgende Schritte sind erforderlich:
- Die Installationsschaltfläche wird nur angezeigt, wenn
beforeinstallpromptausgelöst wurde. - Bewerten Sie den Wert Ihres installierten Anwendungsfalls für Ihre Nutzer. Ziehen Sie in Betracht, Ihre Werbung selektives Targeting nur Nutzern zu präsentieren, die wahrscheinlich davon profitieren werden.
- Nutzen Sie effizienten Platz in der Kopfzeile. Überlege dir, was noch hilfreich wäre, um deinem Nutzer im Header anzubieten, und wäge die Priorität der Installationsaktion im Vergleich zu anderen Optionen ab.
Navigationsmenü
Das Navigationsmenü eignet sich hervorragend, um die Installation deiner App zu fördern, da Nutzer, die das Menü öffnen, Interaktionen mit deiner App signalisieren.
Folgende Schritte sind erforderlich:
- Vermeiden Sie es, wichtige Navigationsinhalte zu stören. Platzieren Sie die Werbung für PWA-Installationen unter anderen Menüelementen.
- Stell in einer kurzen, relevanten Verkaufspräsentation dar, warum der Nutzer von der Installation deiner PWA profitieren würde.
Landingpage
Der Zweck einer Landingpage besteht darin, Ihre Produkte und Dienstleistungen zu bewerben. Sie sollte also groß sein, um die Vorteile der Installation Ihrer PWA hervorzuheben.
Erklären Sie zuerst das Nutzenversprechen Ihrer Website und informieren Sie die Besucher dann darüber, was sie von der Installation erwarten können.
Folgende Schritte sind erforderlich:
- Sprechen Sie die Funktionen an, die Ihren Besuchern am wichtigsten sind, und betonen Sie Keywords, über die sie möglicherweise auf Ihre Landingpage gelangt sind.
- Sorge dafür, dass deine Installationswerbung und der Call-to-Action ins Auge fallen, aber erst dann, wenn dein Nutzenversprechen klar formuliert ist. Schließlich ist das Ihre Landingpage.
- Erwäge, Installationen in dem Bereich deiner App hinzuzufügen, in dem die Nutzer die meiste Zeit verbringen.
Banner installieren
Die meisten Nutzer stoßen auf Installationsbanner auf mobile Seiten und sind mit den Interaktionen von Bannern vertraut. Banner sollten mit Bedacht eingesetzt werden, da sie den Nutzer stören können.
Folgende Schritte sind erforderlich:
- Warten Sie, bis der Nutzer Interesse an Ihrer Website gezeigt hat, bevor Sie ein Banner einblenden. Schließt der Nutzer das Banner, wird es nicht noch einmal eingeblendet, es sei denn, er löst ein Conversion-Ereignis aus, das auf eine stärkere Interaktion mit Ihren Inhalten hindeutet, z. B. einen Kauf auf einer E-Commerce-Website oder die Registrierung für ein Konto.
- Erläutern Sie kurz, warum Sie Ihre PWA im Banner installieren sollten. Du kannst beispielsweise die Installation einer PWA von der Installation einer iOS-/Android-App unterscheiden, indem du erwähnst, dass sie fast keinen Speicherplatz auf dem Gerät des Nutzers benötigt oder dass sie sofort und ohne Store-Weiterleitung installiert wird.
Temporäre Benutzeroberfläche
Temporäre UI-Elemente wie das Snackbar-Designmuster benachrichtigen den Nutzer und ermöglichen ihm, eine Aktion auszuführen, in diesem Fall die App zu installieren. Bei richtiger Anwendung stören diese UI-Muster den Nutzerfluss nicht und werden in der Regel automatisch geschlossen, wenn sie vom Nutzer ignoriert werden.
Blenden Sie die Snackbar nach einigen Interaktionen mit Ihrer Anwendung ein. Wenn sie beim Seitenaufbau oder außerhalb des Kontexts erscheint, kann sie leicht übersehen werden oder zu kognitiver Überlastung führen. In diesem Fall schließen die Nutzer einfach alles, was sie sehen. Neue Nutzer deiner Website sind möglicherweise noch nicht bereit, deine PWA zu installieren. Daher ist es empfehlenswert, zu warten, bis starke Signale des Nutzers vorliegen, bevor Sie dieses Muster verwenden, z. B. wiederholte Besuche, eine Nutzeranmeldung oder ein ähnliches Conversion-Ereignis.
Folgende Schritte sind erforderlich:
- Blenden Sie die Snackbar 4 bis 7 Sekunden lang ein, damit Nutzer genügend Zeit haben, sie zu sehen und darauf zu reagieren, ohne zu stören.
- Vermeiden Sie es, sie über andere temporäre UI-Elemente wie Banner anzuzeigen.
- Warten Sie, bis starke Signale des Nutzers vorliegen, bevor Sie dieses Muster verwenden, z. B. wiederholte Besuche, eine Nutzeranmeldung oder ein ähnliches Conversion-Ereignis.
Nach der Umwandlung
Unmittelbar nach einem Nutzer-Conversion-Ereignis, z. B. nach einem Kauf auf einer E‐Commerce-Website, ist das eine gute Gelegenheit, die Installation deiner PWA zu bewerben. Der Nutzer interagiert deutlich mit Ihren Inhalten, und eine Conversion signalisiert häufig, dass er Ihre Dienste wieder nutzen wird.
Buchungsvorgang oder Bezahlvorgang
Du kannst während oder nach einem sequenziellen Prozess, z. B. nach der Buchung oder dem Bezahlvorgang, ein Installationsangebot präsentieren. Wenn Sie die Werbung erst präsentieren, nachdem der Nutzer den Kaufprozess abgeschlossen hat, können Sie sie oft noch deutlicher hervorheben.
Folgende Schritte sind erforderlich:
- Fügen Sie einen relevanten Call-to-Action ein. Welche Nutzer profitieren von der Installation deiner App und warum? Wie relevant ist er für den aktuellen Prozess?
- Wenn Ihre Marke besondere Angebote für Nutzer Ihrer installierten App hat, erwähnen Sie diese.
- Halten Sie die Werbung von den nächsten Schritten auf dem Prozess weg, da dies die Abschlussquoten negativ beeinflussen kann. Im E‐Commerce-Beispiel oben sehen Sie, dass sich der wichtige Call-to-Action zum Bezahlen über der Werbung für App-Installationen befindet.
Anmeldung, Anmeldung oder Abmeldung
Dieses Angebot ist ein Sonderfall des Werbemusters Journey, bei dem die Werbekarte auffälliger gestaltet werden kann.
Diese Seiten werden normalerweise nur von aktiven Nutzern aufgerufen, für die das Nutzenversprechen Ihrer PWA bereits etabliert ist. Häufig gibt es auch nicht viele andere nützliche Inhalte, die Sie auf diesen Seiten platzieren können. Ein größerer Call-to-Action ist weniger störend, solange er nicht im Weg ist.
Folgende Schritte sind erforderlich:
- Stören Sie die Navigation der Nutzer innerhalb des Anmeldeformulars nicht. Bei einem mehrstufigen Prozess sollten Sie warten, bis der Nutzer den Prozess abgeschlossen hat.
- Funktionen hervorheben, die für angemeldete Nutzer besonders relevant sind
- Du kannst eine zusätzliche Installationswerbung innerhalb der angemeldeten Bereiche deiner App hinzufügen.
Inline-Werbemuster
Inline-Werbetechniken vermischen die Werbung mit dem Inhalt der Website. Dies ist oft subtiler als das Hochstufen auf der Benutzeroberfläche, was Nachteile hat. Ihr Angebot soll so auffällig sein, dass interessierte Nutzer es bemerken, aber nicht so sehr, dass es die Qualität der Nutzererfahrung beeinträchtigt.
In-Feed
Ein Angebot für In-Feed-Installationen wird zwischen Nachrichtenartikeln oder anderen Listen von Infokarten in Ihrer PWA angezeigt.
Ihr Ziel ist es, Nutzern zu zeigen, wie sie bequemer auf Inhalte zugreifen können, die ihnen gefallen. Konzentriere dich auf Funktionen, die deinen Nutzern nützlich sind.
Folgende Schritte sind erforderlich:
- Begrenzen Sie die Häufigkeit der Werbeaktionen, um Nutzer nicht zu verärgern.
- Geben Sie Ihren Nutzern die Möglichkeit, Angebote zu schließen.
- Merken Sie sich die vom Nutzer gewählte Option zum Schließen.