メインコンテンツまでスキップ

Google Analytics連携方法

KurocoではGoogle OAuth2.0認証情報を利用してGoogle Analyticsとの接続ができます。
このチュートリアルでは、Kuroco管理画面での接続作業の方法と、接続に必要なGoogleClientID, GoogleClientSecret の取得の流れ、フロントエンドの設定方法を説明します。

注意

Google側の仕様の変更により、本チュートリアルと異なる箇所がある場合もございます。詳細はGoogleで最新情報をご確認ください。

Google Analytics アカウントの作成

まずはGoogle Analyticsにて、アカウントの作成、プロパティの作成をお願いいたします。

KurocoとGoogle Analytics連携のためにトラッキングIDが必要となります。

トラッキングIDの確認方法

Google Analyticsの管理画面より[管理] -> [プロパティ] -> [データストリーム]をクリックします。 データストリームの詳細画面が確認できるので、トラッキングIDをコピーしてください。 Image (fetched from Gyazo)

Google OAuth 2.0 Client IDを発行する

KurocoとGoogleアカウントを接続するのに必要なGoogle OAuth 2.0 Client IDの発行の流れについて説明します。
(既にクライアントIDとクライアントシークレットの準備ができている場合はGoogle AnalyticsとKurocoを連携するへ進み、KurocoとGoogleアカウントを接続してください。)

1. Google Cloud Platform にプロジェクトを作成する
Google Cloud Platform にアクセスし、[プロジェクトを作成]をクリックします。

Image (fetched from Gyazo) 新しいプロジェクトの作成画面になりますので、プロジェクト名を入力して、[作成]をクリックします。

Image (fetched from Gyazo) 2. Analytics API を ON にする
プロジェクトのダッシュボードから[APIとサービスの有効化]をクリックします。

Image (fetched from Gyazo) APIライブラリが表示されますので「Google Analytics API」「Google Analytics Data API」「Google Analytics Admin API」を探して有効にします。

注記

GA4と連携する場合には「Google Analytics Reporting API」は有効にする必要はありません

Image (fetched from Gyazo)

Image (fetched from Gyazo)

Image (fetched from Gyazo)

3. OAuth 同意画面を作成する
Google Cloud Platform に戻り、[OAuth同意画面]をクリックします。

Image (fetched from Gyazo) User Typeを選択して[作成]をクリックします。

Image (fetched from Gyazo) 必要情報を入力し、OAuth同意画面を作成します。 Image (fetched from Gyazo) 4. OAuth クライアント ID を作成する
ダッシュボードから、[認証情報]をクリックします。

Image (fetched from Gyazo) [認証情報を作成] -> [OAuth クライアントID]をクリックします。

Image (fetched from Gyazo) OAuth クライアントIDの作成画面が表示されるので、内容を入力し、[作成]をクリックします。

Image (fetched from Gyazo)

  • アプリケーションの種類はウェブアプリケーションを選択します。
  • 認証済みのリダイレクトURIはKuroco管理画面のGoogle Analyticsのページで確認ができます。

Image (fetched from Gyazo) 5. GoogleClientID, GoogleClientSecret を確認する
認証情報に作成したクライアントIDが表示されるので鉛筆マークをクリックします。

Image (fetched from Gyazo) クライアントIDとクライアントシークレットを確認します。

Image (fetched from Gyazo)

Google AnalyticsとKurocoを連携する

1. Google Analytics設定画面にアクセスする
Kuroco管理画面へアクセスし、[外部システム連携] -> [Google Analytics]をクリックします。

Image (fetched from Gyazo) 2. Googleアカウントに接続する
GoogleクライアントIDとGoogleクライアントシークレットを入力して、[接続する]をクリックします。

 Image from Gyazo

Googleのサイトへ遷移しますので、Goolge Analyticsのアカウントと同じユーザーでログインします。

Image (fetched from Gyazo) OAuth 同意画面が表示されるので、[許可]をクリックして認証し ます。
Image (fetched from Gyazo) 認証が通るとKurocoの画面に戻るので再度ログインをします。

Image (fetched from Gyazo) 3. ProfileIDを設定する
Googleアカウントの認証が通るとProfileIDの選択ができるようになりますので、任意のProfileIDを選択して[更新する]をクリックします。

Image from Gyazo

注意

Kurocoで表示されるProfileIDについて
GoogleAnalytics、及びGoogle Clooud Platformの設定によってはGoogle Analytics 4のプロパティとUniversal Analyticsのプロパティが選択肢に表示されます。
Universal Analyticsは利用出来なくなっていますので、Google Analytics 4のプロパティを選択して下さい。

以上で、Google Analyticsとの連携は完了です。

フロントエンドでGoogle Analyticsの設定をする

最後に、フロントエンドでGoogle Analyticsの設定をします。
今回はNuxt.jsでの設定方法を説明します。

備考

このドキュメントではGA4/GTMのトラッキングIDをnuxt.config.jsに直接記載するサンプルになっていますが、
実際には環境毎のenvファイルによって定義し、それを読み込むやり方が望ましいです。

GTMを利用しない場合

@nuxtjs/google-gtagをインストールする

プロジェクトにGoogle Analytics用のモジュール @nuxtjs/google-gtag をインストールします。
下記実行します。

npm install --save @nuxtjs/google-gtag

nuxt.config.jsにモジュール追加

nuxt.config.jsにGoogle Analyticsの設定をします。
nuxt.config.jsを開き、下記追記します。

nuxt.config.js
  modules: [
'@nuxtjs/google-gtag'
],
'google-gtag': {
id: "G-XXXXXXX",
debug: false
},
注意

G-XXXXXXXには、ご自身のトラッキング IDを入力してください。

GTMを利用する場合

@nuxtjs/gtmをインストールする

プロジェクトにGoogle Analytics用のモジュール @nuxtjs/gtm をインストールします。
下記実行します。

npm install --save @nuxtjs/gtm

nuxt.config.jsにモジュール追加

nuxt.config.jsにGoogle Analyticsの設定をします。
nuxt.config.jsを開き、下記追記します。

nuxt.config.js
  modules: [
'@nuxtjs/gtm'
],
gtm: {
id: 'GTM-XXXXXXXX',
pageTracking: true,
send_page_view: false,
},
備考

send_page_viewをfalseにすると初回のページ読み込み時に、page_viewイベントは送信されず、nuxtRouteイベントのみが送信されます。
ページ遷移時にnuxt-linkを使用し、GTMを利用してnuxtRouteイベントをpage_viewイベントに変換してGA計測する場合、
nuxtRouteイベントとpage_viweイベントで2重計測しないようにする際に設定して下さい。

GTMの設定を行う

GTMに「Google Analytics GA4設定」、及び「nuxtRouteタグ」のpage_viewイベント発行設定を行う Image from Gyazo

Google Analytics GA4設定

Nuxtでpage_viewイベントだけを計測したいのであれば上記にチェックを入れずnuxtRouteイベントで「page_view」イベントを飛ばす形で設定する

「この設定が読み込まれるときにページビューイベントを送信する」にチェックを入れると 該当の設定が読み込まれたときにpage_viewのイベントがGA側に送られる

Image from Gyazo

nuxtRouteイベント設定(nuxt-linkによるページ遷移でGA側にpage_viewイベントを発火する)

トリガー Image from Gyazo

タグ Image from Gyazo

Google Analyticsにて接続を確認する

サイトにアクセスし、Google Analyticsを確認すると無事アクセス情報が取得されています。

[レポート][リアルタイム] Image (fetched from Gyazo)

[エンゲージメント][イベント] Image (fetched from Gyazo)

Kuroco管理画面にてアクセスを確認する

Kuroco管理画面にアクセスし、[外部システム連携] -> [Google Analytics]をクリックします。

Image from Gyazo

すると、アクセス情報が取得されています。

Image from Gyazo

以上でKurocoとGoogle Analytics連携方法の説明を終わります。


サポート

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。