LoginSignup
19
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@aqril_1132(西村 彰悟)

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

Last updated at Posted at 2021-04-21

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

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

背景

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

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

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

WebViewイメージ.png

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

本記事ではこれらの問題の発生を防ぎつつ、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>

image.png

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

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

Firebase Console画面での作業

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

目的のFirebaseプロジェクト画面で「左側の歯車アイコン」→「プロジェクトを設定」をクリック
image.png
タブ「統合」をクリックしてGoogle Analyticsの「管理」をクリック
image.png
「リンクされたGoogleアナリティクスアカウント」からアプリが紐付いているGA4プロパティの管理画面を開きます。
image.png

GA4管理画面内での作業

表示されたGA4のプロパティ設定画面の「データストリーム」メニューを開き、「ストリームを追加」プルダウンメニューの「ウェブ」を選択
image.png
測定対象サイトのURLとわかりやすいストリーム名を入力して「ストリームを作成」ボタンをクリック
image.png

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

GTM内での作業

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

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

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

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

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;
}

変数設定の作成例
image.png

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

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

トリガー設定の作成例
image.png

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

image.png

以上で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タグを読み込ませます。

image.png

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

image.png

image.png

以上で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プロパティは同一か
19
17
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
19
17

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?