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

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

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:

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

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
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]

   

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.

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

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;
}

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