Re:dashとGoogle Analyticsの連携及びデータ取得

# はじめに
この記事は ミライトデザイン Advent Calendar 2022 の ６日目の記事となっています。

昨日は[ブッチ](https://qiita.com/bucchi0426)さんの[CSS flexとgridの使い分け](https://zenn.dev/t_kitamura/articles/cbecc45853a959)でした！
gridは使ったことがなかったので勉強になりました！
今後使っていきたいですね。


先日、Re:dashとGoogle Analyticsを連携し、
MySQLのデータとGoogle Analyticsのデータを結合してして出力する、ということを行なったのですが、
調べても情報がさほど多くなく苦労したので一連の流れを残しておきたいと思います。

# Re:dash ・ Google Analyticsについて
とはいえまずは、Re:dashって何？
Google Analyticsってどんなの？
という状態だったので最初に簡単に説明した後にデータ取得方法について記述します。

### ■Re:dashとは
読み方は、リダッシュ、です。
ゼロ円で導入・利用ができる高品質なBIツール

目的に合わせてダッシュボードを作成することができ、37種類以上のデータベースと連携ができる
SQL、NoSQL、ビッグ データ、および API データ ソースをサポートしているようです。

今回は「MySQL、Google Analytics」を使用してデータベースからデータを取得しています。
詳細は以下を参考に（英語です）

https://redash.io/

### ■Google Analyticsとは
Googleが提供する無料のアクセス解析ツール。
Webサイトを訪問したユーザーの属性や訪問したページ、成果の達成率、広告効果や反響調査などを分析できます。

https://developers.google.com/analytics

### 【重要】
>※2023年7月1 日以降、標準のユニバーサル アナリティクス プロパティでデータが処理されなくなります。
新しいデータは Google アナリティクス 4 プロパティにのみ送信されます。

とのことで、「Google Analytics 4」への移行が済んでいない方は移行が必要です。
まだの方は認識をしておきましょう。
Google Analytics 4 って何？と言う方は以下記事を読むとイメージが湧くかなと思います。

https://www.sakurasaku-labo.jp/blogs/google-analytics-4

# Re:dashとGoogle Analyticsの連携及びデータ取得
■今回大まかには以下の流れです。
a） Re:dashとGoogle Analyticsを連携する
b） Google Analyticsからデータを取得する
c） MySQLデータベースからデータを取得する
d） 「b」と「c」　のデータ＝テーブルをJOINしてデータを取得する

※ここではあくまでデータ取得するための操作について記載しています。
作成するクエリの詳細までは記載していませんので、取得するデータに応じて作成してください。

### 前提として「Data Source」を知っておく必要があります。
簡単に言うと接続先DBのことです。
MySQLやNoSQL, Big Data、Google Analyticsなど。
取得するデータごとに切り替えます。

## a) Re:dashとGoogle Analyticsを連携する
まずはこれをやらないと始まりません。

Re:dash上でGoogle Analyticsからデータを取得するために行います。
（Re:dashは使用している前提です）

Re:dash画面を開き左サイドバーの「Settings」→「New Data Source」の順にクリック→「Google Analytics」を選択

【Re:dash】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/908989ce-4573-2419-0dc4-536cae118755.png)

任意のNameを入力、JSON Key FileをアップロードすればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/bf253102-68e6-2baf-72c3-955050329eb4.png)
※「JSON Key File」の取得方法についてはRe:dashの[ドキュメント](https://redash.io/help/data-sources/querying/google-analytics)を参照ください。
（業務都合上自身では取得できなかったため取得方法についてはここでは記載していません）

## b） Google Analyticsからデータを取得する
ここが一番苦労しました。
「SELECT * FROM〜」ってよくあるクエリを書くのかなと思っていたところ、Google Analyticsのデータ取得用のクエリを書く必要があるみたい。
Re:dashの[ドキュメント](https://redash.io/help/data-sources/querying/google-analytics)を見ると`JSON document-style queries`とありますのでJSON形式ですね。

面倒くさそう？って思いますが、
「[UA Query Explorer](https://ga-dev-tools.web.app/query-explorer/)」というツールで作成すれば項目を選択するだけで自動生成してくれます。
便利ですね。

「UA Query Explorer」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/47d3bd72-2aa8-0797-4ca9-48de81e7e787.png)
「Select View（Google Analyticsの取得したいデータ）」の以下の項目はGoogle Analytics上で確認できます。
- account＝アナリティクスアカウント
- property＝プロパティとアプリ
- view＝すべてのウェブサイトのデータ
事前に対象のGoogle Analyticsの画面を開いておきましょう。

【Google Analytics】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/3fd3895f-f91e-85d1-0370-ea48b13219ad.png)

サイドバーの「Queries」→「New Query」を押下
【Re:dash】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/4bc537ad-ad44-678a-6ba9-bf67dc117dec.png)

クエリ作成画面。
Data Sourceは自身で作成したGoogle Analyticsを選択し、UA Query Explorerで作成したクエリを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f2d382c6-da52-7727-13d8-ab21aedc96ce.png)


作成したクエリは以下のような感じです。
```
{
    "ids": "ga:{{ Google AnalyticsのViewID }}",
    "metrics": "ga:uniquePageviews",
    "start_date": "2022-01-01",
    "end_date": "2022-12-31",
    "dimensions": "ga:pagePath",
    "max_results": 20000,
    "filters": "ga:pagePath=~^/xxxx/[0-9]+/$,ga:pagePath=~^/xxxx/[0-9]+/yyyy/$,ga:pagePath=~^/xxxx/[0-9]+/yyyy/zzzz/$"
}
```

■各項目の説明
- ids
データの取得に使用される一意のID
Google Analyticsで確認したい「すべてのウェブサイトデータ」IDを確認する

- metrics（データの数値的な指標）：今回はページ別訪問数
「ページ別訪問数」「ページビュー数」など取得したい指標のこと
以下が参考になるかなと思います。
[ページ別訪問数とは？](https://blog.siteanatomy.com/unique-pageviews/)

- start_date
データ取得の開始日

- end_date
データ取得の終了日

- dimensions
データの属性・データの分析軸のこと
セッション、新規セッション率、新規ユーザー、直帰率、ページ／セッション、平均セッション時間など取得したい項目を設定する。
上記の「pagePath」はページにアクセスしたセッション数を取得しています。
Re:dashのドキュメントを見ると種類については以下の記事が参考になります。

https://ummmummm.hatenablog.com/entry/2016/07/14/Google%E3%82%A2%E3%83%8A%E3%83%AA%E3%83%86%E3%82%A3%E3%82%AF%E3%82%B9%E3%81%AEAPI%E6%97%A5%E6%9C%AC%E8%AA%9E%E5%AF%BE%E5%BF%9C%E8%A1%A8%E3%83%BB%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7

- max_results
データ取得件数：取得したデータ数によって変更

- filters
データ取得条件。
SQLで言うところの「where句」にあたる部分です。
正規表現で条件を指定します。
[アナリティクスのヘルプ](https://support.google.com/analytics/answer/1034324?hl=ja∂)に使用できる正規表現が載っていますので取得した条件を指定しましょう。

【取得結果画面】
クエリで指定した「ga:pagePath」、「ga:uniquePageviews」を取得できます。
（結果データはマスクしています）

【Re:dash】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/70e9ccbb-a82f-61c8-f737-6f1f243205a2.png)


## c） MySQLデータベースからデータを取得する
これは通常のクエリを書くだけなので詳しくは記載しません。
Data SourceはMySQLデータベースを選択します。

【Re:dash】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/2c47950b-fb6a-7820-09e7-dc0316d2c6b9.png)


【記載例】
```
SELECT
	カラム名
FROM
    テーブル名
;
```

## d） 「b」と「c」　のデータ＝テーブルをJOINしてデータを取得する
「 b, c 」　で取得したデータはそれぞれ一つのテーブルとして扱うことができます。

まずは、Data Sourceで「Query Results」を追加する必要があります。
（既に追加してある場合は不要です）

Google AnalyticsのData Sourceの追加と同様に、「Settings」→「New Data Source」 押下
し「Query Results」を選択します。

【Re:dash】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/f50338fc-dcdd-517e-e9b0-8fc8247130db.png)
Nameを入力後に押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/09d0d153-8012-38d4-59fc-35c6f03aecb6.png)
Data Sourceに「Query Results」が追加されました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/73dad89a-e724-c100-c06e-582180d84524.png)
次にクエリを作成します。
左のバーのQueries→「New Query」→query_resultを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/3b6391d6-a320-811d-3783-70bd1914af42.png)

※ここでいくつか注意点があります。
- 使えるDBはSQLite
漠然とMySQL構文で書くんだろうと思っていましたが、Re:dashのドキュメントを見ると、
`The QRDS accepts SQLite query syntax:`とあったので注意しましょう。
 
- 使用するテーブル名は「query_数字」となる
b） ,c）でクエリを作成した画面を再度開いてURLを確認し、末尾の「queries/●●●」の●●●の部分です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/abb08d48-63fd-25e0-c5b5-0d8b10b3872a.png)
URL部分拡大
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/360742/0ff4b913-9eec-7895-6c7c-1f216ef60493.png)

仮にb)、c）で作成したクエリ画面を開いた時のURLの末尾がそれぞれ、「queries/100」「queries/200」だとしたらここで使用するテーブル名は
- Google Analytics：query_100
- MySQL：query_200

となります。
ただし数字だとクエリ作成中に何のテーブルだっけ？ってなるので、
実際にクエリを作成する際はテーブル名に「別名」をつけるとわかりやすいかもしれないですね。

- カラム名について
b）で取得した際は「ga:pagePath」、「ga:uniquePageviews」という名称でしたが、
クエリ作成で使う際は「ga_pagePath」、「ga_uniquePageviews」として使うことができます。

【作成クエリのイメージ】
取得するデータによるので詳しくは記載しませんが、テーブル名やカラム名が少し違うだけで、
MySQL等の通常のクエリ作成と同じイメージを持ってもらえるといいかなと思います。
```
SELECT
    analytics.ga_pagePath,
    analytics.ga:uniquePageviews,
    mysql.name,
    ・・・,
FROM
    query_100 AS analytics
LEFT JOIN 
    query_200 AS mysql
ON
    analytics.id = mysql.id
```

【参考】
[Querying Existing Query Results](https://redash.io/help/user-guide/querying/query-results-data-source)

# さいごに
Re:dashとGoogle Analyticsを連携→データ取得に関して、
そこまで情報が多くなかったので今回はデータの取得に時間がかかりましたが、
次回以降は時間短縮できそうです
（クエリの作成がスムーズにいけば...）

Google Analytics4への移行でまた対応が変わるかもしれないので、
また機会があれば追記・修正していきたいです。

さて、次回の記事は、今月もう3回目の登場となる[takuma](https://qiita.com/tkek321)さんの「yum」についての記事です。
yumって言葉は聞いたことはあるけれど何ぞや？という感じなので楽しみです！