LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yo16(yo16)

Google Analyticsのデータを、Makeを使ってSupabaseへ取り込む

Last updated at Posted at 2024-11-13

はじめに

Google Analytics（以下、GA）は、ホームページへ設定し、アクセス数などを取得することができます。それを別のBIやシステムで利用するために、データをSupabaseへ取り込む流れを整理します。

Supabaseは、BaaS（Background As A Service）で、その界隈では有名なFirebaseの代替サービスと言われています。無料枠は、ストレージ１GBまで、２プロジェクトまで、１週間使わないと止まる。DBはPostgreSQL。
ちなみに読み方は、Superと同じでいいみたいです。ドメイン取得時の何かの問題で、Superbaseという名前にできなかったという裏事情があるようですｗ

Google Analyticsだけでも、グラフを見たり数字を見たりするのは十分ですが、例えば自社のCRMと合わせて可視化したいとか、他のデータと結合して集計したいとか、GAを見るだけの人に権限を与えたくないとか、いろいろな理由で外に出すケースがあります。

データベースは、Supabaseでなくても、第一候補はGoogle社製のBigQueryでしょう。でも諸事情ある場合もあるということで、今回はSupabase。

またGAとSupabaseの橋渡しは、make.comというサービス（以下、Make）を使います。ノーコードの処理を自動化してくれるものです。無料で、２つのシナリオを有効にできます。シナリオとは、処理の塊のこと。時限起動で、毎日１回とか、毎月何日何時とか仕込んで動かせます。

超概要

  1. SupabaseでGoogle Analyticsのデータを入れる設定
  2. Makeで、Google Analyticsからデータを抽出し、Supabaseへ入れる

作業手順

1. Supabaseの受け側の設定

プロジェクトは作ってある前提で始めます。

1-1. テーブルを作成

image.png
Table Editorから、「New table」

image.png
GAはたくさんの列（ディメンションとメトリクス）がありますが、今回は例としてこんな列。id、date、page_path、sessions、pageviews、users。

ちなみにディメンションとは、group byのキーで、メトリクスはそのcountとか集計値。つまりGAが提供するのは集計後の値です。group byとはいえ、ディメンションはものすごく多いので、ほぼ１アクセスごとのレコード。ちょっとそれがわかりづらいんですよね。

1-2. RLSの設定

Supabaseは、PostgreSQLのRLS(Row Level Security)の対応があります。テーブルのデータへのアクセス制御を厳密にコントロールする機構です。デフォルトではそれが有効になっていて、外からはSelectもInsertもできないので、Insertだけ許してあげる設定をします。

image.png
image.png
テーブルのデータ一覧（まだ空だけど）の上にある、Add RLS policyをクリックし、画面遷移先でテーブル名の右の方にあるCreate policyをクリックします。

image.png
Policy Nameを、Allow Insert for All（任意でよいです）
Policy Commandで、INSERT
下のクエリの中かっこの中にtrueと書きます。
そしてSave policyボタンを押す。

これによって、認証を通りさえすれば、外部からInsertだけはできるようになります。でも見ること(Select)も消すこと(Delete)もできないです。

1-3. APIキーを取得

ポリシーの設定画面は終わって、左のアイコンの並びの下の方の歯車、Project Settingsへ移ります。

image.png
Project SettingsのAPIのセクションにある、Project URLと、Project API Keysの anon publicと書いてある右の値を取得して、取っておきます。

ここまでで、受け側である Supabaseの設定はおしまい。

2. Makeで受け渡し

Makeで、毎日お昼くらいに、昨日分をGAからデータを取り出して、Supabaseへ取り込むようにします。
なおこの設定だと、１日２回実行すると２重になっちゃうし、取り忘れれば飛ぶので、注意が必要:grinning:
厳密なシステムでは、この辺りはいつも苦労します。あえて毎日、直近の１週間分を重複して取り、Upsertするような形にすることが多いと思います。

Makeでは、３つのモジュールを使います。

  1. GAからデータを取り出す
  2. 結果を行数分、ループする
  3. Supabaseへ１行Insertする（ループして全行Insertされる）

下は完成形。
image.png

2-1. Google Analytics 4のモジュールを追加

image.png
Google Analytics 4というモジュールのうち、Make an API Callという処理を使います。

image.png
Creating a connectionから、名前とプロパティID。

プロパティIDは、GAの画面で、「プロパティとアプリ」を選ぶところに書いてある、9桁の数字。

GAにアクセスするGoogleのアカウントを選択すると、Makeから、そのアカウントを使ってGAにアクセスするよという申請が出るので許可します。
許可すると、Makeのモジュール設定画面に戻ります。と同時に、メールが送られていて、Makeに許可が出たよというセキュリティ通知が来てます。

次に、情報を得るための問い合わせ設定です。
一応正式なドキュメントはこちら。

そしてそれを入力するMakeの画面です。

image.png
モジュール設定画面では、Base URLは、
https://analyticsdata.googleapis.com/v1beta/
URLは、
/properties/123456789:runReport
です。123456789はプロパティIDに置き換えて。
Methodは、POST
Bodyは、下記

{
  "dateRanges": [
    {
      "startDate": "yesterday",
      "endDate": "yesterday"
    }
  ],
  "dimensions": [
    {"name": "date"},
    {"name": "pagePath"}
  ],
  "metrics": [
    {"name": "sessions"},
    {"name": "screenPageViews"},
    {"name": "totalUsers"}
  ]
}

モジュールを作り終わったら、モジュールを右クリックして「Run this module only」をやっておきましょう。

image.png
image.png
右上に「１」と出て、１件の処理が正常終了したとわかります。そこをクリックすると、Input（＝設定値）とOutput（＝処理結果）が見られます。

そして次のモジュールで、結果を使えるようになります。

2-2. GAの結果を整形

GAの結果の + のところを展開していくと、取得したデータは配列型になって取得できています。

image.png
実際の戻り値が↑です。

Body.raws[1]が１行目のデータで、Body.raws[1].dimensionValues[1].valueが、１行目のディメンションの日付で、20241112が得られました。
Body.raws[1].dimensionValues[2].valueは、ページのURLです。
メトリックも同じですね。

なお、インデックスが1から始まっているので注意です。

で、これを一気にInsertはできなくて、１行ずつInsertします。rawsでループしたくなりますね。
それをやるのがFlow ControlのIteratorモジュールです。

image.png
設定はすごく簡単で、Arrayという欄をクリックすると、GAの結果の画面が横に出るので、そこから配列要素をクリックします。
今回は、Bodyの中のrows[]です。

そしてOKで閉じて、また「Run this module only」をやっておきましょう。

2-3. Supabaseへデータを登録

３つ目のモジュールで、SupabaseへInsertします。

Makeのモジュールを追加するところでSupabaseと検索すると、Supabaseモジュールが出てくるのですが、これはMakeとは別のStartIntegrate.comが提供する非公式モジュールでした。まぁいいかもしれませんが、SupabaseはREST-API経由でも操作できるので、今回は、HTTPモジュールを使って登録します。（多分大差はないです）

  • URLは、SupabaseのProject Settingsで取得した、Project URLの後ろに、/rest/v1/テーブル名
    • 私は、ga_dataというテーブルへInsertしたいので、https://～～～.supabase.co/rest/v1/ga_data
  • Methodは、POST
  • Headersは３つ作ります
    • Name:Content-Type、Value:application/json
    • Name:apikey、Value:Supabaseで取得したAPIキー
    • Name:Autorization、Value:Bearer Supabaseで取得したAPIキー
      • Bearer ～～～APIキー～～～の形
      • apikeyでも使ったAPIキーをもう一度、その前にBearer をつけた形です
  • Body type:Raw
  • Content type:JSON (application/json)
  • Request content
    • この入力欄は、２つ目のIteratorで選択したような画面で、入力中はこんな感じです
      • image.png
      • []の隙間に1とか2とかを入れるのを忘れずに
    • これの入力欄はコピーできて、コピペしたものが↓です
{
  "date": "{{20.dimensionValues[1].value}}",
  "page_path": "{{20.dimensionValues[2].value}}",
  "sessions": "{{20.metricValues[1].value}}",
  "pageviews": "{{20.metricValues[2].value}}",
  "users": "{{20.metricValues[3].value}}"
}

ここまでできたら、左下のRun onceで、全部一気に実行して、Supabaseのテーブルをご確認ください！

image.png
入ってたら成功！:confetti_ball:

おわりに

やることは単純です。完全にノーコード。でもやっぱり、情報処理関係の言葉を知らない非エンジニアには、難しいだろうなとは思います。この記事を見ながらやっても、打ち間違いとかでちょいちょい躓くだろうし、何をやっているのかわからないところもあるだろうと。（私も何か書き忘れたりミスってることもあるかもしれません:pray:）

エンジニア職は、コーディングの量はどんどん減るけども、まだもう少し仕事はあるなと思いました。

でもこれと同じコーディングをしなくちゃいけなくなったとき、できるエンジニアはレアになりそうですね。そんな場面なくなるかもだけど。馬車の運転をする技術が今はいらないように。

さてこのSupabaseのデータは、Bubbleで取り込んでグラフにしてみようかなと思ってます。そうすればスマホで見られる！（GAだってスマホで見られる🙈） ほかの情報とも結合できる応用が利きますよということですね。

自動化とか、システム連携、データのグラフ化とかでお困りの方、お気軽にご相談ください。

ではよきデータ集めライフを！

追記

BubbleのデータへInsertするには API Token が必要で、無償版では使えないことがわかったので、試せませんでした。でも有償のアプリを作るなら、簡単にできそうだというところまでは、たどり着きました。:money_mouth:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?