こんにちは、Customer Engineerの神谷です！この前の週末、せっかく晴れたので浅草の隅田公園まで桜を見に行ってきました！抜けるような快晴の青空に、美しい桜の花が映えて最高でした。ちなみに1番好きな桜ソングは、Janne Da Arcの桜です。
VZ8A0949(1).webp

さて今回は、Craft FunctionsからGoogle Analytics Data APIを利用して、GA4のファネル分析レポートを作成する方法をご紹介します。多くの企業や組織で導入されているであろうGA4ですが、導入したところで結局そこからどうすればいいのか、お悩みの方も多いのではないでしょうか？正直、GA4を活用したWebサイトの分析にこれさえやれば間違いないと断言できる方法はないため、このブログでは様々な分析手法を掲載していきたいと思います。以前ご紹介した、ユーザーセグメントの分析方法などと併せてご参考ください。

今回のファネル分析に関しては、そもそもファネル分析と聞いてもピンとこない方もいらっしゃると思うので、まずファネルとは何なのかということと、ファネル分析をすることによって何が得られるのか、先にご説明しましょう。

ファネルとその分析を行う意義について

端的に書くとファネルとは、顧客やユーザーの行動や進捗をフェーズ分けして段階的に可視化するためのモデルです。Webサイトに流入してきた見込み顧客が、商品購入や申し込みなどの成約に至るまでに段々少なくなっていく様子が漏斗の形状に似ていることから、漏斗を英訳したファネルという言葉がマーケティングの世界では一般的に使われます。マーケティングの世界におけるファネルにはいくつか種類があり、特に「パーチェスファネル」なんかは、聞いたことがある方もいるのではないでしょうか。

これだけだとまだ抽象的なので、ファネルについてもう少し具体的な例を出してみましょう。今回は例として、ECサイトとBtoBのサービスサイトにおけるファネルを書いてみます。あくまでも例で簡単なものにしているので、実際に皆さんのWebサイトでファネルを決める際は、これに捉われず参考程度にお考えください。

ECサイトにおけるファネルの例

ECサイトの場合、商品購入がいわゆる成約・コンバージョンイベントとなるはずで、そこに至るまでの経路は、例えば以下のようにファネルとして定義できます。

サイト訪問
商品一覧ページ閲覧
商品詳細ページ閲覧
カート追加
決済手続き
購入完了

上から順に、ユーザーがサイト訪問して購入に至るまでのプロセスを可視化しています。このようにファネルを定義してその分析を行うことで、どこのフェーズで問題があるのか明らかになり、そこから改善策を考えて実行していくことになります。例えば、商品一覧ページから商品詳細ページ閲覧の際に離脱が多い場合は、人気が高かったり見栄えのいい商品を上の方に配置してクリック率を高められないか、といった具合です。

BtoBのサービスサイトにおけるファネルの例

BtoBのサービスサイトの場合は、例えばファネルは以下のようになります。成約となるのは、サービス資料請求や見積もりなどのフォーム送信完了イベントが一般的でしょう。

サイト訪問
サービス一覧ページ閲覧
サービス詳細ページ閲覧
お問い合わせフォーム閲覧
お問い合わせフォーム送信完了

ECサイトのケースと同様、上から順にフォーム送信完了に至るまでのプロセスを可視化しています。BtoBのサービスサイトのファネル分析をした場合、明らかになる問題点の1つとしてありがちなのが、フォーム閲覧まではしてくれたけど結局フォーム送信には至らなかったケースではないでしょうか。この場合は、フォームの項目名を減らして入力のハードルを下げるなどの改善策が考えられたりします。

上記の例のように、それぞれのWebサイトごとに適切なファネルを設定し、その分析を行うことで、どこでユーザーの離脱が多いのかがわかり、その理由が一体何なのかを考えて仮説検証していくことでユーザーの離脱を減らし、より多くの成約・コンバージョン獲得へ繋げられる可能性が高まります。

アウトプットイメージ

ここまでで、ファネルとそれを分析する意義についてご理解いただけたと思うので、具体的なアウトプットの話に進みましょう。今回の最終的なアウトプットイメージは、次の通りです。

スクリーンショット2024-04-0917.27.00.png

スプレッドシートの1行目に集計期間を明記し、その下に設定したファネルごとのユーザー数やセッション数などを抽出し、更に上のプロセスからユーザーがどれだけ次のステップに進んでくれたかを、セッション通過率として計算して、Googleスプレッドシート（以下、スプレッドシート）に出力しています。後でまた説明しますが、簡単に書くとこのセッション通過率が高いほど、ユーザーが離脱せず次のステップに進んでくれていることを示しています。APIを使うと、このような計算も簡単に行うことができ、更に定期的に自動で実行したり、スプレッドシートやSlackなど出力先を自由に変えられるのも、大きなメリットですね。

そして構成図は、次の通りです。

スクリーンショット2024-04-0915.30.28.png

構成自体は非常にシンプルで、Craft Functionsを起動してGoogle Analytics Data APIからGA4のファネル分析に関するデータを取得し、それを返したら成形してスプレッドシートに出力しているだけです。

注意点

前提として、次の点に注意をしてください。

GA4の設定は済んでいることを前提にしています
- GA4でファネル分析をするにあたって、必要なそれぞれのステップはイベントとして定義しておく必要があります
- デフォルトでGA4で設定されているイベントを使うこともできますが、それ以外を使いたい場合はカスタムイベントとして事前に作成しておいてください

手順

具体的な手順は、以下の通りです。

GCPプロジェクトでGoogle Analytics Data APIとGoogle Sheets APIを有効化する
Googleサービスアカウントを作成してjsonキーを取得する
サービスアカウントにGA4の権限を付与する
Googleサービスアカウントに対象スプレッドシートへの権限を付与する
GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する
Google Analytics Data APIを利用してGA4のファネル分析レポートを作成するためのCraft Functionsを作成する

順番に見てみましょう。

1. GCPプロジェクトでGoogle Analytics Data APIとGoogle Sheets APIを有効化する

まず、Google Analytics Data APIとGoogle Sheets APIを有効化します。その利用にあたっては、GCPプロジェクトを利用する必要があります。

スクリーンショット2024-01-3013.30.52.png
スクリーンショット2024-02-2014.20.20.png
スクリーンショット2023-08-1413.10.10.png
適当なGCPプロジェクトを作成または選択し、[APIとサービス > 有効なAPIとサービス > APIとサービスの有効化またはライブラリ] からGoogle Analytics Data APIとGoogle Sheets APIを検索し、それぞれ有効化します。

2. Googleサービスアカウントを作成してjsonキーを取得する

次に、同一GCPプロジェクトでGoogleサービスアカウントを作成します。後にそのアカウントを使ってGA4の認証をします。

[IAMと管理 > サービスアカウント > サービスアカウントを作成] から適当な名称のアカウントを作成します。

スクリーンショット2023-08-1413.15.34.png

作成したサービスアカウントを選択し、[キー > 鍵を追加 > 新しい鍵を作成] からJSON形式のキーファイルをダウンロードします。

スクリーンショット2023-08-1413.16.12.png

このキーファイルの中身を、後でCraft Secret Managerに登録する必要があるので、取っておいてください。

3. サービスアカウントにGA4の権限を付与する

Google Analytics Data APIを有効化し、サービスアカウントを作成しても、それだけではGA4のデータを取得できるようにはなりません。GoogleアカウントにGA4の権限を付与するのと同様に、サービスアカウントにもGA4の権限付与が必要です。

スクリーンショット2024-02-2014.31.43.png
スクリーンショット2024-02-2014.30.43.png
スクリーンショット2024-02-2014.35.09.png

GAの画面で左下の歯車アイコン（管理）をクリックします
その中にあるアカウントのアクセス管理をクリックします
サービスアカウントのメールアドレスを入力して、権限に閲覧者を指定します

もし皆さんがGA4の管理者権限をお持ちの場合、ご自身でサービスアカウントへの権限付与が可能なはずです。しかし上の画面のように、他者への付与権限がないと言われた場合、管理者に権限付与を依頼してください。ちなみに今回は、GA4のデータを読み取るだけなので、権限は閲覧者で大丈夫です。

4. Googleサービスアカウントに対象スプレッドシートへの権限を付与する

Google Sheets APIを有効化してサービスアカウントのjsonキーを取得しても、個別のスプレッドシートに対して自由にアクセスできるわけではありません。スプレッドシートごとに、閲覧権限や編集権限を付与する必要があります。

スクリーンショット2024-02-1317.57.41.png

右上の共有をクリックします
Googleアカウントに権限を付与するのと同様に、サービスアカウントのメールアドレスを入力します
権限には、編集者を指定してください

5. GoogleサービスアカウントのJSONキーファイルの中身を Craft Secret Manager に登録する

Googleサービスアカウントの認証情報をCraft Functionsから安全に利用するために、Craft Secret Manager に登録します。

[Craft > シークレット] からシークレットを新規作成
[名前] に、わかりやすい名前を入力
ダウンロードしたJSONキーファイルの中身を [シークレットの値] にそのまま入力し、作成
シークレット名をメモしておく

6. Google Analytics Data APIを利用してGA4のファネル分析レポートを作成するためのCraft Functionsを作成する

Craft Functionsのファンクションを作成します。作成手順は次の通りです。

[Craft > ファンクション > 新規作成 > テンプレートから作成] を選択
「 Craft FunctionsからGoogle Analytics Data APIを利用し、GA4のファネル分析レポートを作成する 」というテンプレートを検索し[取得]ボタンをクリック
[反映] ボタンをクリック
[変数] タブで次の変数の値を設定する
- SERVICE_ACCOUNT_KEY_SECRET
  - 利用するGoogleサービスアカウントのJSONキーを登録したシークレットの名前です
- DAY_BEFORE_END_DATE
  - 集計の終了日から何日前の日付を開始日として使用するかを指定します
- SPREADSHEET_ID
  - 出力先となるスプレッドシートのシートIDです
  - URLがhttps://docs.google.com/spreadsheets/d/123456789/editの場合、123456789がそれに該当します
- SHEET_NAME
  - 出力先となるスプレッドシートのシート名です
- GA4_PROPERTY_ID
  - 集計対象となるGA4のプロパティIDです
  - GA4のホーム画面がhttps://analytics.google.com/analytics/web/?hl=ja&pli=1#/p123456789/reports/intelligenthomeとなっていた場合、123456789がそれに該当します
- FUNNEL_NAMES
  - ファネル分析で使うGA4のイベントをカンマ区切りで指定します
- [設定 > ファンクションの有効化] にチェックを付けて [保存]

これらの値は直接Craft Functionsのコード内に埋め込むこともできますが、こうして変数として指定することで、コードをいじらずとも変更できます。プログラミングに慣れない方でも、この形式なら間違って変な部分を編集してエラーが出てしまった、というようなミスを減らせるでしょう。

1つ注意点として、FUNNEL_NAMESに入れるイベントは、1番最初にセッションの始まりを示すようなボリュームの多いイベントを入れてください。更にそこから、自然にユーザーが進むと発生するイベントを順に入力していき、1番最後に成約・コンバージョンとなるイベントを入力してください。例えば以下のような感じです。

visit,view_product,add_to_cart,checkout,purchase

なぜなら、既に述べたようにファネル分析は段階が進むに連れてユーザーやセッションが段々少なくなっていくものだからです。事前にGA4の管理画面を見つつ、自社のWebサイトではどのようなファネルにすべきか検討しておきましょう。

なお、テンプレートのソースコードはGitHubで公開しています。
craft-codes/craft-functions/ga4-funnel-report-spreadsheet at main · plaidev/craft-codes

ここから、Craft Functionsのコードで重要な部分について、かいつまんでご説明します。

// APIリクエストを作成する関数
function createApiRequest(propertyId, eventName, startDate, endDate) {
  return {
    property: `properties/${propertyId}`,
    requestBody: {
      dateRanges: [{ startDate, endDate }],
      dimensions: [{ name: 'eventName' }],
      metrics: [
        { name: 'eventCount' },
        { name: 'sessions' },
        { name: 'activeUsers' },
        { name: 'conversions' },
      ],
      dimensionFilter: {
        filter: {
          fieldName: 'eventName',
          stringFilter: {
            matchType: 'EXACT',
            value: eventName
          }
        }
      }
    }
  };
}

// レスポンスデータを処理する関数
function processResponseData(response, eventName, logger) {
  if (!response || !response.data || !Array.isArray(response.data.rows)) {
    logger.error(`Invalid response for event ${eventName}`);
    return;
  }
  return response.data.rows.map(row => ({
    eventName: row.dimensionValues[0].value,
    eventCount: parseInt(row.metricValues[0].value, 10),
    sessions: parseInt(row.metricValues[1].value, 10),
    activeUsers: parseInt(row.metricValues[2].value, 10),
    conversions: parseInt(row.metricValues[3].value, 10),
  }));
}

// Google Analytics APIからデータを取得する関数
async function fetchGA4DataForEvents(analyticsDataClient, propertyId, startDate, endDate, funnelNames, logger) {
  const eventNames = funnelNames.split(',').map(name => name.trim());

  const allEventDataPromises = eventNames.map(async eventName => {
    try {
      const request = createApiRequest(propertyId, eventName, startDate, endDate);
      const response = await analyticsDataClient.properties.runReport(request);
      return processResponseData(response, eventName, logger);
    } catch (error) {
      logger.error(`Error fetching data for event ${eventName}: ${error}`);
      return []; // エラーがあった場合は空の配列を返す
    }
  });

  const allEventDataArrays = await Promise.all(allEventDataPromises);

  return allEventDataArrays.flat();
}

この部分で、GA4から必要なデータをまず取得しています。今回はファネルのそれぞれにイベント名を指定するので、dimensions: [{ name: 'eventName' }]と書き、あとはそれぞれのイベントごとにイベント数やセッション数・ユーザー数などのメトリクスを取得しています。Google Analytics Data APIで他に使えるメトリクスに関しては、公式のドキュメントをご覧ください。

あとは、Craft Functionsを実行するための設定も必要になります。今回は、KARTEで閲覧や購入など何かイベントが発生した際に発動するのではなく、1ヶ月か2ヶ月程度に1回の定期実行が一般的かと思われるので、その設定方法をご紹介します。ちなみに定期実行にしておくと同じシートでどんどんデータが上書きされてしまうので、比較のためにも実行したらその結果はコピーして別のシートとして保管しておくといいでしょう。

スクリーンショット2024-02-1318.25.41.png

Craft Functionsの設定タブを開きます
スケジュールを有効化し、cron形式（JST）で実行時間を指定します

cron形式（JST）についてここで詳しくは説明しませんが、例えば毎月1日の11時に実行したい場合は、0 11 1 * *と入力して保存してください。とりあえずすぐ動かして実行結果を確認したい場合は、1分ごとに毎回実行される* * * * *を入力してみてください。入力欄の下に例があるので、そんなに難しくはないと思います。

ここまでできたら、Craft Functionsを有効化して保存してください。

実際に動かしてみる

実際に動作を確認してみましょう。

問題なく設定できていれば、次のような表示が実現できるはずです。

スクリーンショット2024-04-0917.27.00.png

こうして見るとこの場合、add_to_cartからcheckoutに進む段階でセッション通過率がガクッと下がっている、つまりカートには入れたけど決済画面に進む段階での離脱が、特に多いことがわかりますね。それがわかったら、そういうユーザーはどこから流入してきたんだろうとか、色々考えられる仮説も出てきて、同じGA4でも別の分析を試してみたり、KARTEをお使いの場合はもっと詳細な分析をしてみてもいいかもしれません。そういった分析手法は、また別途ご紹介したいと思います。

おわりに

今回はCraft FunctionsからGoogle Analytics Data APIを利用し、GA4のファネル分析レポートを作成する方法について紹介しました。

なかなか使いこなすのが難しいGA4ですが、APIを使ってレポートを作れば形式なども自由に指定でき、チームへの共有も簡単にできて便利ですね。このソリューションが、皆さんのマーケティング施策推進に少しでもお役に立てれば幸いです。

プレイドでは、世の中にインパクトを与える新しいソリューションを一緒につくる仲間を募集しています！ぜひ気軽にお問い合わせください。

↓ パートナー企業になりたい

CustomerData-Driven Solution を一緒に創りませんか？ | PLAID Ecosystem

↓ PLAIDで働きたい