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

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

作成するアプリの概要

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

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

bdbf1fc3cbf49ac7.png

学習内容

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

必要なもの

  • Android Studio 3.6 以上
  • Xcode(iOS の場合)
  • Firebase アカウント
  • Google 広告アカウント

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

Android Studio を起動します。

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

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

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

  1. Firebase にログインします。

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

e9a8e1b1c7c52125.png

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

e58151a081f0628.png

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

3e5b8f1b6ca538c4.png

Android を構成する

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

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

3b7d3b33d81fe8ea.png

  1. 指定を必要とする重要な値は Android パッケージ名です。次の手順で取得します。
  1. Flutter アプリのディレクトリで、ファイル android/app/src/main/AndroidManifest.xml を開きます。
  2. manifest 要素内にある package 属性の文字列値を確認します。この値が Android パッケージ名です(例: com.yourcompany.yourproject)。この値をコピーします。
  3. Firebase のダイアログで、コピーしたパッケージ名を Android package name フィールドに貼り付けます。
  4. Google ログインまたは Firebase Dynamic Links を使用する予定がない場合は、ここで SHA-1 キーは不要です(この Codelab では扱いません)。Google Play から in_app_purchase データをインポートする場合は、後でキーを設定する必要があります。
  5. [アプリの登録] をクリックします。
  6. 引き続き Firebase 内で、指示に沿って構成ファイル google-services.json をダウンロードします。

52f08aa18c8d59d0.png

  1. Flutter アプリのディレクトリに移動し、先ほどダウンロードした google-services.json ファイルを android/app ディレクトリに移動します。
  2. Firebase コンソールに戻り、残りの手順をスキップして、Firebase コンソールのメインページに戻ります。
  3. 最後に、Firebase によって生成された google-services.json ファイルを読み取るための Google Services Gradle プラグインが必要です。
  4. IDE またはエディタで android/app/build.gradle を開き、ファイルの最後の行として次の行を追加します。
apply plugin: 'com.google.gms.google-services'
  1. android/build.gradle を開き、buildscript タグ内に新しい依存関係を追加します。
buildscript {
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}
  1. アプリがまだ実行中の場合は、Gradle で依存関係をインストールできるように、アプリを閉じて再ビルドします。

これで、Android 向け Flutter アプリを構成する作業は完了です。iOS の場合は、こちらの Codelab(Flutter の Firebase について知る)をご覧ください。

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

pubspec ファイルは Flutter アプリのアセットを管理します。pubspec.yaml で、依存関係のリストに firebase_analytics: ^6.2.0firebase_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();
   ...
}

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

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");
   }

 });
}

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

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

f0742c956977df1d.png

これで準備が整いました。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 の値を確認することもできます。

32b01a1412ab2ba5.png

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

e6b420a73db88f03.png

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

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

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

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

b711bf2e94fa0895.png

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

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

Google 広告に移動します。

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

73cec8d2e80eab03.png

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

4b1d8f6a712b2ac6.png

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

ba1bbe6b2924fac8.png

  1. チェックボックスをオンにして、[インポートして続行] ボタンをクリックします。

ab35e341dff32e48.png

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

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

af98c44d1476558.png

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

885956ad00592eb3.png

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

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

学習した内容

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