How to link Google Analytics

You can link Kuroco with Google Analytics using Google OAuth2.0 authentication information.
This tutorial explains how to set up the connection from Kuroco's management screen, obtain GoogleClientID and GoogleClientSecret required for the connection, and set up the front-end.

Note: There may be some outdated details on this tutorial due to specification changes by Google. Kindly refer to Google for the latest information.

Create Google Analytics account

First, create your account and properties on Google Analytics.

Tracking ID is required in order to link Kuroco and Google Analytics.

How to check the tracking ID

On Google Analytics' admin page, click [Admin] -> [Tracking info] -> [Tracking code].
Image (fetched from Gyazo)

Copy the displayed tracking ID.
Image (fetched from Gyazo)

Note: Regarding the ProfileID shown on Kuroco

The ProfileID that can be set in Kuroco is a universal analytics property, and the Google Analytics 4 properties are not displayed.
If you don't see your Profile ID, check the property type in Google Analytics.

You can create a universal analytics property by clicking [Show advanced options] when creating the property in Google Analytics then enabling the toggle next to "Creating a universal analytics property". Image (fetched from Gyazo) Image (fetched from Gyazo)

Issue Google OAuth 2.0 Client ID

This section shows how to issue the Google OAuth 2.0 Client ID which is required to link Kuroco and Google account.
(If you already have client ID and client secret, skip this section and go to the next step Link Kuroco with Google Analytics to connect Kuroco and Google account.)

1. Create a project on Google Cloud Platform
Access Google Cloud Platform and click [Create project]. Image (fetched from Gyazo)

Enter a project name and click [Create]. Image (fetched from Gyazo)

2. Enable Analytics API
Click [APIs & Services] on the side menu. Image (fetched from Gyazo)

Click [ENABLE APIS AND SERVICES]. Image (fetched from Gyazo)

Search for "Google Analytics API" and enable it. Image (fetched from Gyazo)

3. Create OAuth consent screen
Go to "APIs & Services" page again and click [OAuth consent screen] on the side menu.
Image (fetched from Gyazo)

Select User Type and click [Create].
Image (fetched from Gyazo)

Enter the required information and create an OAuth consent screen.
Image (fetched from Gyazo)

4. Create OAuth client ID
Click [Credentials] on the side menu of APIs & Services page.
Image (fetched from Gyazo)

Click [CREATE CREDENTIALS] -> [OAuth client ID]. Image (fetched from Gyazo)

Enter the required information on the OAuth client ID creating page and click [CREATE].
Image (fetched from Gyazo)

  • Select "Web application" for the "Application type".
  • For the "Authorized redirect URIs", enter the one which you can find on Kuroco's Google Analytics page.

Image (fetched from Gyazo)

5. Confirm GoogleClientID and GoogleClientSecret

Confirm the client ID and Client Secret. Image (fetched from Gyazo)

1. Access Kuroco's Google Analytics setting page
Access the Kuroco management page and click [External system cooperation] -> [Google Analytics] on the side menu.
Image (fetched from Gyazo)

2. Connect to Google account
Enter the GoogleClientID and GoogleClientSecret and click [Connect].
Image (fetched from Gyazo)

You'll be taken to Google's login screen, so log in with the same account previously used on Google Analytics. Image (fetched from Gyazo)

Click [Allow] on the OAuth consent screen.
Image (fetched from Gyazo)

Once successfully authenticated, you will be returned to the Kuroco screen and you can log in again. Image (fetched from Gyazo)

3. ProfileID setting
You can select the Profile ID after the Google account is authenticated successfully. Select the ProfileID and click [Update]. Image (fetched from Gyazo)

The integration with Google Analytics is now complete.

Set up Google Analytics on the front-end

At last, let's set up Google Analytics on the front-end.
In this tutorial, we use Nuxt.js to set it up.

1. Install @nuxtjs/google-gtag
Install in your project @nuxtjs/google-gtag which is the module for Google Analytics.
Execute the following:

npm install --save @nuxtjs/google-gtag

2. Add module to nuxt.config.js
Let's configure Google Analytics in nuxt.config.js.
Open nuxt.config.js and add the following:

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

Note: Replace UA-XXXX-X with your own tracking ID.

3. Confirm the connection on Google Analytics
Access Google's admin page and confirm that the access information is fetched properly.
Image (fetched from Gyazo)

4. Confirm the access information on Kuroco management page
Access Kuroco's management page and click [External system cooperation] -> [Google Analytics] on the side menu.
Image (fetched from Gyazo)

You can see that the access information is fetched properly.
Image (fetched from Gyazo)