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 selectTạ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
1 2 3 4 5 6 7 | buildModules <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'@nuxtjs/google-analytics'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> googleAnalytics <span class="token punctuation">:</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token string">'UA-12301-2'</span> <span class="token punctuation">}</span> |
For versions of Nuxt.js < 2.9 :
1 2 3 4 | modules <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'@nuxtjs/google-analytics'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token string">'ANALYTICS_TRACKING_ID'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> |
At this point, analytics tracking has data. You can debug the development environment by adding the option:
1 2 3 4 5 6 7 8 | <span class="token punctuation">[</span> <span class="token string">'@nuxtjs/google-analytics'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> id <span class="token punctuation">:</span> <span class="token string">'ANALYTICS_TRACKING_ID'</span> <span class="token punctuation">,</span> debug <span class="token punctuation">:</span> <span class="token punctuation">{</span> enabled <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">,</span> sendHitTask <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> |
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:
1 2 | composer <span class="token keyword">require</span> spatie <span class="token operator">/</span> laravel <span class="token operator">-</span> analytics |
Publish config file:
1 2 | php artisan vendor <span class="token punctuation">:</span> publish <span class="token operator">--</span> provider <span class="token operator">=</span> <span class="token double-quoted-string string">"SpatieAnalyticsAnalyticsServiceProvider"</span> |
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:
1 2 | <span class="token function">storage_path</span> <span class="token punctuation">(</span> <span class="token single-quoted-string string">'app/analytics/service-account-credentials.json'</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">use</span> <span class="token package">Spatie Analytics Analytics</span> <span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Spatie Analytics Period</span> <span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Carbon</span> <span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">__construct</span> <span class="token punctuation">(</span> Analytics <span class="token variable">$analytics</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">analytics</span> <span class="token operator">=</span> <span class="token variable">$analytics</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// code</span> <span class="token variable">$period</span> <span class="token operator">=</span> Period <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">create</span> <span class="token punctuation">(</span> Carbon <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">now</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">subMonth</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> Carbon <span class="token punctuation">:</span> <span class="token punctuation">:</span> <span class="token function">now</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token variable">$data</span> <span class="token operator">=</span> <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">analytics</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">performQuery</span> <span class="token punctuation">(</span> <span class="token variable">$period</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'ga:pageviews'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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:
1 2 3 4 5 6 7 8 | <span class="token keyword">this</span> <span class="token punctuation">.</span> $ga <span class="token punctuation">.</span> <span class="token function">page</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> title <span class="token punctuation">:</span> title <span class="token punctuation">,</span> page <span class="token punctuation">:</span> url <span class="token punctuation">,</span> location <span class="token punctuation">:</span> window <span class="token punctuation">.</span> location <span class="token punctuation">.</span> href <span class="token punctuation">,</span> dimension1 <span class="token punctuation">:</span> <span class="token string">'category'</span> <span class="token punctuation">,</span> metric1 <span class="token punctuation">:</span> value <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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:
1 2 3 4 5 6 | <span class="token variable">$this</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token property">analytics</span> <span class="token operator">-</span> <span class="token operator">></span> <span class="token function">performQuery</span> <span class="token punctuation">(</span> <span class="token variable">$period</span> <span class="token punctuation">,</span> <span class="token single-quoted-string string">'ga:metric1'</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'dimensions'</span> <span class="token operator">=</span> <span class="token operator">></span> <span class="token single-quoted-string string">'ga:dimension1'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
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 .!