Wie man erkennt, ob ein Nutzer deine Website oder deine App verwendet

Es gibt viele Fälle, in denen es nützlich sein kann, zwischen einer Person zu unterscheiden, die deine Website im Browser ansieht, und einer Person, die sie über deine App ansieht. Vielleicht möchtest du Analysen darüber anzeigen, wie gut deine App von Benutzern angenommen wird, oder du möchtest anderen Inhalt für App-Benutzer anzeigen.

Genau wie es mehrere Anwendungsfälle gibt, gibt es auch mehrere Möglichkeiten, dieses Ziel zu erreichen. Lass uns sie nacheinander durchgehen.

Basierend auf dem User-Agent

Der User-Agent ist eine kurze Zeichenfolge, die der Browser an Websites sendet, wann immer er eine Seite lädt. Der User-Agent enthält Informationen über den Browser, zum Beispiel könnte ein Firefox-Browser einen solchen User-Agent senden:

Daraus kann deine Website erkennen, dass der Benutzer Version 47.0 des Mozilla Firefox-Browsers verwendet. Genau wie 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 gemacht werden, werden vom App-Benutzer initiiert, indem er zwischen Seiten navigiert.
• 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-User-Agent, den die App auf iOS verwenden könnte, wäre: 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 nach dem User-Agent der App

Basierend auf dem oben genannten User-Agent-Format kannst du erkennen, dass deine Website von der App geladen wird, indem du überprüfst, ob der User-Agent 'App-WebView' enthält. Wenn du auch das Betriebssystem überprüfen möchtest, kannst du zusätzlich überprüfen, ob der User-Agent '(android)' oder '(ios)' enthält.

Beispiel: Unterschiedlichen Inhalt auf einer WordPress-Website anzeigen

Mit dem Standard-WordPress-Editor

Wenn du WordPress verwendest, kannst du das Plugin 'UserAgent Content Switcher' verwenden. Der Name des Plugins ist ziemlich beschreibend: Es ermöglicht dir, Benutzern basierend auf ihrem User-Agent unterschiedlichen Inhalt anzuzeigen. So kannst du es einrichten (und ein Beispiel-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 und funktionierte einwandfrei.
2. Auf der Einstellungsseite des Plugins füge einen neuen Typ mit diesen Einstellungen hinzu:
   • Typname: App
   • Shortcode-Attribut: app
   • User-Agent: App-WebView
3. Bearbeite eine deiner Seiten und wechsle zum Code-Editor.
4. Jetzt kannst du Abschnitte erstellen, die nur in der App sichtbar sind, wie folgt:

   
   Dieser Text ist für alle sichtbar.
   
   [agentsw ua='app']
   Dieser Text ist nur für App-Benutzer sichtbar!
   [/agentsw]

   

Mit Elementor

Wenn du Elementor verwendest, kannst du stattdessen das kostenlose Powerpack-Plugin mit dem powerpack-webtoapp-Erweiterungsplugin verwenden. So funktioniert es:

1. Installiere das Powerpack-Plugin über den WordPress-Store.
2. Lade das powerpack-webtoapp-Plugin als Zip-Datei herunter und installiere es.
   Das powerpack-webtoapp-Plugin (und die Idee, Powerpack auf Elementor-Websites zu verwenden) wurde von ALL IN APPLI erstellt. Sie verwenden das Plugin, um mehrere webtoapp.design-Apps zu verwalten und haben sich großzügig entschieden, es zu teilen.
3. Jetzt kannst du bestimmte Elemente so einstellen, dass sie nur in der App angezeigt werden.

Mit JavaScript

Basierend auf dem User-Agent

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

Hier ist ein Beispiel, wie du JavaScript verwenden kannst, um zu erkennen, ob der Benutzer die App oder einen Browser verwendet:

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.");
}
    

Durch Überprüfung von HTML-Änderungen

Die App nimmt winzige unsichtbare Änderungen am HTML 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 knifflig ist, empfehlen wir dir, executeWhenAppReady aus dem App-Hilfsskript zu verwenden. Dann kannst du jeden 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, selbst wenn die Seite von der App geladen wurde.

Durch Einfügen von Code in die App

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

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

Jetzt könnten wir dieses JavaScript konfigurieren, um es einzufügen:

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

Oder alternativ dieses CSS, um es einzufügen:

#red-text {
    color: green !important;
}

Wie du siehst, funktioniert dies auch als eine Möglichkeit, unterschiedliches Verhalten auf der Website und in der App zu haben.