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

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

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

https://supabase.com/

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

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

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

https://www.make.com/en


# 超概要

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



# 作業手順

## 1. Supabaseの受け側の設定
プロジェクトは作ってある前提で始めます。

### 1-1. テーブルを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/5c525cb0-0977-fe28-8d31-e0a697ffcf44.png)
Table Editorから、「New table」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/6384a1dc-3898-a209-b7b7-942cc1028fdb.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/0dd6b2bd-eb2e-90d5-e52e-a16060d1e04f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/6bc7ad9e-e4b6-4ddf-750c-7b19dc84ba27.png)
テーブルのデータ一覧（まだ空だけど）の上にある、Add RLS policyをクリックし、画面遷移先でテーブル名の右の方にあるCreate policyをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/ed5c7c28-2534-1702-cba5-d6ed757fb834.png)
Policy Nameを、`Allow Insert for All`（任意でよいです）
Policy Commandで、INSERT
下のクエリの中かっこの中に`true`と書きます。
そしてSave policyボタンを押す。

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


### 1-3. APIキーを取得
ポリシーの設定画面は終わって、左のアイコンの並びの下の方の歯車、Project Settingsへ移ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/e694f214-c3cd-0ab8-d27a-23c808e1b19b.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/99ca29cd-66b9-1051-049c-789d3b62ba2f.png)


### 2-1. Google Analytics 4のモジュールを追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/7afd3e4e-4497-477f-7a2a-376f5a608158.png)
Google Analytics 4というモジュールのうち、Make an API Callという処理を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/89a98ab6-0fc3-8a57-68d1-e3d77cd3cfd3.png)
Creating a connectionから、名前とプロパティID。

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

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

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

https://developers.google.com/analytics/devguides/reporting/data/v1/rest/v1beta/properties/runReport

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3c3b3477-195b-1523-d258-c7dabb07ae4d.png)
モジュール設定画面では、Base URLは、
`https://analyticsdata.googleapis.com/v1beta/`
URLは、
`/properties/123456789:runReport`
です。123456789はプロパティIDに置き換えて。
Methodは、`POST`
Bodyは、下記
```json
{
  "dateRanges": [
    {
      "startDate": "yesterday",
      "endDate": "yesterday"
    }
  ],
  "dimensions": [
    {"name": "date"},
    {"name": "pagePath"}
  ],
  "metrics": [
    {"name": "sessions"},
    {"name": "screenPageViews"},
    {"name": "totalUsers"}
  ]
}
```

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/719a159f-cd5a-8e84-aa9c-978b6616ae4a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d5ccb67c-381e-2185-9a52-8a720c022806.png)
右上に「１」と出て、１件の処理が正常終了したとわかります。そこをクリックすると、Input（＝設定値）とOutput（＝処理結果）が見られます。

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/97bff196-d75c-3b41-c736-0f187875ccb9.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/dd53bd2d-615c-1afd-edec-43f401b312d8.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/97740a6d-b73c-0108-f3cf-d44975ab5d0f.png)
        - `[]`の隙間に`1`とか`2`とかを入れるのを忘れずに
    - これの入力欄はコピーできて、コピペしたものが↓です
```json
{
  "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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/d4f9fa9d-3f09-dc85-f420-e79c25cb952f.png)
入ってたら成功！:confetti_ball:

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

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

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

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

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

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

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