React Native Webview如何传递标识让GA识别流量来自移动应用

完全可以通过React Native Webview传递自定义标识实现该需求，不需要重构网站侧已有的Google Analytics埋点逻辑，以下是三种可直接落地的方案，按实现成本从低到高排序：

• 方案1：URL追加自定义查询参数（最稳定，推荐优先用）
  App端加载Webview时，在原文章URL后追加不与网站现有参数重名的自定义字段，比如追加?channel=rn_app_webview&os=ios（安卓端os参数传android即可）。如果原URL本身已经带?拼接的参数，就把前缀改成&避免破坏原链接。
  网站侧只需要在GA配置中新增对应自定义维度，抓取URL中channel字段的值，后续报表筛选channel=rn_app_webview的流量就是App内Webview打开的访问，剩余流量即为普通网页端访问。
• 方案2：自定义Webview的UserAgent（无需修改URL）
  如果不想改动原始文章URL，可以直接通过React Native Webview自带的applicationNameForUserAgent属性追加自定义UA标识，示例代码如下：

  import { WebView } from 'react-native-webview';
  import { Platform } from 'react-native';
  
  <WebView
    source={{ uri: articleUrl }}
    applicationNameForUserAgent={`NewsApp/${appVersion} (RNWebView; ${Platform.OS})`}
    // 其余原有Webview配置保持不变
  />
  

  配置后网页端拿到的请求UA会自动带上你加的自定义字符串，网站侧在GA初始化前加一段简单判断：检测UA中是否包含RNWebView字段，命中就给当前访问打上「App内Webview」的自定义标记传给GA即可。这个方案不会改动原URL，不会影响链接分享、SEO相关逻辑。
• 方案3：注入全局JS变量（扩展性最强）
  如果后续除了流量标识，还需要给网页端传递更多App侧信息（比如用户登录态、App内用户ID、版本号等），可以通过Webview的injectedJavaScriptBeforeContentLoaded属性在页面加载前注入全局变量，示例代码如下：

  const injectBeforeLoadJS = `
    window.__IS_FROM_APP_WEBVIEW__ = true;
    window.__APP_INFO__ = {
      os: '${Platform.OS}',
      version: '${appVersion}',
      isLogin: ${userIsLogin ? 'true' : 'false'}
    };
    true; // 固定写法，避免iOS端注入报错
  `;
  
  <WebView
    source={{ uri: articleUrl }}
    injectedJavaScriptBeforeContentLoaded={injectBeforeLoadJS}
    // 其余原有Webview配置保持不变
  />
  

  网页端直接读取window.__IS_FROM_APP_WEBVIEW__字段判断访问来源，把对应标识传给GA即可。注意不要用普通的injectedJavaScript属性，它会在页面加载完成后才执行注入，很容易跑在GA初始化逻辑后面，导致漏记首次page_view事件。

注意事项：无论选哪种方案，来源标记逻辑一定要在GA的page_view事件触发前执行，否则会出现首次访问数据漏标、统计不准的问题。如果后续需要打通App原生端和Webview端的用户数据，只要在传递来源标识的同时把App端生成的用户唯一ID一并传给网页端，在GA中配置为统一user_id即可。

内容的提问来源于stack exchange，提问作者Antoni0Zac