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 広告の設定