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

1. はじめに

最終更新日: 2022-02-25

作成するアプリの概要

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

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

学習内容

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

必要なもの

Android Studio 3.6 以降
Firebase アカウント

2. 設定方法

コードを取得する

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

まず、コードをダウンロードして、お好みの開発環境で開きます。android と web の 2 つのディレクトリを使用します。「android」ディレクトリは Android アプリ用、「web」ディレクトリは 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 からアプリ内購入データをインポートする場合のみです。この 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 です。Android 用の「AnayticsWebInterface」を呼び出す関数「logEvent」と、iOS 用の「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」クラスを作成する「AnalyticsWebInterface.java」ファイルを作成します。このクラスでは、次の例のように、ウェブ js ファイルの logEvent 関数を接続する @JavascriptInterface をコーディングする必要があります。

次に、次の例のように、WebView を呼び出すアクティビティに JavaScript インターフェースを追加する必要があります。

完全なコードについては、「設定方法」の手順で GitHub からダウンロードしたサンプルコードをご覧ください。

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

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

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

> adb shell setprop log.tag.FA VERBOSE

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

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

アプリで [LOG EVENT 1] をクリックすると、コードが正しく動作している場合は、次のようなログが表示されます。

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

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

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

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

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

イベントが [コンバージョン] タブに表示されていれば、そのイベントをコンバージョンとして確認できたということです。これで、Google 広告で Firebase からこのイベントをインポートできるようになります。

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

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

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

[プロジェクトの概要] の横のボタンをクリックして、Firebase 設定 に移動します。
[統合] タブで、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 広告の設定