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

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 ap] を選択します。それ以外の場合は、[ファイル] >新規 >新しい Flutter プロジェクト。
プロジェクトの種類として [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（Firebase for Flutter を理解する）を参照してください。

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() メソッドが表示されます。ここで、熱心なユーザーがインクリメントボタンが 6 回以上クリックされたときに、カスタムイベントをログに記録します。その後、熱心なユーザーを引き付けるためのアプリキャンペーンを開始します。

まず、初期化した分析オブジェクトを 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」をコンバージョンとしてマークします。

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

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

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

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

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

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

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

Google 広告に移動します。

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

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

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

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

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

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

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

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

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

9. 完了

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

学習した内容

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