Google アナリティクスカスタムイベントと Flutter を使用した Google 広告キャンペーンの開始

1. はじめに

最終更新日: 2021 年 1 月 25 日

作成するアプリの概要

この Codelab では、GA4F でカスタムイベントを実装して Flutter アプリ向け Google 広告でアクションキャンペーンを開始する方法を学びます。

ここでは、簡単なカウンタウィジェットを使ったデフォルトの Flutter アプリを使用します。作成したアプリを、カウンタウィジェットをクリックする可能性のあるユーザーに向けて宣伝します。

学習内容

Flutter で GA4F（Firebase 向け Google アナリティクス）を初期化する方法
カスタムのイベントとパラメータの作成方法
Firebase から Google 広告にイベントをインポートする方法
カスタムイベントを使用してアクションキャンペーンを開始する方法

必要なもの

Android Studio 3.6 以上
Xcode（iOS の場合）
Firebase アカウント
Google 広告アカウント

2. 新しい Flutter プロジェクトを開始する

テンプレート化された簡単な Flutter アプリを作成します。この Codelab では、このスターターアプリを変更していきます。

Android Studio を起動します。

開いているプロジェクトがない場合は、スタートページで [Start a new Flutter app] を選択します。それ以外の場合は、[File] > [New] > [New Flutter Project] を選択します。
プロジェクトの種類として [Flutter Application] を選択し、[Next] をクリックします。
Flutter SDK のパスに SDK の場所が指定されていることを確認します（テキストフィールドが空欄の場合は、[Install SDK] を選択します）。
プロジェクト名を入力し、[次へ] をクリックします。
Android Studio に推奨されたデフォルトのパッケージ名を使用し、[Next] をクリックします。
[Finish] をクリックします。
Android Studio により SDK がインストールされ、プロジェクトが作成されるまで待ちます。

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

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

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

Firebase にログインします。

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

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

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

4. プラットフォーム固有の Firebase 構成（Android）

Android を構成する

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

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

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

Flutter アプリのディレクトリで、ファイル 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 をダウンロードします。

Flutter アプリのディレクトリに移動し、先ほどダウンロードした 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 向け Flutter アプリを構成する作業は完了です。iOS の場合は、こちらの Codelab（Flutter の Firebase について知る）をご覧ください。

5. Flutter で Firebase 向け Google アナリティクスを構成する

このステップでは、Firebase 向け Google アナリティクスの機能が入った、firebase_analytics という名前の Firebase 向け Google アナリティクスのパッケージを使用します。

pubspec ファイルは Flutter アプリのアセットを管理します。pubspec.yaml で、依存関係のリストに firebase_analytics: ^6.2.0（firebase_analytics 6.2.0 以降）を追加します。

dependencies: 
   flutter: 
      sdk: flutter 
   cupertino_icons: ^0.1.2 
   firebase_analytics: ^6.2.0   # add this line

Android Studio のエディタビューで pubspec を表示し、続いて [Packages get] をクリックします。これにより、パッケージがプロジェクトに取り込まれ、コンソールに次のように表示されます。

flutter packages get 
Running "flutter packages get" in startup_namer... 
Process finished with exit code 0

Pub get を実行すると、pubspec.lock ファイルも自動生成されます。このファイルには、プロジェクトに取り込まれたすべてのパッケージとそのバージョン番号のリストが含まれます。

lib/main.dart で、新しいパッケージをインポートします。

import 'package:firebase_analytics/firebase_analytics.dart';

MyApp クラスで、コンストラクタを呼び出して FirebaseAnalytics オブジェクトを開始します。

class MyApp extends StatelessWidget {
 static FirebaseAnalytics analytics = FirebaseAnalytics();
   ...
}

これで、カスタムイベントログを起動できるようになりました。

6. Firebase 向け Google アナリティクスを使用してカスタムイベントを記録する

Flutter アプリで新しいテンプレートを生成した場合、デフォルトの State クラス内に _counter 変数と _incrementCounter() メソッドがあります。ここでは、インクリメントボタンが 5 回を超えてクリックされたときにカスタムイベントをログに記録します。その後でアプリキャンペーンを立ち上げて、アプリのエンゲージメントを高める可能性の高いユーザーを呼び込みます。

最初に、初期化した分析オブジェクトを Stateful ウィジェットに渡します。まず、MyHomePage コンストラクタに分析パラメータを追加します。

MyHomePage({Key key, this.title, this.analytics}) : super(key: key);

次に、コンストラクタを呼び出すときに分析パラメータを追加します。

home: MyHomePage(
   title: 'Flutter Demo Home Page',
   analytics: analytics,
),

これで、logEvent() メソッドを使って簡単にイベントを記録できるようになりました。メソッドを追加し、_counter 変数をインクリメントします。

void _incrementCounter() {
 setState(() {
   _counter++;

   //add this
   if(_counter > 5) { 
     widget.analytics.logEvent(name: "clicked_counter"); 
   }

 });
}

これで、アプリでカスタムイベントログを起動できるようになりました。

事前に構築されたメソッドを使用してイベントを起動することもできます。

これで準備が整いました。Android Studio で「main.dart」を実行しましょう。

（省略可）パラメータを使用して Firebase 向け Google アナリティクスに追加情報を送信する

パラメータを使って追加情報を送信することもできます。カスタムパラメータは、アナリティクスのレポートに登録できます。各レポートに適用できるオーディエンス定義で、フィルタとして使用することもできます。アプリが BigQuery プロジェクトにリンクされている場合、カスタムパラメータも BigQuery に表示されます（Firebase の BigQuery Export をご覧ください）。

ここでは、パラメータとして _counter の値を設定します。

void _incrementCounter() {
 setState(() {
   _counter++;

   if(_counter > 5) {
     widget.analytics.logEvent(name: "clicked_counter", parameters: {'count' : _counter});
   }
 });
}

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

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

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

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

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

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

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

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

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

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

Google 広告に移動します。

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

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

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

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

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

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

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

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

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

9. 完了

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

学習した内容

Flutter 用に Firebase 向け Google アナリティクスを構成する方法
Flutter アプリで Firebase Analytics を使用してカスタムイベントを記録する方法
イベントをインポートして、アクションキャンペーンで使用する方法