Integrate Analytics into your website

Tram Ho

Hello everyone, today I will introduce to you an important function when working with websites. That is integrating the analytics trackings into your website.

Dev, then sooner or later you will have a website for yourself, otherwise, working under a development environment also needs to be used. Further afield, the use of google analytics is definitely needed. ?

Currently I am using Nuxt.js , so I will use and work on this framework to share. If you use other frameworks, it is the same thing. The library / package almost has very clear docs and fully supports the options for you already.

Let’s start.!

1. Create account

The order is as follows:

  • Go to Quản trị viên then select Tạo tài khoản
  • Name your account => Next
  • Set the properties you name the site you want. The URL you will name the domain is your current domain. Remember to choose the https or http protocol accordingly. The URL of the website you also remember that it should be valid. If used locally, avoid extensions such as local, localhost . Usually I would personally leave the .dev extension to make it easy to understand.

Next you just next next few times is okay.

2. Setup and Tracking

After you have created your registration account. Add the ANALYTICS_TRACKING_ID section to nuxt.config.js

For versions of Nuxt.js < 2.9 :

At this point, analytics tracking has data. You can debug the development environment by adding the option:

Also you can see more options in the Vue Analytics document .

3. Get data from analytics

I use Laravel to get information from analytics. But first, you need to enable the analytics API or else 403 errors.

Go to https://console.developers.google.com/apis/dashboard , select project => Click Enable API and Service , then search for Google Analytics Report Api and click Enable.

Setting:

Publish config file:

Next you access the address https://console.developers.google.com/apis/dashboard , select credentials => Click Create Credentials => Service Account Key => Select project that you want and then Create , you will Download a file of the form ten-account-xxxxx.json , rename and place this file in the path of the newly created config file publish. The default will be:

Not yet seen. You need to open the downloaded file, view the client_email line, then add this email with Read and Analyze permission in the User Management View Settings in the new Admin section.

Time to use it. Suppose I want to get page views within 1 month.

There are many options from analytics, you can view or test them directly at Test Query Explore GA .

4. Add metrics and dimensions (Options)

The purpose here is to attach some information when the user accesses the page. Suppose I have a list of articles, and I want to see how many pageview categories each has. When a user views a post, I will enclose the list and its value on GA. To do this you need to add dimensions and mertrics at Admin => Custom Definitions .

About the Scope of dimensions and metrics you can read at Understanding Scope In Google Analytics Reporting . After customizing, you can track by selecting Behavior => Site Content => All Page . Then you select the Secondary Dimension => Custom Dimensions => select the Dimension you just created. Note that if you do not add dimensions, there will be no Custom Dimensions section.

The web side you will attach is as follows:

If you want to send as much information as you want, you just need to create additional dimensions and metrics and post it with the dimensionN , metricN key. With web and android you can also refer here.

This is the client side. On the server you want to retrieve this information, you just need to fix the following:

Remember to keep trying with Test Query Explore GA for sure.

5. Create Custom Report

In the above, I have instructed you to add metrics and dimensions. Now I will create reports as clear and desirable as these metrics and dimensions.

Go to Customization => Custom Reports => Add Custom Report , remember to name your report. For example, I will set it to Category Report , then select the dimensions in the custom dimensions section you created above. The same is with metrics selection. I tried it and got the following result.

Images with suggestive content should be masked ?

Above are some tips I have worked with GA that want to share again with you. Thank you for watching. See you again .!

Share the news now

Source : Viblo