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 to link Kuroco and Google Analytics.

How to check the tracking ID

On Google Analytics' admin page, click [Admin] -> [Tracking info] -> [Tracking code].
Copy the displayed tracking ID.

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".

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]. Enter a project name and click [Create]. 2. Enable Analytics API
Click [APIs & Services] on the side menu. Click [ENABLE APIS AND SERVICES]. Search for "Google Analytics API" and enable it. 3. Create OAuth consent screen
Go to "APIs & Services" page again and click [OAuth consent screen] on the side menu.
Select User Type and click [Create].
Enter the required information and create an OAuth consent screen.
4. Create OAuth client ID
Click [Credentials] on the side menu of APIs & Services page.
Click [CREATE CREDENTIALS] -> [OAuth client ID]. Enter the required information on the OAuth client ID creating page and click [CREATE].
- Select "Web app" for the "Application type".

• For the "Authorized redirect URIs", enter the one which you can find on Kuroco's Google Analytics page.5. Confirm GoogleClientID and GoogleClientSecret

Confirm the client ID and Client Secret.

Link Kuroco with Google Analytics

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

2. Connect to Google account
Enter the GoogleClientID and GoogleClientSecret and click [Connect].

You'll be taken to Google's login screen, so log in with the same account previously used on Google Analytics. Click [Allow] on the OAuth consent screen.
Once successfully authenticated, you will be returned to the Kuroco screen and you can log in again. 3. ProfileID setting
You can select the Profile ID after the Google account is authenticated successfully. Select the ProfileID and click [Update].

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:

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.
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.

You can see that the access information is fetched properly.