1
0

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(西村 彰悟)inアユダンテ株式会社

【GA4】AndroidアプリのGA4計測検証の準備（Windows 11）

Last updated at Posted at 2023-01-14

Windows環境にてAndroidアプリのGA4計測を検証するための準備方法をスクリーンショット付きでご紹介します。

0. Androidアプリの準備

Androidアプリを用意して、Firebase SDKを導入＆GA4アプリストリームと連携する。
詳しくは以下記事の

  • Android プロジェクトに Firebase SDKを導入
  • FirebaseプロジェクトをGoogleアナリティクスに接続

を参照。

1. Android Studioのインストール

公式ガイドの案内通りにWindowsにAndroid Studioをダウンロード＆インストール。Android Studioをインストールしておくと細かいデバッグ時や検証用アプリを作成するときなど後々便利。インストールに結構な時間が掛かります。
https://developer.android.com/studio/install

2. PATHを通す

  1. 自分のユーザー名のフォルダまで進んでAppDataフォルダを開く。AppDataファイルは隠しファイルなので予め「表示」メニューから見れるようにしておきます。
    image.png

  2. エクスプローラでadb.exeがある箇所まで進んでファイルパスをコピー
    Local > Android > Sdk > platform-tools と進みadb.exeファイルがあることを確認したらファイルパスをコピー。
    image.png
    以下のような文字列になっているハズ
    C:\Users\{ユーザー名}\AppData\Local\Android\Sdk\platform-tools

  3. Windows + X 同時押しでショートカットメニュー表示 -> 「システム」をクリック
    image.png

  4. 表示された画面の「システムの詳細設定」をクリック
    image.png

  5. 表示されたシステムのプロパティ画面の「環境変数」ボタンをクリック
    image.png

  6. 「システム環境変数」の「Path」行をダブルクリック
    image.png

  7. 「新規」をクリックして先ほどのファイルパスを入力してEnter。「OK」を押して環境変数名の編集ウィンドウを閉じる
    image.png

  8. 「OK」をクリックして環境変数のウィンドウを閉じる
    image.png

  9. コマンドプロンプトを起動（Windowsキーを押してcmdと入力してEnterを叩けばすれば簡単に呼び出せる）
    image.png

  10. adbと入力してEnterを叩いたとき、下記スクリーンショットのように長いメッセージが表示されれば成功
    image.png
    ここまでの手順がうまくいっていないときはadbと入力してEnterを叩いたときに以下のようなエラーメッセージが出力されます。
    image.png

3. Android端末側の準備

PC上でAndroid端末をエミュレートして動かす仮想デバイスかAndroid端末の実機かどちらかを利用します。この後の操作に影響するので一度にPCと繋げて使用するAndroid端末は1つだけにします。（実機と仮想デバイス両方も避ける）

実機上でアプリを動かして検証する場合

※端末によって微妙に操作が異なる場合があります

まずはテストアプリをインストールしたAndroid実機端末PCをUSBケーブルで繋いだ上でUSBデバッグモードを有効化します。
USBデバッグモードは設定の「開発者向けオプション」メニューから有効化できますが、デフォルトでは「開発者向けオプション」が隠れているため、以下リンク先の方法で使えるようにします。

image.png
USBデバッグモードを有効化すると許可を求めるウィンドウが出るので「許可」します。
image.png

PCのコマンドプロンプトでadb devicesと入力してEnterキーを叩いたとき、以下スクリーンショットのように端末の隣にdeviceと書かれた表示になればUSBデバッグが無事有効化されています。

image.png
unauthorizedと出た場合は端末側でUSBデバッグモードをオフ・再度オンしてUSBデバッグをもう一度許可させます。過去にUSBデバッグを許可した端末の場合「USBデバッグ許可の取り消し」をした上で実行することでうまくいく場合があります。
image.png
image.png

仮想デバイスを使用して検証する場合

Android実機がなくてもアプリ検証は可能です。しかしPCのスペックが相当ないと固まったり落ちたりするので使い辛く、できれば実機でテストすることをお勧めします。
PCでAndroid Studioアプリを起動して「More Actions」>「Virtual Device Manager」をクリック
image.png
あるいは上部メニューのToolsから「Device Manager」を選択
image.png

検証にあたり既に有効化されている仮想デバイスで実行して問題ないならリスト内の「▶」をクリックして仮想デバイスをPC上で起動。無い場合はCreate deviceからリストに追加した後に「▶」をクリックして起動。
image.png
仮想デバイスではAndroid Studioでビルドしたアプリを実行できることは勿論、仮想デバイスのウィンドウにapkファイルをドラッグアンドドロップすることでもアプリインストールが可能です。仮想デバイスのUSBデバッグは最初から有効化されているのでコマンドプロンプトからadb devicesと入力すれば最初からdevicesと出力されるハズです。

image.png

4. アプリのデバッグモードの有効化

PCにUSBデバッグが有効化されたAndroid端末を繋げた状態（あるいは仮想デバイスを有効化した状態）でコマンドプロンプトで以下コマンドを入力してEnterを叩けばアプリのデバッグモードが有効化されます。

adb shell setprop debug.firebase.analytics.app [ここにアプリケーションのパッケージ名]

たとえばアプリのパッケージ名がcom.example.mytestapplicationの場合は以下のようになります。（パッケージ名が分からないときの方法もこのあと解説します）

adb shell setprop debug.firebase.analytics.app com.example.mytestapplication

以上の操作を正しく実行すればGA4のDebugViewでアプリ上で発生したイベントを確認することができるようになります。

アプリのパッケージ名が分からないとき

テストしたいアプリを起動した状態でコマンドプロンプトで以下コマンドを入力してEnter

adb shell dumpsys activity activities | findstr "mResumedActivity mFocusedApp"

image.png

このスクリーンショットでは起動しているアプリのパッケージ名がcom.example.mytestapplicationであることが分かります。

5. GA4 DebugViewの確認

テストしたいアプリを立ち上げて何スクリーンか閲覧した後、GA4で目的のGA4プロパティを開いた上で「DebugView」を開きます。
image.png
「デバッグに使用するデバイス」のリストから自分がテストに使っている端末と思われるものを選択してGA4イベントのデバッグを開始します。ここまでうまくいけば端末からUSBケーブルを抜いてもGA4 DebugViewにイベント情報が出力され続けます。
image.png

自分の端末がGA4 DebugViewに表示されないときは…

  • GA4のページを更新（何回か更新することでリストに表示されることがよくあります）
  • アプリと今見ているGA4プロパティのデータストリームのパッケージ名が一致することを確認（実はテスト用アプリと本番用アプリで別のGA4プロパティに紐づいている等）
    image.png
  • adb shell setprop のコマンドで入力したパッケージ名が合っているか確認してもう一度実行
  • すべてを諦めて翌日もう一度実行（何故か何をやっても上手くいかない時があります）

おまけ. WebViewのデバッグ

テストアプリでWebViewのデバッグを有効化（ setWebContentsDebuggingEnabled を true に設定）している場合、USBデバッグを有効にしたAndroid端末をデータ通信に対応したUSBケーブルでWindows PCに接続するとGoogle Chrome の機能でWebView時に発生した通信やDOMの状態をChromeデベロッパーツールから確認することができます。詳しくは以下をご確認ください。

大まかな手順

  1. WebViewのデバッグを有効化したテスト用のアプリを用意する （※ 一般ユーザーに配布される通常版のアプリでWebViewのデバッグを有効にすることはセキュリティ上望ましくありません）
  2. Android端末のUSBデバッグをオンにする
  3. テストアプリのWebView画面を開いた状態でPCに接続する
  4. PCでChromeを起動してアドレスバーに chrome://inspect と入力してEnter
  5. Android端末のChromeブラウザ上で開いているタブやアプリ内WebViewで開いているページのリストが表示されているのでWebViewで開いているページを探して inspect をクリックする
  6. Chromeデベロッパーツールが開くので Network, Elementsなど必要なタブを開いてデバッグを実行する

image.png

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?