このページは Cloud Translation API によって翻訳されました。

Google アナリティクスを使用して WebView のイベントを追跡する

1. はじめに

最終更新日: 2021 年 12 月 22 日

作成するアプリの概要

この Codelab では、WebView 内のウェブページからネイティブコードにイベントを転送して、GA4F でイベントをトラッキングできるようにする方法を学びます。

ここでは、WebView を使用してウェブページを呼び出すハイブリッド Android サンプルアプリを使用します。

学習内容

ハイブリッドアプリで GA4F（Firebase 向け Google アナリティクス）を初期化する方法
ウェブページでカスタムイベントとカスタムパラメータを作成する方法
WebView 内のウェブページのイベントをネイティブコードに転送する方法
デバッグ方法
イベントをインポートして、アクションキャンペーンで使用する方法

必要なもの

Android Studio 3.6 以上
Firebase アカウント

2. 設定方法

コードを取得する

Firebase ガイドのドキュメントでは、このプロジェクトに必要なサンプルコードが GitHub に提供されています。

まず、コードを取得して、お好みの開発環境で開きます。Android とウェブの 2 つのディレクトリを使用します。「Android」ディレクトリは Android アプリと「ウェブ」用です。ディレクトリは、WebView を介してアプリによって呼び出されるウェブページ用です。

3. Firebase プロジェクトを作成して設定する

Firebase の利用を開始するには、Firebase プロジェクトを作成して設定する必要があります。

Firebase プロジェクトを作成する

Firebase にログインします。

Firebase コンソールで [プロジェクトを追加]（または [プロジェクトを作成]）をクリックし、Firebase プロジェクトに Webview-test-codelab などの任意の名前を付けます。

プロジェクト作成オプションをクリックします。プロンプトが表示されたら、Firebase の利用規約に同意します。アクションイベントのトラッキングとコンバージョンの分析のために Google アナリティクスイベントが必要となるので、このプロジェクトでは Google アナリティクスを有効にする必要があります。

Firebase プロジェクトの詳細については、Firebase プロジェクトについて理解するをご覧ください。

4. Android Firebase 構成

Android を構成する

Firebase コンソールの左側のナビゲーションで [プロジェクトの概要] を選択し、[アプリに Firebase を追加して利用を開始しましょう] の下にある [Android] ボタンをクリックします。

次の画面にダイアログが表示されます。

指定を必要とする重要な値は Android パッケージ名です。次の手順で取得します。

アプリのディレクトリで、android/app/src/main/AndroidManifest.xml ファイルを開きます。
manifest 要素内にある package 属性の文字列値を確認します。この値が Android パッケージ名です（例: com.yourcompany.yourproject）。この値をコピーします。
Firebase のダイアログで、コピーしたパッケージ名を Android package name フィールドに貼り付けます。
Google ログインまたは Firebase Dynamic Links を使用する予定がない場合は、ここで SHA-1 キーは不要です（この Codelab では扱いません）。Google Play から in_app_purchase データをインポートする場合は、後でキーを設定する必要があります。
[アプリの登録] をクリックします。
引き続き Firebase 内で、指示に沿って構成ファイル google-services.json をダウンロードします。

アプリのディレクトリに移動し、（先ほどダウンロードした）google-services.json ファイルを android/app ディレクトリに移動します。
Firebase コンソールに戻り、残りの手順をスキップして、Firebase コンソールのメインページに戻ります。
最後に、Firebase によって生成された google-services.json ファイルを読み取るための Google Services Gradle プラグインが必要です。
IDE またはエディタで android/app/build.gradle を開き、ファイルの最後の行として次の行を追加します。

apply plugin: 'com.google.gms.google-services'

android/build.gradle を開き、buildscript タグ内に新しい依存関係を追加します。

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

アプリがまだ実行中の場合は、Gradle で依存関係をインストールできるように、アプリを閉じて再ビルドします。

これで Android 向けアプリの構成が完了しました。

5. ウェブにアナリティクスのウェブインターフェースを開発してカスタムイベントをロギングする

Google アナリティクスで WebView 内のイベントをトラッキングするには、ウェブアプリと Android アプリの両方にコードを挿入する必要があります。

このパートでは、ウェブに配置する必要があるコードを見ていきましょう。

まず、html ファイルで使用する JavaScript ファイルを作成します。サンプルコードでは、index.js という名前の js ファイル。関数「logEvent」を作成する必要がありますAnayticsWebInterface（Android 用）と messageHander（iOS 用）を

そして、イベントをトラッキングする関数を呼び出します。コードは次のようになります。

Android の WebView でイベントがトリガーされると、「window.AnalyticsWebInterface」が呼び出され、イベントがネイティブアプリに接続されます。

6. ウェブディレクトリをホストしてウェブページの URL を取得する

アプリの WebView 内でウェブページを呼び出す前に、ウェブページの URL が必要です。ウェブページをホストする方法は多数ありますが、この Codelab では便宜上 Firebase Hosting サービスを使用する方法を説明します。

ターミナルで、ウェブディレクトリ（例:cd web など）を指定し、次のコマンドを実行します。
npm install -g firebase-tools - Firebase CLI がインストールされます。
firebase login
firebase init
[Hosting] を選択します。どの機能を設定しますか？
Android アプリに設定したプロジェクトを選択します。
残りのすべてのプロンプトでデフォルト値を受け入れます。
firebase deploy --only hosting - Firebase Hosting にデプロイします。

7. Android アプリでインターフェースコードを開発する

Google アナリティクスで WebView 内のイベントをトラッキングするには、ウェブと Android の両方にコードを挿入する必要があります。このパートでは、Android アプリに配置する必要があるコードを見ていきましょう。

「AnalyticsWebInterface.java」を作成する"AnalyticsWebInterface"クラスです。このクラスでは、次のように @JavascriptInterface をコーディングして、ウェブ JS ファイルの logEvent 関数を接続する必要があります。

次に、アクティビティに WebView を呼び出す JavaScript インターフェースを追加します。コードは以下のようになります。

コード全体を確認するには、「セットアップを行う」でダウンロードしたサンプルコードをご覧ください。示します。

8. イベントの確認とデバッグ

イベントをデバッグする場合は、テストデバイスを接続した後、またはエミュレータを起動した後に、Android Studio ターミナルで次のコードを使用します。

>adb shell setprop debug.firebase.analytics.app [アプリのパッケージ名]

>adb shell setprop log.tag.FA 詳細

>adb shell setprop log.tag.FA-SVC VERBOSE

>adb logcat -v time -s FA FA-SVC

コードが正常に機能すると、次のようなログが表示されます。

Firebase コンソールで確認する場合は、[リアルタイム] タブを使用することもできます。Firebase コンソールに移動し、次のように [リアルタイム] タブをクリックします。

次に、[比較を追加] を使用して Android プラットフォームのイベントをフィルタします。使用します。

コードが正しく実装されていれば、Android アプリのイベントが [リアルタイム] タブに表示されます。

数時間後には、ログに記録されたイベントを Firebase コンソールの [イベント] タブで確認できます。Firebase コンソールの [アナリティクス] セクションにある [イベント] タブをクリックするだけです。イベントをクリックするだけで、イベント event1 内の値を確認することもできます。

[コンバージョンとしてマークを付ける] スイッチを右にスライドして、「event1」をコンバージョンとしてマークします。

イベントが [コンバージョン] タブに表示されている場合は、正常にコンバージョンとしてマークされています。これで、Firebase から Google 広告にこのイベントをインポートできるようになります。

デバッグを行うには、Firebase DebugView を使用します。詳細については、イベントのデバッグをご覧ください。

9. アナリティクスイベントを Google 広告にインポートする

Firebase-Flutter の設定が完了したら、アクションイベントを使用してアプリキャンペーンを開始しましょう。まず、Firebase を Google 広告にリンクします。Firebase を Google 広告にリンクすると、アプリキャンペーンに Firebase のイベントをインポートできます。また、この処理により、オーディエンスについてより深く知ることができ、Google 広告でのアプリキャンペーンの成果を高めることができます。

[Project Overview] の横にあるボタンをクリックして [Firebase Settings] に移動します。
[統合] タブに [Google 広告] と [リンク] ボタンが表示されます。[リンク]、[続行] の順にクリックします。

Google 広告アカウントを選択します。

これで Firebase の部分は完了です。

Google 広告に移動します。

ログインして [ツールと設定 >測定 >コンバージョンとしてカスタムイベントをインポートします。
[+] ボタンをクリックして、新しいコンバージョンアクションを追加します。

[Google アナリティクス 4 プロパティ（Firebase）] を選択し、[続行] をクリックします。

コンバージョンとしてマークされたすべてのアナリティクスイベントが表示されます。以前に実装した event1 イベントを探します。

アクションを確認し、[インポート] をクリックして、[続行] をクリックします。

コンバージョンアクションとして event1 を設定すると、event1 のイベントを 5 回を超えて起動する可能性があるユーザーをターゲットとするアクションキャンペーンを開始できます。

10. イベントをインポートしてアプリアクションキャンペーンを開始する

現在のアカウントの [キャンペーン] タブに移動し、[+] ボタンをクリックして新しいキャンペーンを開始します。[新しいキャンペーン]、[続行] の順にクリックします。
[アプリインストール] オプションを使用してアプリプロモーションキャンペーンを開始します。

アプリ名、パッケージ名、またはパブリッシャーを入力してアプリを検索します。
[単価設定] で、プルダウンメニューから [アプリ内コンバージョン] を選択します。
表示されたリストからカスタムイベントを見つけます。[目標コンバージョン単価] を設定し、追加オプションがあれば設定します。

キャンペーンの設定を完了します。

11. 完了

これで Firebase と Google 広告の統合が完了しました。これにより、Firebase にインポートしたイベントを使ってキャンペーンのパフォーマンスを向上させることができます。

学習した内容

ハイブリッドアプリで GA4F（Firebase 向け Google アナリティクス）を初期化する方法
ウェブページでカスタムイベントとカスタムパラメータを作成する方法
WebView 内のウェブページのイベントをネイティブコードに転送する方法
デバッグ方法
イベントをインポートして、アクションキャンペーンで使用する方法