本記事でできるようになること

WebViewで開かれたページビュー情報をGA4アプリストリームで計測する
WebViewで開かれたページビュー情報をGA4ウェブストリームで計測しないようにする
WebViewでページが開かれたことを判別できるGTMトリガー設定を作成する

背景

GA4の計測設定を自社サイトと自社アプリの両方で行った場合、WebView（アプリ内ブラウザ）でGA4タグを設置しているページを開くと以下のような計測となってしまいます。

アプリストリームによる計測 : WebViewで開いたページ情報は追うことができない
ウェブストリームによる計測 : WebViewからページが開かれても判別できずウェブストリームからデータを送信してしまう

→ 同一ユーザーによる一連の行動が「異なるユーザーによる行動」としてバラバラに計測されてしまう

また、単純にWebView時のページビューなどのイベントをアプリストリームで計測できるようにするだけではアプリストリームとウェブストリームでの二重計測を起こしてしまう場合があります。

本記事ではこれらの問題の発生を防ぎつつ、WebViewでの行動をアプリストリームで計測するための方法をご紹介します。

手順

1. アプリストリームの計測設定を用意する・WebView計測の準備を行う

記事の手順を参考に以下の対応を行います。

Firebase SDKをアプリに導入
FirebaseプロジェクトをGoogleアナリティクス（GA4プロパティ）に接続
Webサイト側にJavaScript ハンドラを実装（WebViewで開かれる可能性があるページすべて）
アプリ側にネイティブインターフェースを実装

これらの準備によりWebView以外のGA4アプリ計測環境が整います。この手順は以下の記事を参考に進めてください。

JavaScriptハンドラはウェブページに直接埋め込むこともできますが、GTM内を介して設定設定できます。
ページに直接埋め込む場合は必ずGTMより先に読み込まれるようにしてください。

GTMにJavaScriptハンドラを実装する場合

Google公式ヘルプにあるJavaScriptハンドラコードをカスタムHTMLタグとしてGTMに実装して後述の「WebView時にGA4アプリストリームに情報を送信するタグ」の「設定タグ」として「1ページにつき1回」起動するように設定。
https://firebase.google.com/docs/analytics/webview?platform=android#implement-javascript-handler

<script>
if(typeof logEvent === 'undefined'){
  function logEvent(name, params) {
    if (!name) {
      return;
    }
  
    if (window.AnalyticsWebInterface) {
      // Call Android interface
      window.AnalyticsWebInterface.logEvent(name, JSON.stringify(params));
    } else if (window.webkit
        && window.webkit.messageHandlers
        && window.webkit.messageHandlers.firebase) {
      // Call iOS interface
      var message = {
        command: 'logEvent',
        name: name,
        parameters: params
      };
      window.webkit.messageHandlers.firebase.postMessage(message);
    } else {
      // No Android or iOS interface found
      console.log("No native APIs found.");
    }
  }
}
if(typeof setUserProperty === 'undefined'){
  function setUserProperty(name, value) {
    if (!name || !value) {
      return;
    }

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

2. GA4ウェブストリーム向け計測タグの設定を行う

アプリの計測データが記録される状態になったGA4プロパティにウェブの計測データも記録されるように設定します。

Firebase Console画面での作業

Firebase ConsoleからGA4の管理画面を開きます。

目的のFirebaseプロジェクト画面で「左側の歯車アイコン」→「プロジェクトを設定」をクリック

タブ「統合」をクリックしてGoogle Analyticsの「管理」をクリック

「リンクされたGoogleアナリティクスアカウント」からアプリが紐付いているGA4プロパティの管理画面を開きます。

GA4管理画面内での作業

表示されたGA4のプロパティ設定画面の「データストリーム」メニューを開き、「ストリームを追加」プルダウンメニューの「ウェブ」を選択

測定対象サイトのURLとわかりやすいストリーム名を入力して「ストリームを作成」ボタンをクリック

次の手順で利用するため、表示された測定IDの情報をどこかに記録しておきます。

GTM内での作業

GA4ウェブストリーム向け計測タグは後々の設定調整を考えるとGTM経由で設定する方が便利なので、GTMを利用した設定方法で進めます。

GA4のタグでページビュー計測するための基本設定

タグタイプ「Google アナリティクス: GA4 設定」でタグ設定を新規作成

先ほどGA管理画面から入手した測定IDを入力して適切なタグ名とトリガー設定を追加して一旦設定を保存します。

GA4アプリストリームにデータを送ることができることをチェックする変数とトリガー設定を作成

ここまでの手順でアプリ側にGA4計測用のネイティブインターフェイスが実装されているので、AndroidアプリのWebView経由でサイトを閲覧した場合のみページ内にグローバルJavaScript変数window.AnalyticsWebInterfaceが存在。iOSアプリのWebView経由でサイトを閲覧した場合のみwindow.webkit.messageHandlers.firebaseが存在するようになっています。
この有無をGTMから確認してGA4アプリストリームにデータを送ることができる状況かの判定に使用することが可能です。
他社アプリのWebViewからページが開かれる可能性を考慮し、UserAgent文字列などで自社アプリ判定も加えます。

例: 自社アプリのUserAgent文字列に my-app という文字列が入る場合

Is_browsing_through_MyApp_with_Firebase_Analytics

function(){
  var isNativeInterfaceAvailable = !!(window.AnalyticsWebInterface || window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.firebase);
  var isAccessFromOfficialApp = navigator.userAgent.indexOf('my-app')>-1;
  return isNativeInterfaceAvailable && isAccessFromOfficialApp;
}

変数設定の作成例

作成した変数設定を利用してWebView経由でのページ閲覧時に発生したすべてのイベントに反応するトリガー設定を作成します。

イベント名 : .*
「正規表現一致を使用」にチェック
このトリガーの発生場所 : 一部のカスタムイベント
条件 : 「先ほど作成したWebViewを判定する変数設定」が「等しい」true

トリガー設定の作成例

作成したトリガーをウェブストリーム向けGA4タグ設定の例外トリガー設定に追加します。

以上でGA4ウェブストリームにpage_viewイベントを送信するための設定が完了しました。

3. WebView時にGA4アプリストリームに情報を送信するタグ設定を行う

GA4のアプリストリームにWebView時のページビュー情報を送信するイベントについて予め使用するイベント名とパラメータ構成を決めておきます。

本記事ではカスタムイベントwv_page_viewと以下のパラメータを使う場合の例をご紹介いたします。
パラメータは必要に応じて予めGA4管理画面側でカスタムディメンションに登録しておきます。

イベント : wv_page_view
パラメータ

パラメータ名	送信する値	送信する値の例
wv_page_location	閲覧中のページURL	https://www.example.com/path/page.html?a=b#hoge
wv_page_hostname	閲覧中のページURL	www.example.com
wv_page_path	閲覧中のページURL	/path/page.html
wv_referrer	参照元ページURL	https://www.example.com/path/prevpage.html?zz=nn
wv_page_title	閲覧中のページタイトル	○○○についてのページ

以下のようなコードをカスタムHTMLタグで使用することにより、アプリストリームにwv_page_viewイベントを送信するタグを作成できます。必要なパラメータが他にある場合はコードを編集してご利用下さい。

GA4_for_app_-_wv_page_view

<script>
(function(){
  if(typeof logEvent !== 'undefined'){
    var EVENT_NAME = 'wv_page_view';
    var params = {
      'wv_page_location': location.href,
      'wv_page_hostname': location.hostname,
      'wv_page_path': location.pathname,
      'wv_referrer': document.referrer,
      'wv_page_title': document.title,
    };
    for(key in params){
      if(typeof params[key] === 'string'){
        // パラメータの値が100文字を超えるとエラーになるので超過分の文字をカット
        params[key] = params[key].substr(0,100);
      }
    }
    logEvent(EVENT_NAME, params);
  }
})();
</script>

JavaScriptハンドラをGTM経由で実装する場合は「設定タグ」としてJavaScriptハンドラを実装したカスタムHTMLタグを読み込ませます。

必要なトリガー設定を紐づければ完成です。今回の用途であれば初期化トリガーを使用します。
こちらについては例外トリガー条件を設定しなくても問題ありません。

以上でGA4アプリストリームにwv_page_viewイベントを送信するための設定が完了しました。
GTMの変更内容の公開を忘れずに行いましょう。

その他小ネタ

パラメータ

WebViewでのページ閲覧をscreen_viewイベントとして送信する場合、以下のパラメータでスクリーン名、スクリーンクラスを上書き可能
- パラメータscreen_name (debugView上ではfirebase_screenと表示)
- パラメータscreen_class (debugView上ではfirebase_screen_classと表示)
公式ヘルプに記載されているネイティブインターフェースはitemsパラメータに対応していないためeCommerceイベントを計測したい場合はカスタマイズが必要。Kotlinのカスタム例はコチラ
WebView経由で page_view イベントを送信することも可能だがレポートを壊す恐れがあるため非推奨
screen_view イベントのパラメータとして、 page_location , page_referrer, page_titleを使用することができる。（現在のところ問題は確認できていませんが使用は自己責任でお願いします。）この時、レポート上で各ディメンションの値は以下のようになる
- ページパスとスクリーンクラス: スクリーンクラスの情報が優先して使われる。取得できない場合 page_location 情報から抽出したページパスの文字列
- ページタイトルとスクリーンクラス: page_titleの情報が優先して使われる。取得できない場合、スクリーンクラス（screen_class）の情報が使われる
- ページタイトルとスクリーン名: スクリーン名（screen_name）情報が優先して使われる。取得できない場合、page_title

検証時

WebView計測のためのGTM設定はGTMプレビューモードによる公開前確認ができない。検証が必要な場合は例外トリガー設定で開発環境のみでタグが動作するよう設定の上公開する
アプリ内ブラウザを実現する技術にはWebViewの他にiOSのSafariViewController、AndroidのChrome CustomTabsが存在するが、いつものSafari, Chromeブラウザの別タブのような存在なのでネイティブインターフェースが効かず、これらはWebストリーム側で計測する他ない
Android端末とWindows PCでチェックする方法 -> https://qiita.com/aqril_1132/items/f4a5077998168e50350b
WebView計測がうまくいかないときのトラブルシューティングはやや難易度高め。エンジニアと連携して以下の内容を1つ1つチェックする
- WebView時にGTMは正常に動いているか（アプリから開いたときにGTMが動かない実装になっていないか）
- WebView時にタグのトリガー条件やパラメータの値に使う変数が取得できるか
- WebView時にタグが動くより先にJavaScript HandlerによりlogEvent関数が定義されているか
- WebView時にタグが呼び出されるためのトリガー条件が満たされているか(User-Agent文字列の変更が一部のWebViewで機能していなかったなど)
- WebView時にアプリのネイティブインターフェースにより以下の関数が定義されているか
  - Androidの場合 : window.AnalyticsWebInterface
  - iOSの場合 : window.webkit.messageHandlers.firebase
- アプリが紐づいているGA4プロパティとウェブストリーム計測を行うGA4プロパティは同一か

【GA4】GTMを使ってアプリストリームからWebView時のページビューを計測する