We are trying to accurately detect whether a user is viewing our customers site through an in-app WebView (like Android WebView or Safari in-app) versus a normal browser. The goal is to filter in-app WebViews from GA4 browser reports using Google Tag Manager.
We originally wrote a Custom JavaScript variable in GTM to detect the browser:
function() {
var ua = navigator.userAgent;
if (ua.indexOf("Chrome") > -1 && ua.indexOf("Edge") === -1 && ua.indexOf("OPR") === -1) {
return "Chrome";
} else if (ua.indexOf("Firefox") > -1) {
return "Firefox";
} else if (ua.indexOf("Safari") > -1 && ua.indexOf("Chrome") === -1) {
return "Safari";
} else if (ua.indexOf("MSIE") > -1 || ua.indexOf("Trident/") > -1) {
return "IE";
} else if (ua.indexOf("Edge") > -1) {
return "Edge";
} else if (ua.indexOf("OPR") > -1) {
return "Opera";
} else if (ua.indexOf("wv") > -1) {
return "Android Webview";
} else {
return "Other";
}
}
A suggested improvement added detection for iOS WebViews and some common in-app browsers:
function() {
var ua = navigator.userAgent || "";
// Detect common in-app environments
if (/bFBAN|FBAV|Instagram|Line|Twitter|LinkedInApp|TikTok/i.test(ua)) {
return "In-App Browser";
}
// Android WebView
if (ua.indexOf("wv") > -1 || (ua.indexOf("Android") > -1 && ua.indexOf("Version/") > -1 && ua.indexOf("Chrome") === -1)) {
return "Android WebView";
}
// iOS WebView
if (/iPhone|iPod|iPad/i.test(ua) && !/Safari/i.test(ua)) {
return "iOS WebView";
}
// Regular browsers
if (ua.indexOf("Chrome") > -1 && ua.indexOf("Edge") === -1 && ua.indexOf("OPR") === -1) {
return "Chrome";
} else if (ua.indexOf("Firefox") > -1) {
return "Firefox";
} else if (ua.indexOf("Safari") > -1 && ua.indexOf("Chrome") === -1) {
return "Safari";
} else if (ua.indexOf("MSIE") > -1 || ua.indexOf("Trident/") > -1) {
return "IE";
} else if (ua.indexOf("Edge") > -1) {
return "Edge";
} else if (ua.indexOf("OPR") > -1) {
return "Opera";
} else {
return "Other";
}
}
We want to detect in-app WebViews reliably (Android/iOS and common social apps) and Use this detection in GTM triggers to filter out in-app WebViews from GA4 browser reports.
Example of the intended GTM trigger configuration:
Example of current GA4 Browser report showing Android/iOS WebViews:
We plan to implement a Custom JavaScript variable to detect these WebViews and then configure triggers like:
{{JS - Browser Type}} does not match RegEx (ignore case) Android Webview.*Safari.*
Our question are,
Will either of codes work as intended?
If not is there a better way to reliably detect in-app WebViews in GTM?