Skip to main content

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

Please click on [Admin] -> [Property] -> [Data Streams] from the Google Analytics management screen.
You will be able to see the detailed view of the data stream, so please copy the Tracking ID.

Image 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)

You will see the API library, so please find and enable "Google Analytics API", "Google Analytics Data API" and "Google Analytics Admin API".

note

If you are integrating with GA4, there is no need to enable "Google Analytics Reporting API."

Image (fetched from Gyazo)

Image from Gyazo

Image 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 app" for the "Application type".
  • For the "Authorized redirect URIs", enter the one which you can find on Kuroco's Google Analytics.

Image (fetched from Gyazo) 5. Confirm GoogleClientID and GoogleClientSecret
Click on the pencil icon to view the client ID created in the authentication credentials.
Image (fetched from Gyazo)

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 from Gyazo

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

Image 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 from Gyazo

caution

Regarding the ProfileID displayed in Kuroco:
Depending on the settings of Google Analytics and Google Cloud Platform, you may see options for both Google Analytics 4 properties and Universal Analytics properties. Please note that Universal Analytics is no longer available, so please select the Google Analytics 4 property.

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.

info

In this document, there is a sample of directly specifying the GA4/GTM tracking ID in the nuxt.config.js file. However, in practice, it is desirable to define it in environment-specific env files and load it from there.

not using GTM

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

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: "G-XXXXXXX",
debug: false
},
caution

Replace G-XXXXXXX with your own tracking ID.

Using GTM

Install @nuxtjs/gtm

Install the Google Analytics module '@nuxtjs/gtm' for your project. Execute the following:

npm install --save @nuxtjs/gtm

Add the module to nuxt.config.js

Configure Google Analytics settings in nuxt.config.js by adding the following:

modules: [
'@nuxtjs/gtm'
],
gtm: {
id: 'GTM-XXXXXXXX',
pageTracking: true,
send_page_view: false,
},
info

Setting send_page_view to false will prevent the page_view event from being sent on the first page load, and only the nuxtRoute event will be sent. If you use nuxt-link for page transitions and want to convert the nuxtRoute event to a page_view event using GTM for GA tracking, set this option to avoid double tracking for nuxtRoute and page_view events.

Configuring GTM

Set up "Google Analytics GA4 Settings" and "nuxtRoute Tag" in GTM to trigger the page_view event.

Image from Gyazo

Google Analytics GA4 Settings

If you want to measure only the page_view event in Nuxt, do not check the box above, and instead configure the nuxtRoute event to trigger the "page_view" event.

Checking "Send a page view event when this configuration is loaded" will send the page_view event to GA when this configuration is loaded.

Image from Gyazo

Trigger
Image from Gyazo

Tag
Image from Gyazo

Confirm the connection on Google Analytics

Access Google's admin page and confirm that the access information is fetched properly.

[Reports] -> [Realtime] Image (fetched from Gyazo)

[Engagement] -> [Events] Image (fetched from Gyazo)

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 from Gyazo

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


Support

If you have any other questions, please contact us or check out Our Slack Community.