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

Firebase 向け Google アナリティクスを使用して WebView でイベントをトラッキングする

1. はじめに

最終更新日: 2022 年 2 月 25 日

作成するアプリの概要

この 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 構成

Firebase コンソールで Android を構成する

Firebase コンソールのホームで、次のような Android アイコンをクリックします。

または、左側のナビゲーションバーで [プロジェクトの概要] に移動し、[アプリに Firebase を追加して利用を始めましょう] の下にある [Android] ボタンをクリックします。

[Android アプリに Firebase を追加する] が表示されます。表示されます。

Android パッケージ名（例: com.xxxx.myproject）はアプリのディレクトリの android/app/src/main/AndroidManifest.xml にあります。

package="com.xxxx.myproject"

ここでは SHA-1 鍵は必要ありません。このキーは、Google ログインまたは Firebase Dynamic Links を使用する場合、または Google Play から in_app_purchase データをインポートする場合にのみ必要ですが、この Codelab では扱いません。
[アプリを登録] をクリックします。
Firebase コンソールで構成ファイル 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 ファイルを作成します。サンプルコードでは、js ファイルの名前は index.js です。関数「logEvent」を作成する必要があります「AnayticsWebInterface」の呼び出しに対して「messageHander」という名前です。使用します。

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

Android アプリの WebView でイベントがトリガーされると、「window.AnalyticsWebInterface」が呼び出され、イベントがアプリの WebInterface コードに転送されます。

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 にデプロイします。

ウェブページの URL を取得したら、Android Studio でアプリプロジェクトに移動し、この手順で作成したウェブ URL を WebView 内に以下のように挿入します。

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

GA4F で WebView のイベントをトラッキングするには、ウェブと Android の両方にコードを挿入する必要があります。このパートでは、WebView のウェブページからイベントを受信するために、Android アプリにどのコードを追加する必要があるかを見ていきます。

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

次に、WebView を呼び出す JavaScript インターフェースをアクティビティに追加します。手順は次のとおりです。

コード全体を確認するには、「セットアップを行う」セクションの GitHub からダウンロードしたサンプルコードを参照してください。示します。

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

[イベント 1 をロギング] をクリックしますが正常に動作し、コードが適切に機能すると、次のようなログが表示されます。

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

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

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

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

event1 をコンバージョンとして Google 広告にインポートするには、[コンバージョンとしてマークを付ける] スイッチを右にスライドして、コンバージョンとしてマークを付けます。

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

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

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

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

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

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

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

Google 広告に移動します。

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

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

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

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

「event1」をコンバージョンアクションとして設定すると、「event1」イベントを使ってアプリアクションキャンペーンを開始できるようになります。

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

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

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

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

11. 完了

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

学習した内容

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

12. 参照文献

公式ガイド

WebView でアナリティクスを使用する - Firebase - Google

Firebase とGoogle 広告の設定