Google Analytics連携方法

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

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

Google Analytics アカウントの作成

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

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

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

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

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

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

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

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

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

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

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

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

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

Google Analyticsにて接続を確認する

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

Image (fetched from Gyazo)

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

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

Image from Gyazo

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

Image from Gyazo

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

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