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」の公式ページ。サンプルコードがあります。
  • 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の仕様が掴めたので、UIで指定する条件を決めておきます。

  • GA4プロパティID
    依頼・相談してくるクライアントが変わるので入力が必要。
  • 期間
    定型レポートではないなら、自由に期間も変更したいので入力が必要。
    APIの仕様では最大4つの期間まで使えるが、レスポンスに比較とか必要ないので1つに。
  • ディメンション
    APIの仕様では9個まで使える。
    さすがに9個も要らないが、2個ぐらいは使えたほうがいいのか迷う。。
    脳直に欲しいデータを取得するのが目的なので、シンプルに1個に決め！
  • 指標
    APIの仕様では10個まで使える。
    ディメンションと同じ理由で1個に決め！
    他に欲しければ指標を変えてリクエスト投げればいい。
  • ディメンションフィルター
    ディメンションの指定が1個なのでフィルターがないと深堀りできません。
    フィルターも1個にしてたのですが、使ってみて足りないことも多かったので2個にしました。

UIで指定する条件も決まったので、GASを書く準備をします。
新規スプレッドシートを作成して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スクリプトエディタのコンテンツアシスト

サンプルコードにならって、UIで指定する予定のリクエストボディで仮のコードを書いてみる。

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で指定するところを直書きしてテストすると、問題なくレスポンスを受け取れました。
実際にUIから指定するときは、ディメンションやフィルターを指定しないこともあります。
ディメンションを指定しない場合のテストとして、リクエストボディのdimensionsオブジェクトにnullを入れてリクエストすると、エラーにならずにレスポンスを受け取れました。

keepEmptyRowsで空行を返すにしても上手く機能していませんでした。
フィルターを使うとダメなのかな。。

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

リクエストにディメンションと指標を指定する場合は、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から手入力するのは現実的ではないので、セレクトボックスで選択できるようにしたいが、選択肢に全部入れると数が多いので使い勝手が悪そうです。

一旦レスポンスをシートに反映し、シートでチェックしたものをセレクトボックスの選択肢に入れる形にしました。

getMetadataで取得したリストをシートに反映してチェックする

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

Google Analytics Data API のリソースのパスパラメーターにGA4プロパティIDが必要なので、利用中のGoogleアカウントでアクセス可能なGA4プロパティの取得機能を付けたいと思います。

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

公式ページは下記にまとめました。

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

GASの Analytics Admin Service を有効化

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

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

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レポートデータ取得のサイドバーの中身用の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でメニュー追加

ただ、メニューアイテムの「メタデータ取得（ディメンションと指標）」は中身がdialog.htmlファイルのダイアログを開く、「GA4レポートデータ取得」は中身がsidebar.htmlファイルのサイドバーを開くだけで、目的のデータを取得してシートに出力する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>

HTMLやJavaScriptの基本的なところとGASでSpreadSheetを操作する部分は割愛してますが、作成のポイントは以上となります。

次のセクションで作成したシートも公開しているので、実際のコードは直接見ることができます。

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でよく使ったものをまとめておきたいと思います。