So erkennst du, ob ein Nutzer deine Website oder deine App nutzt

Aktualisiert am 6. Mai 2024 von Jan Bunk

Ein humanoider Roboter, der eine App und einen Browser untersucht, um Unterschiede zu finden, digitale Kunst

Es gibt viele Fälle, in denen es nützlich sein kann, zwischen einer Person, die deine Website im Browser ansieht, und einer Person, die sie über deine App ansieht, zu unterscheiden. Vielleicht möchtest du analysieren, wie gut deine App von den Nutzern angenommen wird, oder du möchtest den App-Nutzern andere Inhalte zeigen.

So wie es mehrere Anwendungsfälle gibt, gibt es auch mehrere Möglichkeiten, dieses Ziel zu erreichen. Gehen wir sie der Reihe nach durch.

Basierend auf dem User Agent

Die Filterung nach User Agent funktioniert nur, wenn du die App so konfiguriert hast, dass sie den User Agent, den sie verwendet, anpasst. Du kannst diese Option in den Navigationseinstellungen deiner App aktivieren. Navigationseinstellungen öffnen
Wenn du diese Option nicht aktivieren möchtest, schau dir die anderen in diesem Artikel vorgestellten Filtermethoden an.

Der Benutzeragent ist eine kurze Zeichenfolge, die der Browser an Websites sendet, wenn er eine Seite lädt. Der User Agent enthält Informationen über den Browser. Ein Firefox-Browser könnte zum Beispiel diesen User Agent senden:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

Daran kann deine Website erkennen, dass der Nutzer die Version 47.0 des Mozilla Firefox-Browsers verwendet. Genau wie die Browser sendet auch deine App einen User Agent, der sie identifiziert.

Von der App verwendete User Agents

Die App benutzt ein paar verschiedene User Agents:

  • $regularUserAgent App-WebView ($operatingSystem) $version
    Dies ist der typische User Agent, der vom internen Browser der App verwendet wird (der deine Website innerhalb der App anzeigt). Anfragen, die mit diesem User Agent gestellt werden, werden vom App-Nutzer durch das Navigieren zwischen den Seiten ausgelöst.
  • App-HttpClient $version
    Dies ist der User Agent, der für Anfragen der App verwendet wird, die nicht direkt vom Nutzer initiiert werden. Zum Beispiel macht die App damit einige Anfragen, um Teile der Website für die Offline-Nutzung zu speichern. Der Offline-Modus ist heutzutage standardmäßig deaktiviert, daher wirst du wahrscheinlich nicht viele Anfragen mit diesem User Agent sehen.

$version ist die interne Version der App (z.B. 1.4.8+52) und $operatingSystem ist die Plattform, auf der die App verwendet wird (z.B. ios oder android).

$regularUserAgent ist der User Agent eines mobilen Browsers, der von dem Gerät erwartet wird, wie Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148

Ein Beispiel für einen User-Agent, den die App auf iOS verwenden könnte, wäre also: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 App-WebView (ios) 1.4.8+52

Filtern für den User Agent der App

Anhand des obigen User-Agent-Formats kannst du erkennen, dass deine Website von der App geladen wird, indem du prüfst, ob der User-Agent "App-WebView" enthält. Wenn du auch das Betriebssystem prüfen willst, kannst du zusätzlich prüfen, ob der User Agent auch "(android)" oder "(ios)" enthält.

Beispiel: Unterschiedliche Inhalte auf einer WordPress-Website anzeigen

With the Default WordPress Editor

Wenn du WordPress verwendest, kannst du das Plugin "UserAgent Content Switcher" benutzen. Der Name des Plugins ist ziemlich aussagekräftig: Es ermöglicht dir, Nutzern je nach ihrem User Agent unterschiedliche Inhalte anzuzeigen. Hier erfährst du, wie du es einrichten kannst (und ein Beispiel für einen Anwendungsfall):

  1. Installiere das Plugin auf deiner Website. Bitte beachte, dass wir nicht mit dem Plugin oder seinem Entwickler verbunden sind. Wir haben es nur getestet und es schien kostenlos zu sein und funktionierte gut.
  2. Auf der Einstellungsseite des Plugins fügst du einen neuen Typ mit diesen Einstellungen hinzu:
    • Typenname: App
    • Kurzcode-Attribut: app
    • User Agent: App-WebView Ein Screenshot des ausgefüllten Formulars mit den oben genannten Informationen.
  3. Bearbeite eine deiner Seiten und wechsle zum Code-Editor.
  4. Jetzt kannst du Abschnitte erstellen, die nur in der App sichtbar sind, wie hier:
    
    Dieser Text ist für alle sichtbar.
    
    [agentsw ua='app']
    Dieser Text ist nur für App-Nutzer sichtbar!
    [/agentsw]
    Ein Screenshot des obigen Textes im WordPress-Code-Editor.

With Elementor

If you're using Elementor, you can instead use the free Powerpack plugin with the powerpack-webtoapp extension plugin. Here's how it works:

  1. Install the Powerpack plugin through the WordPress store.
  2. Download the powerpack-webtoapp plugin as a zip file and install it.
    The powerpack-webtoapp plugin (and the idea to use Powerpack on Elementor websites) was created by ALL IN APPLI. They use the plugin to manage multiple webtoapp.design apps and generously decided to share it.
  3. Now you can set specific elements to only be displayed in the app. A screenshot of the Powerpack settings.

JavaScript verwenden

Basierend auf dem User Agent

Natürlich kannst du den User Agent nicht nur auf der Serverseite überprüfen (wie im vorherigen Abschnitt beschrieben), sondern auch in JavaScript.

Die Filterung nach User Agent funktioniert nur, wenn du die App so konfiguriert hast, dass sie den User Agent, den sie verwendet, anpasst. Du kannst diese Option in den Navigationseinstellungen deiner App aktivieren. Navigationseinstellungen öffnen

Hier ist ein Beispiel dafür, wie du mit JavaScript erkennen kannst, ob der Nutzer die App oder einen Browser benutzt:


const isApp = navigator.userAgent.includes("App-WebView");
if (isApp) {
    console.log("The user is using the app.");
} else {
    console.log("The user is using a browser.");
}
    
Alternativ kannst du auch getAppPlatform aus dem App-Helfer-Skript verwenden, was ganz ähnlich funktioniert.

Durch Überprüfung auf HTML-Änderungen

Die App nimmt winzige unsichtbare Änderungen am HTML-Code der Website vor, die für einige Funktionen der App notwendig sind. Wir können diese Änderungen auch nutzen, um zu erkennen, ob die Seite von der App geladen wurde.

Da dies etwas kompliziert ist, empfehlen wir, dass du executeWhenAppReady aus dem App-Helfer-Skript verwendest. Dann kannst du einen beliebigen Code in die executeWhenAppReady Funktion einfügen und er wird nur ausgeführt, wenn die Seite von der App geladen wurde. Ein kleiner Nachteil dieser Methode ist, dass es ein paar Millisekunden dauert, bis der Code ausgeführt wird, auch wenn die Seite von der App geladen wurde.

Indem du Code in die App einfügst

Auf deiner Website-Anpassungsseite hast du die Möglichkeit, JavaScript oder CSS hinzuzufügen, die die App in jede geladene Seite einfügen soll. Die Möglichkeiten sind endlos, aber als Beispiel wollen wir diesen Text in der App grün färben:

<p id="red-text" style="color: red;">This text is red in the browser.</p>

Jetzt können wir dieses JavaScript so konfigurieren, dass es injiziert wird:

document.getElementById("red-text").style.color = "green";

Oder alternativ, dieses CSS zu injizieren:

#red-text {
    color: green !important;
}
Ein Screenshot der ausgefüllten Website-Anpassung.

Wie du siehst, funktioniert das auch als Möglichkeit, sich auf der Website anders zu verhalten als in der App.

Verwandte Artikel


Ein humanoider Roboter benutzt eine Lupe, um ein Smartphone zu betrachten. Das Smartphone zeigt die Buchstaben PWA an, digitale Kunst

Progressive Web Apps vs. Native Apps

Willst du deine Website auf die nächste Stufe heben? Hier erfährst du, wie progressive Web-Apps im Vergleich zu nativen Standard-Apps abschneiden und wie du deine Website in eine App verwandelst.

Ein humanoider Roboter mit einer physikalischen Stoppuhr, der eine Fabrikhalle mit Robotern überwacht, die an Schreibtischen arbeiten, digitale Kunst

Wir haben 238 Apps veröffentlicht - hier siehst du, wie lange die App-Überprüfung gedauert hat

Wir haben viele Apps veröffentlicht und verfolgt, wie lange es dauerte, bis sie in die App Stores kamen, einschließlich der Zeiten, in denen Apps abgelehnt und erneut eingereicht wurden.

Bild mit Text: Vorbereiten deines Apple Developer Accounts für die Aktualisierung deiner bestehenden App

Erforderliche Schritte, damit wir deine bestehende iOS App aktualisieren können

Diese Anleitung erklärt alle Schritte, die du erledigen musst, damit wir deine App, die bereits im Apple App Store veröffentlicht wurde, aktualisieren können.


Autor Jan Bunk
Geschrieben von
Jan Bunk

Hallo, ich bin Jan! Ich habe webtoapp.design 2019 während meines Informatikstudiums gegründet. Seitdem hat sich viel verändert - nicht nur, dass ich meinen Abschluss gemacht habe, sondern auch, dass nicht mehr nur ich webtoapp.design betreibe. Wir sind zu einem globalen, vollständig remote arbeitenden Team angewachsen und haben viel Erfahrung mit der Entwicklung und Veröffentlichung von Apps gesammelt. Wir haben Hunderte von Apps entwickelt und in den App Stores veröffentlicht, wo sie hunderttausendfach heruntergeladen wurden.