Detecting In App WebViews in GTM: Filtering Android/iOS WebViews from Browser List

Question

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?

BNazaruk · Accepted Answer · 2025-10-20 17:24:38Z

0

You could use the userAgent to detect webviews. However, userAgents are deemed to be a less reliable feature.

I usually ask the app devs to append a query param to all the webviews' urls unless they already have something like that. Then I consume that parameter in a TMS.

If you're talking about third party apps' webviews, then userAgent is pretty much all you have. But the logic you have in place seems to need much more specificity or they will match unrelated useragents. I believe it's a better practice to send raw useragents to the analytics endpoint in a separate dimension unless GA does it out of the box. And then use that dimension to build proper buckets in analytics. That way you at least would see what you end up with.

answered Oct 20 at 17:24

BNazaruk

8,2093 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Detecting In App WebViews in GTM: Filtering Android/iOS WebViews from Browser List

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related