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をコピーしてください。

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 にアクセスし、[プロジェクトを作成]をクリックします。

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

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

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

注記

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

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

User Typeを選択して[作成]をクリックします。

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

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

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

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

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

クライアントIDとクライアントシークレットを確認します。

Google AnalyticsとKurocoを連携する

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

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

　

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

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

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

注意

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イベント発行設定を行う

Google Analytics GA4設定

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

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

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

トリガー

タグ

Google Analyticsにて接続を確認する

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

[レポート]→[リアルタイム]

[エンゲージメント]→[イベント]

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

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

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

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