Google Analytics連携方法

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

Google Analytics アカウントの作成

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

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

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

Google Analyticsの管理画面より[管理] -> [トラッキング情報] -> [トラッキングコード]をクリックします。

トラッキング情報画面が確認できるので、トラッキングIDをコピーしてください。

注意) Kurocoで表示されるProfileIDについて

Kurocoで設定できるProfileIDはユニバーサル アナリティクス プロパティになっており、Google アナリティクス 4 プロパティは表示がされません。
ProfileIDが表示されない場合はGoogle Analyticsでプロパティの種類をご確認ください。

ユニバーサル アナリティクス プロパティはGoogle Analyticsでプロパティの作成時に[詳細オプションを表示]をクリックし、ユニバーサル アナリティクス プロパティの作成の横のバーを有効にすると作成ができます。

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」を探して有効にします。

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を選択して[更新する]をクリックします。

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

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

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

@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を開き、下記追記します。

modules: [
    '@nuxtjs/google-gtag'
  ],
  'google-gtag': {
    id: 'UA-XXXX-X',
  },

Google Analyticsにて接続を確認する

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

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

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

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

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