7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ミライトデザインAdvent Calendar 2022

Day 6

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

Last updated at Posted at 2022-12-06

はじめに

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

昨日はブッチさんのCSS flexとgridの使い分けでした!
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」を使用してデータベースからデータを取得しています。
詳細は以下を参考に(英語です)

■Google Analyticsとは

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

【重要】

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

とのことで、「Google Analytics 4」への移行が済んでいない方は移行が必要です。
まだの方は認識をしておきましょう。
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

任意のNameを入力、JSON Key FileをアップロードすればOKです。
image.png
※「JSON Key File」の取得方法についてはRe:dashのドキュメントを参照ください。
(業務都合上自身では取得できなかったため取得方法についてはここでは記載していません)

b) Google Analyticsからデータを取得する

ここが一番苦労しました。
「SELECT * FROM〜」ってよくあるクエリを書くのかなと思っていたところ、Google Analyticsのデータ取得用のクエリを書く必要があるみたい。
Re:dashのドキュメントを見るとJSON document-style queriesとありますのでJSON形式ですね。

面倒くさそう?って思いますが、
UA Query Explorer」というツールで作成すれば項目を選択するだけで自動生成してくれます。
便利ですね。

「UA Query Explorer」
image.png
「Select View(Google Analyticsの取得したいデータ)」の以下の項目はGoogle Analytics上で確認できます。

  • account=アナリティクスアカウント
  • property=プロパティとアプリ
  • view=すべてのウェブサイトのデータ
    事前に対象のGoogle Analyticsの画面を開いておきましょう。

【Google Analytics】
image.png

サイドバーの「Queries」→「New Query」を押下
【Re:dash】
image.png

クエリ作成画面。
Data Sourceは自身で作成したGoogle Analyticsを選択し、UA Query Explorerで作成したクエリを入力します。
image.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(データの数値的な指標):今回はページ別訪問数
    「ページ別訪問数」「ページビュー数」など取得したい指標のこと
    以下が参考になるかなと思います。
    ページ別訪問数とは?

  • start_date
    データ取得の開始日

  • end_date
    データ取得の終了日

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

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

  • filters
    データ取得条件。
    SQLで言うところの「where句」にあたる部分です。
    正規表現で条件を指定します。
    アナリティクスのヘルプに使用できる正規表現が載っていますので取得した条件を指定しましょう。

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

【Re:dash】
image.png

c) MySQLデータベースからデータを取得する

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

【Re:dash】
image.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
Nameを入力後に押下
image.png
Data Sourceに「Query Results」が追加されました
image.png
次にクエリを作成します。
左のバーのQueries→「New Query」→query_resultを選択します。
image.png

※ここでいくつか注意点があります。

  • 使えるDBはSQLite
    漠然とMySQL構文で書くんだろうと思っていましたが、Re:dashのドキュメントを見ると、
    The QRDS accepts SQLite query syntax:とあったので注意しましょう。

  • 使用するテーブル名は「query_数字」となる
    b) ,c)でクエリを作成した画面を再度開いてURLを確認し、末尾の「queries/●●●」の●●●の部分です。
    image.png
    URL部分拡大
    image.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

さいごに

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

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

さて、次回の記事は、今月もう3回目の登場となるtakumaさんの「yum」についての記事です。
yumって言葉は聞いたことはあるけれど何ぞや?という感じなので楽しみです!

7
3
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
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?