Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

1. はじめに

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

作成するアプリの概要

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

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 アナリティクスでウェブビューのイベントをトラッキングするには、ウェブと Android アプリの両方にコードを挿入する必要があります。

このパートでは、ウェブに配置する必要があるコードについて説明します。

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

イベントをトラッキングする場所で、次のようにこの関数を呼び出します。

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

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

アプリの WebView 内でウェブページを呼び出すには、ウェブページの URL が必要です。ウェブページをホストする方法はたくさんありますが、この Codelab では、便宜上 Firebase ホスティングサービスを使用します。

ターミナルで、ウェブディレクトリ（例: cd web）に置き換えて、次のコマンドを実行します。
npm install -g firebase-tools - Firebase CLI がインストールされます。
firebase login
firebase init
設定する機能を選択するよう求められたら、[Hosting] を選択します。
Android アプリ用に設定したプロジェクトを選択します。
残りのプロンプトはすべてデフォルト値のままにします。
firebase deploy --only hosting - Firebase Hosting にデプロイします。

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

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

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

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

コード全体を確認するには、「設定」の手順でダウンロードしたサンプルコードをご覧ください。

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

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

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

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

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

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

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

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

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

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

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

[プロジェクトの概要] の横のボタンをクリックして、Firebase 設定に移動します。
[統合] タブに、[Google 広告] と [リンク] ボタンが表示されます。[リンク]、[続行] の順にクリックします。

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

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

Google 広告に移動します。

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

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

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

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

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

10. インポートされたイベントを使ってアプリアクションキャンペーンを開始する

現在のアカウントの [キャンペーン] タブに移動し、[+] ボタンをクリックして新しいキャンペーンを作成します。[新しいキャンペーンを作成] をクリックし、[続行] をクリックします。
[アプリインストール] オプションでアプリインストール広告キャンペーンを起動します。

アプリ名、パッケージ名、またはパブリッシャーを入力してアプリを検索します。
[単価設定] セクションで、プルダウンメニューから [アプリ内コンバージョン数] を選択します。
一覧にカスタムイベントが表示されます。[目標コンバージョン単価] を設定し、その他のオプションを入力します。

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

11. 完了

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

学習した内容

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