GASでGA4のデータをUIで指定して、スプレッドシートにさくっと出力するやつを作る【シート公開・コピー利用可】

schedule Published
Category folderMake
Tags
format_list_bulleted Contents

クライアントワークに役立つ Google Analytics (GA4) の任意のデータをさくっとスプレッドシートに出力するやつを作ってみた。

はじめに

クライアントワークでリニューアルの相談を受けるときに、現状把握で既存サイトのGoogle Analyticsのデータをみる機会は多い。

自社サービスや運用案件などであれば、プロダクトに合わせて練られた定型のデータで確認できるが、ベンダーとして縁もゆかりもない既存サイトを把握するには、毎回任意でデータを追わなければならない。

GA4になって思うのは、初見一回きりのために探索レポートなどを設定するのはとても面倒。
GA4 Query Exploreropen_in_newの簡易版（あんなに細かく条件指定はいらない）のイメージで、さくっと任意のGA4のデータを取得して、スプレッドシートに出力するようなものが欲しい！

探しても見つからないので、GAS（Google Apps Script）を使ってできるレベルなら、ノンプログラマーの自分でも作れるだろう…ということで作ってみることにした。

GA4データ取得シート作成後のおさらい

一応動くものを作れたので、参考になった情報を整理した。
自作に興味のない方は、このセクションは飛ばして公開シートのリンクへどうぞ。

スプレッドシートに紐づいたコンテナバインド型のGASで作っている。

GA4のデータ取得方法

GASには、特定のGoogleサービスのパブリックAPIを簡単に使えるようにしてくれる「高度なサービス」がある。 その中に、GA4のデータを取得する Google Analytics Data API をGASで使用できる「Analytics Data Service」も用意されている。

下記に公式のリンクをまとめています。

  • Analytics Data Serviceopen_in_new
    GASの高度なサービス「Analytics Data Service」の公式ページ。「Analytics Data Service」を使ったGASのサンプルコードもある。GASの高度なサービスは、パブリックAPIと同じオブジェクト、メソッド、およびパラメータを使用する。
  • Google Analytics Data API open_in_new
    GASの高度なサービスは、パブリックAPIと同じオブジェクト、メソッド、およびパラメータを使用するので、このパブリックAPIの公式ページも見て確認する。
  • Discovery Document ( Google Analytics Data API )open_in_new
    API のサーフェス、API へのアクセス方法、API のリクエストとレスポンスの構造、API の説明、リソース スキーマ、認証スコープ、メソッドなど、パブリックAPIの仕様をマシンリーダブルで記述されたドキュメント。

まずはパブリックAPIの公式ページを見て仕様を確認した。

APIのメソッドは7つあるが、普通にGA4のデータを取得したいので、runReportを使用する。ちなみに各データを集めた定型レポートを作りたい場合は、runReport を束ねて投げれるbatchRunReportsを使うとよさそう。

パスにGA4プロパティIDとメソッド、リクエストボディに期間やディメンション、指標などを入れてリクエストする。ディメンションと指標は用意されているAPI名を使う。
APIの仕様は掴めたので、次はGA4のデータを取得するために入力するUIの項目を整理した。

スプレッドシートからリクエストを指定するUIの整理

  • GA4プロパティID
    取得するGA4プロパティは変更したいので、IDの入力フィールドを設ける。
  • 期間
    月次レポートなどではないので期間も自由に指定したい。
    APIの仕様では最大4つの期間まで使える。
    比較は必要ないので1つの期間を指定できるものにする。
  • ディメンション
    APIの仕様では9個まで使える。
    さすがに9個も要らないが2個ぐらいは使えたほうがいいのか迷う。。
    脳直に欲しいデータを取得するのが目的なので、シンプルに1個指定できるようにする。
  • 指標
    APIの仕様では10個まで使える。
    指標を変えてリクエスト投げればよいので1個指定できるようにする。
  • ディメンションフィルター
    ディメンションの指定を1個にしたのでフィルターで深堀りする。
    フィルターは最大2個指定できるようにする。

これでデータ取得の条件を指定するUIの項目も決まったので、GASを書く準備をした。

GASの高度なサービス「Analytics Data Service」を使う準備

新規スプレッドシートを作成してGASのIDEを開いたら、左サイドバーからサービスを追加 → Google Analytics Data API を選択 → 追加を実行して有効化する。これでGASの高度なサービス「Analytics Data Service」が使えるようになる。

GASの Analytics Data Service を有効化

GASの「Analytics Data Service」のサンプルコードを見ると、グローバルオブジェクトはAnalyticsDataだと分かる。あとはGASのスクリプトエディタで、グローバルオブジェクトからコンテンツアシスト機能を使って、関連するGASのメソッドを選んだ。
参考：Apps Script 組み込みの Google サービスopen_in_new

GASスクリプトエディタのコンテンツアシスト

「Analytics Data Service」を使ってGA4のデータを取得するGAS

GASの高度なサービス「Analytics Data Service」の公式ページにあるサンプルコードにならい、UIで指定する予定の部分は仮置きしてGASを書いてみる。

function getReportData() {
  //GA4 プロパティID
  const propertyId = 'UI_SET_GA4_PROPERTY_ID';
  try {
    //期間
    const dateRange = AnalyticsData.newDateRange();
    dateRange.startDate = 'UI_SET_START_DATE'; // YYYY-MM-DD
    dateRange.endDate = 'UI_SET_END_DATE'; // YYYY-MM-DD

    //ディメンション
    const dimension = AnalyticsData.newDimension();
    dimension.name = 'UI_SET_DIMENSION';

    //並び順（今回はディメンションを基準に）
    const orderBy = AnalyticsData.newOrderBy();
    orderBy.dimension = AnalyticsData.newDimensionOrderBy();
    orderBy.dimension.orderType = 'ALPHANUMERIC';
    orderBy.dimension.dimensionName = 'UI_SET_DIMENSION';

    //指標
    const metric = AnalyticsData.newMetric();
    metric.name = 'UI_SET_METRIC';

    //フィルター（今回はディメンションでand条件）
    const dimensionFilter = AnalyticsData.newFilterExpression();
    dimensionFilter.andGroup = AnalyticsData.newFilterExpressionList();
    dimensionFilter.andGroup.expressions = [];

    //フィルター1つ目
    const filterExpression = AnalyticsData.newFilterExpression();
    filterExpression.filter.fieldName = 'UI_SET_Filter_DIMENSION';
    filterExpression.filter.stringFilter = AnalyticsData.newStringFilter();
    filterExpression.filter.stringFilter.matchType = 'PARTIAL_REGEXP';
    filterExpression.filter.stringFilter.value = 'UI_SET_FILTER_VALUE';
    dimensionFilter.andGroup.expressions.push(filterExpression);

    //フィルター2つ目
    const filterExpression2 = AnalyticsData.newFilterExpression();
    filterExpression2.filter.fieldName = 'UI_SET_Filter_DIMENSION_2';
    filterExpression2.filter.stringFilter = AnalyticsData.newStringFilter();
    filterExpression2.filter.stringFilter.matchType = 'PARTIAL_REGEXP';
    filterExpression2.filter.stringFilter.value = 'UI_SET_FILTER_VALUE_2';
    dimensionFilter.andGroup.expressions.push(filterExpression2);

    //リクエストボディ
    const request = AnalyticsData.newRunReportRequest();
    request.dimensions = [dimension];
    request.metrics = [metric];
    request.dateRanges = [dateRange];
    request.orderBys = [orderBy];
    request.dimensionFilter = dimensionFilter;
    request.keepEmptyRows = true; // 空行を返す

    //APIへリクエストを送りレスポンスを受け取る
    const report = AnalyticsData.Properties.runReport(request,`properties/${propertyId}`);

  } catch (e) {
    Browser.msgBox("ERROR",e.message,Browser.Buttons.OK);
  }
}

UIで指定する予定のところを、実際の値やAPI名を直書きしてテストしておく。
実際にUIから指定するときは、ディメンションやフィルターを指定しないこともある。指定しない場合のテストとして、リクエストボディのdimensionsオブジェクトやdimensionFilterオブジェクトにnullを入れてリクエストすると、エラーにならずにレスポンスを受け取れた。

keepEmptyRowsで空行を返すにしても上手く機能しなかった気がする。
指定の仕方がダメなのか。。ちょっと分からなかった。

リクエストに使用するディメンションと指標のAPI名を取得する

ディメンションと指標のAPI名は、Google Analytics Data API のgetMetadataメソッドで一覧を取得できる。対象のGA4プロパティがカスタムディメンションやカスタム指標を持っている場合は、それもレスポンスに含まれる。 エンドポイントにGA4プロパティIDを入れてリクエストするだけ。

function getMetadata() {
  //GA4 プロパティID
  const propertyId = 'UI_SET_GA4_PROPERTY_ID';
  try {
    //APIへリクエストを送りレスポンスを受け取る
    const metadata = AnalyticsData.Properties.getMetadata(`properties/${propertyId}/metadata`);
  } catch (e) {
    Browser.msgBox("ERROR",e.message,Browser.Buttons.OK);
  }
}

GA4のデフォルトで用意されているディメンションと指標だけでもかなり多い。UIから手入力するのは現実的ではないので、セレクトボックスで選択できるようにしたいが、この数を選択肢にすると多すぎて使い勝手が悪い。一旦取得したものすべてをシートに反映し、シート側でチェックしたものをUIのセレクトボックスの選択肢に入れる仕様にした。

getMetadataで取得したAPI名をシートに反映してチェックする
getMetadataで取得したAPI名をすべてシートに反映しチェックできるようにした

利用中のGoogleアカウントでアクセス可能なGA4プロパティを取得する方法

Google Analytics Data API へリクエストするのにGA4プロパティIDが必要なので、利用中のGoogleアカウントでアクセス可能なGA4プロパティの取得機能を付けておく。

GA4プロパティの取得は Google Analytics Admin API を使えば取得できる。
Google Analytics Admin API も GASで使用できるように「Analytics Admin Service」が用意されている。

下記に公式のリンクをまとめています。

GASの高度なサービス「Analytics Admin Service」を使う準備

「Analytics Admin Service」もGASのIDEの左サイドバーからサービスを追加 → Google Analytics Admin API を選択 → 追加、で有効化すると利用できる。

GASの Analytics Admin Service を有効化

アクセス可能なすべてのGAアカウントとその中にあるGA4プロパティはaccountSummaries.listメソッド（エンドポイントにアクセスするだけ）で取得できる。

「Analytics Admin Service」を使ってGA4プロパティ名とIDを取得するGAS

function listGA4Properties() {
  const accountSummaries = AnalyticsAdmin.AccountSummaries.list()
}

GASでスプレッドシートのUIを作成

コンテナバインド型のGASの場合、GASの「HTML Service」を使って、紐づいたスプレッドシートのダイアログやサイドバーの中身を表示できる。

ポイントは、Webアプリケーションとして公開するのと違い、doGet()関数やデプロイなどの必要はない。その代わりに、HtmlOutputオブジェクトとして、UIオブジェクトのshowModalDialog()またはshowSidebar()メソッドに渡す。
参考：Serve HTML as a Google Docs, Sheets, Slides, or Forms user interfaceopen_in_new

スプレッドシートに、下記3つのメニューアイテムを持つカスタムメニューを追加した。

  • GA4プロパティ取得
    アクセス可能なGA4プロパティを取得してシートに出力する。
  • メタデータ取得
    GA4プロパティIDの入力欄をもつダイアログを表示。
    ダイアログから入力して実行すると、メタデータを取得してシートに出力する。
  • GA4レポート取得
    レポートデータ取得の条件指定の入力欄をもつサイドバーを表示。
    サイドバーから入力して実行すると、GA4のレポートデータを取得してシートに出力する。

メタデータ取得のダイアログとGA4レポートデータ取得のサイドバーの中身用のhtmlファイルを準備する。GASのIDEからファイル追加→HTML→ファイル名を入力の手順で作成できる。

GASのIDEからHTMLファイルを追加

htmlの準備ができたら、GASでスプレッドシートにUIを追加する。

const UI = SpreadsheetApp.getUi();

//カスタムメニュー
function onOpen() {
  UI.createMenu('GA4 ゲットだぜ！')
    .addItem('GA4プロパティ取得', 'listGA4Properties')
    .addItem('メタデータ取得（ディメンションと指標）', 'showDialog')
    .addItem('GA4レポート取得', 'showSideBar')
    .addToUi();
}

// GA4プロパティを取得してシートに出力
function listGA4Properties() {
  ⋮
}

//ダイアログを表示（中身はdialog.html）
function showDialog() {
  const html = HtmlService.createHtmlOutputFromFile('dialog').setHeight(130).setWidth(250);
  UI.showModalDialog(html,'メタデータ取得');
}

//サイドバーを表示（中身はsidebar.html）
function showSideBar() {
  const html = HtmlService.createHtmlOutputFromFile('sidebar').setTitle("GA4レポート取得");
  UI.showSidebar(html);
}

//メタデータを取得してシートに出力（UIの入力値を引数に）
function getMetadata(form) {
  ⋮
}

//GA4レポートデータを取得してシートに出力（UIの入力値を引数に）
function getReportData(form) {
  ⋮
}

スプレッドシートにカスタムメニューが表示された。

スプレッドシートにGASでメニュー追加

まだUIの表示ができただけで、UIから操作してもGASは実行できない。

google.script.runでクライアントサイドからサーバーサイドのGASを実行

google.script.runは、HTMLサービスページで利用できる非同期のクライアントサイド JavaScript APIで、サーバー側のGASの関数を呼び出すことができる。
参考：Class google.script.run (Client-side API)open_in_new

//メタデータ取得用ダイアログ（dialog.html）
<!DOCTYPE html>
<html>
  <body>
    <form id="form">
      <div>
        <label for="property-id">GA4 プロパティID</label>
        <input type="text" id="property-id" name="propertyId" oninput="value = value.replace(/[^0-9]+/i,'');" required>
      </div>
      <button onClick="google.script.run.getMetadata(this.parentNode);">メタデータを取得</button>
    </form>
  <body>
<html>

これでUIから入力した値をGASの関数に渡して実行できるようになった。

HTMLやJavaScript、GASで値をシートに反映するなどの基本的な説明は割愛する。次のセクションで作成したシートを公開しているで、今回書いたGASを直接確認できます。

GA4データ取得シートの公開リンク

今回作成したGoogleスプレッドシート + GAS は、下記リンクからコピーを作成できます。

シートの使い方

ondemand_video使用デモ

シート使用のデモンストレーション動画を用意した。
本記事が役に立ったなと思った方は、チャンネル登録なりコメントなりしてくれれば嬉しいです。

menuカスタムメニューの説明

メニューバーの一番右にGA4ゲットだぜ！というカスタムメニューを用意している。

カスタムメニュー
  • GA4プロパティ取得
    このメニューアイテムを実行すると、シートを利用しているGoogleアカウントからアクセス可能なGA4プロパティを「dataシート」のアクティブなセルを基点に出力する。レポートデータを取得したいGA4プロパティのIDが分かっていれば実行する必要はありません。
  • メタデータ取得
    このメニューアイテム実行で開くダイアログからGA4プロパティIDを入力して実行すると、APIから取得したディメンションと指標を「dimensionsシート」と「metricsシート」に反映する。カスタムディメンションやカスタム指標も取得します。
  • GA4レポート取得
    このメニューアイテム実行で開くサイドバーから取得したい条件を入力して実行すると、取得したGA4のデータを「dataシート」のアクティブなセルを基点に出力する。

おわりに

世間ではGoogleスプレッドシート + ChatGPTで盛り上がってる中、これをやっていました（笑）。

月次で定型のデータを取得するなどの自動化はもっと簡単に作れそう。
初めてGASのHTMLサービスを使ったが、ちょっとしたユーザーインターフェイスを設けるのに便利だった。

1年に1回ぐらいしかGASを触らないので、毎回頑張ったのに忘れてしまう。。
次はこれまでGoogleスプレッドシート+GASで作ったものから、よく使用した呪文を自分用にまとめたい。