Webviews in Apps über den Google Tag Manager tracken

In deiner App wird Web Content über Webviews geladen? Was es zu beachten gibt und wie das Tracking von Webviews in Mobile Apps korrekt umgesetzt werden kann, erfährst du in diesem Artikel.

Was sind Native Apps und Webviews?

Das Tracking von Interaktionen in mobilen Apps für iOS und Android kann kompliziert sein, insbesondere wenn es sich um eine sogenannte „Hybride App” handelt. Apps können in verschiedenen Programmiersprachen entwickelt werden. Bei hybriden Apps handelt es sich um Apps, die zusätzlich zur eigenen App Funktionalität auch noch Webinhalte über ein Webview so in die App einbinden, als wären sie ein fester Bestandteil der App. Für Benutzer*innen ist es meist nicht auf den ersten Blick erkennbar, ob gerade eine Webview oder der native Teil einer App angezeigt wird.

Nun landet ein*e Benutzer*in zuerst beim Aufrufen einer App im sogenannten nativen Teil der App. Das ist der Programmcode, der speziell für die Plattform geschrieben wurde (z.B. Swift bei iOS oder Java bei Android – oder noch spezifischer: Kotlin, wenn es eine Cross Plattform App ist). Die Information über die Attribution, wie die App aufgerufen wurde (zum Beispiel aus dem App Store oder einem Deep Link mit UTM Parametern) gelangt zu diesem Zeitpunkt zum nativen Part der App. Wird in weiterer Folge in der App ein Web Content (also eine echte Webseite) in einem Webview aufgerufen und dort Interaktionen ausgeführt, kann nicht einfach ein Google Tag Manager oder Google Tag geladen werden und der Nutzer darüber getrackt werden. Technisch ginge das, jedoch würde das die Daten in GA4 verunreinigen. Es würden lauter neue Benutzer auftauchen und es gäbe keinen Bezug zu den Screen Views in der nativen App. Der Web Bereich der App wäre dann komplett von der nativen App getrennt.

Webview im GTM, Quelle: e-dialog

Die Schnittstelle

Wenn die Informationen über Interaktionen von App-Nutzer*innen in Webviews nicht verloren gehen sollen, empfiehlt es sich, eine Schnittstelle für die Kommunikation zwischen nativer App und Webview herzustellen. Ohne einer Schnittstelle zwischen den beiden Punkten würde GA4 neue Nutzer sehen, oder gar bei jedem Ereignis einen neuen/eine neue Nutzer*in erfassen. Es kann nämlich sein, dass Cookies in Webviews nicht verlässlich gespeichert werden und dadurch jedes Ereignis einem/einer neuen Benutzer*in in GA4 zugeordnet wird.

Technisch gesehen muss eine Schnittstelle zum Transportieren von Ereignisdaten zwischen der Webseite in der Webview und GA4F (Google Analytics 4 for Firebase) hergestellt werden.

Dank der Schnittstelle kann die Webseite in der Webview einen bestimmten Befehl aufrufen, um der nativen App mitzuteilen, dass ein GA4 Ereignis passiert ist. Dank dem Befehl können der Ereignisname und Ereignisparameter bis hin zu Ecommerce Daten an die native App übermittelt werden.

Beim Eintreffen so einer Information in der nativen App fängt diese das Ereignis auf und leitet es mit dem “logEvent” Befehl an Firebase (GA4) weiter.

Die Schnittstelle – Quelle: e-dialog

Der native Part

Um die Schnittstelle zum Laufen zu bringen, muss zuerst die Basis geschaffen werden. Im nativen Quellcode der iOS bzw. Android App müssen Funktionen hinzugefügt werden, welche die “Übersetzung” der Befehle von der Webview auf die native App durchführen.

GA4 kann unter anderem die folgenden drei Befehle verarbeiten, diese werden in unserem folgenden Beispiel verwendet:

logEvent: Dient zur Erfassung eines Ereignisses, welches im Webview passiert ist. Das können z.B. folgende Events sein: page_view, click, scroll, add_to_cart, purchase etc.
setUserProperty: Dient zum Setzen einer Nutzereigenschaft. Zum Beispiel: Last Login, Gender, Age, Customer Preferences, Filter Settings etc.
setUserId: Dient zum Setzen der eindeutigen Nutzer-ID, welche verschlüsselt übermittelt werden muss. Beispiel: 938c2cc0dcc05f2b68c4287040cfcf71

Swift (für Apple / iOS App)

Bei iOS Apps, muss die folgende Schnittstelle im nativen Code bereitgestellt werden, damit die drei oben beschriebenen Befehle logEvent, setUserProperty und setUserId über das webkit erfasst und an GA4F übermittelt werden:

				
					function userContentController(userContentController, didReceive message) {
  guard let body = message.body as? [String: Any] else {
    return
  }
  guard let command = body["command"] as? String else {
    return
  }
  guard let name = body["name"] as? String else {
    return
  }
  
  if (command == "logEvent") {
    guard let params = body["parameters"] as? [String: NSObject] else {
      return
    }
    Analytics.logEvent(name, parameters: params);
  } 
  else if (command == "setUserProperty") {
    guard let value = body["value"] as? String else {
      return
    }
    Analytics.setUserProperty(value, forName: name);
  } 
  else if (command == "setUserId") {
    guard let value = body["value"] as? String else {
      return
    }
    Analytics.setUserId(value);
  }
}

Java (für Android Apps)

Bei Android Apps funktioniert es ein wenig anders und wir können uns direkt ins JavaScript “window” Objekt injizieren. Mit dem folgenden Code wird ein Objekt ins JavaScript “window” Objekt gesetzt, welches die Funktionen logEvent, setUserProperty und setUserId bereitstellt. In dem folgenden Beispiel wird das Objekt “AnalyticsWebInterface” genannt. Der folgende Code muss wie beim Swift Code direkt (nativ) in die Android App integriert werden, damit die Webview auf das Objekt “AnalyticsWebInterface” zugreifen kann:

				
					public class AnalyticsWebInterface {
    public static final String TAG = "AnalyticsWebInterface";
    private FirebaseAnalytics mAnalytics;

    public AnalyticsWebInterface(Context context) {
        mAnalytics = FirebaseAnalytics.getInstance(context);
    }

    @JavascriptInterface
    public void logEvent(String name, String jsonParams) {
        mAnalytics.logEvent(name, bundleFromJson(jsonParams));
    }

    @JavascriptInterface
    public void setUserProperty(String name, String value) {
        mAnalytics.setUserProperty(name, value);
    }
    
    @JavascriptInterface
    public void setUserId(String userId) {
        mAnalytics.setUserId(userId);
    }
}

Webview und Google Tag Manager

Stehen die Funktionen in der nativen App bereit, muss noch die Übergabe der Ereignisse im anderen Part, im Webview, durchgeführt werden.

Ist in der Webview ein Google Tag Manager Container vorhanden, kann der folgende Code mittels benutzerdefiniertem HTML Tag Typ eingefügt werden. Für die Herstellung der Schnittstelle ist es nicht zwingend notwendig, diesen Code über den Google Tag Manager zu laden. Er kann auch direkt im Quellcode der Webseite eingebaut werden, welche vom Webview geladen wird.

Der Code stellt, wie oben schon beschrieben, die drei wichtigsten Funktionen für die Ereigniserfassung in GA4 bereit:

logEvent: Trackt ein Ereignis im Webview
- Parameter “name”: Der Ereignisname als String
- Parameter “params”: Ein JSON Objekt mit Key/Value Paaren.
setUserProperty: Setzt eine Nutzereigenschaft
- Parameter “name”: Der Name der Eigenschaft (User Level Attributname)
- Parameter “value”: Der Wert der Eigenschaft
setUserId: Setzt die eindeutige Nutzer ID
- Parameter “userId”: Der User ID Wert, zB “938c2cc0dcc05f2b68c4287040cfcf71”

Code zur Initialisierung der Funktionen:

				
					<script>
function logEvent(name, params) {
  if (typeof name == "undefined" || !name || name === null) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android API
    window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
  } 
  else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.firebase) {
    // Call iOS API
    var message = {
      command: 'logEvent',
      name: name,
      parameters: params
    };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } 
  else {
    // No Android or iOS API
    console.log('No native connector found.');
  }
}

function setUserProperty(name, value) {
  if (!name || !value) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android API
    window.AnalyticsWebInterface.setUserProperty(name, value);
  } else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.firebase) {
    // Call iOS API
    var message = {
      command: 'setUserProperty',
      name: name,
      value: value
    };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS API
    console.log('No native connector found.');
  }
}

function setUserId(userId) {
  if (!userId) {
    return;
  }

  if (window.AnalyticsWebInterface) {
    // Call Android API
    window.AnalyticsWebInterface.setUserId(userId);
  } else if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.firebase) {
    // Call iOS API
    var message = {
      command: 'setUserId',
      value: userId
    };
    window.webkit.messageHandlers.firebase.postMessage(message);
  } else {
    // No Android or iOS API
    console.log('No native connector found.');
  }
}
</script>

Das Setzen einer eindeutigen Nutzer ID

Im Webview kann mit dem folgenden Befehl eine eindeutige Nutzer ID gesetzt werden, wenn der oben beschriebene Code initialisiert wurde.

				
					<script>

window.setUserId("938c2cc0dcc05f2b68c4287040cfcf71");

</script>

Das Setzen einer Benutzereigenschaft

Wird im Webview eine Information über den/die Benutzer*in ermittelt, die fürs Tracking relevant ist, kann sie mit dem folgenden Befehl erfasst werden (vorausgesetzt, der oben beschriebene Code wurde initialisiert).

				
					<script>

window.setUserProperty('user_login_status', "true");

</script>

Ereignistracking

Bei jeder Interaktion im Webview, die getrackt werden soll, kann der folgende “logEvent” Befehl mit dem Ereignisnamen und zugehörigen Parametern ausgeführt werden. Wie bei setUserId und setUserProperty ist hier wieder die Voraussetzung, dass der Code zur Initialisierung der Funktionen vorher im Webview auf der angezeigten Webseite geladen wurde.

Hier ein Beispiel für eine Suchanfrage im Webview:

				
					<script>

window.logEvent("internal_search", {
  screen_name: "App Suche", 
  screen_class: "/search",
  page_type: "search_page",
  search_category: 'fashion',
  search_type: 'manual',
  search_term: 'T-shirt',
  search_result: 234
});

</script>

Beispiel im Google Tag Manager – Quelle: e-dialog

Fazit

Der richtige Weg, Interaktionen von App-Nutzern in nativen Apps in Kombination mit Webviews zu erfassen, führt über die in diesem Artikel beschriebene Schnittstelle, da es ansonsten zu Session-Brüchen und Attributions-Problemen kommen wird und ein einheitliches bzw. gesamtheitliches Tracking der App nicht möglich sein wird.

Wenn du mehr über das Thema App Tracking und Webviews erfahren willst, oder vielleicht Unterstützung beim Setup benötigst, kontaktiere uns gerne unter: kontakt@e-dialog.group