Install Google Analytics on your website

Tuesday, 21/09/2021

Tram Ho

Statistics and analysis of user information is very necessary to manage and develop the website as well as the products and services that the website provides. For this purpose, Google Analytics (GA) is a powerful, efficient service that is also quick and easy to set up. Google Analytics helps developers reduce a lot of effort to record and display system statistics.

Install Google Analytics

To use Google Analytics for your website, you need to sign up for an account GA here, then follow these steps

Create data stream

Data stream is the flow of customer data from endpoint (web, app…) to GA. When you create a data stream, GA generates a piece of code that you add to your app or website to collect data.

If your system is cross-platform, you should create one data stream for each platform (for example, one data stream for Android apps, one data stream for iOS apps, and another for apps). Web).

To create a new data stream, do the following:

Into the Admin, choose Setup Assistant

Choose Tag installation

Choose Add stream and the stream type that corresponds to your product platform

Fill in the necessary information depending on the platform to create a data stream

Add tracking code to website

After the data stream has been created, GA will provide one of each stream Measurement ID individual. This ID helps identify your data stream when sending to GA.

After having Measurement ID, you can add GA to website by adding tag <header> paragraph gtag.js the following script:

<span class="token comment">&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;</span>
<span class="token tag"><span class="token punctuation">&lt;</span>script <span class="token attr-name">async</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.googletagmanager.com/gtag/js?id=Your_Measurement_ID<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  window<span class="token punctuation">.</span>dataLayer <span class="token operator">=</span> window<span class="token punctuation">.</span>dataLayer <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">function</span> <span class="token function">gtag</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>dataLayer<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
  <span class="token function">gtag</span><span class="token punctuation">(</span><span class="token string">'js'</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token function">gtag</span><span class="token punctuation">(</span><span class="token string">'config'</span><span class="token punctuation">,</span> 'Your_Measurement_ID<span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'Your_Measurement_ID);

</script>

After successfully adding, you will see some requests to send data to google-analytics.com/g/collect to collect data. Initially, GA will take a while to collect data to be able to generate statistics for users.

Get started with Google Analytics

overview

At the tab Report snapshot, you can see some overview information of your system. You can filter data by time period; compare data between time periods; or add various comparison information according to the attributes of the user, device, session…

Acquisition

Information in the tab Acquisition helps you determine where your visitors are coming from. This information is important in determining the effectiveness of the marketing strategies you use for the system.

Some of the information captured by Google Analytics are:

Medium

This is information about the means by which users access your website. Some of the main means include:

None: Users access your website directly from the address bar or via browser bookmarks.
Referral: Users access the website through a link from another website such as Facebook, Instagram…
Organic: Users access the website through free search engines, for example: Google search, Bing, Baidu…
CPC: Users access the website through advertising, search engines are paid by you

Source

Source is more specific information about where to bring users to your website. organic then the source can be google, bing, bailu… or direct with medium being none.

Campaign

Campaign is the name of the Google Ads campaign or custom campaign you’ve created for your website.

You can see detailed information by medium, source or campaign in the table below the chart. You can see information about the interaction rate, interaction time … of users introduced through the medium. From there, you can evaluate the effectiveness as well as develop a marketing strategy that is suitable for the website.

In addition to the default information, you can completely customize other information for this table.

Engagement

Tab Engagement contains information about users’ activities and interactions through the collection of event activated while the user is using your website.

By default, GA automatically collects us the necessary events on the website such as page_view, user_engagement,… From event hey, we can see the number of views, interactions,… in each section of the site

Alternatively, you can create and activate your own event arbitrary through the library provided by GA. If using gtag.js, you can use function gtag("event", "EventName", payload) to trigger the event to GA:

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.orderContact'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">gtag</span><span class="token punctuation">(</span><span class="token string">"event"</span><span class="token punctuation">,</span> <span class="token string">"NhanNutLienHe"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'Nút đặt hàng'</span><span class="token punctuation">,</span>
        from_url<span class="token operator">:</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>pathname<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    location<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">'/#contact'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

$('.orderContact').on('click', function (e) {

gtag("event", "NhanNutLienHe", {

type: 'Nút đặt hàng',

from_url: window.location.pathname,

});

location.replace('/#contact')

})

For important events, you can mark them as conversion in Configure > Events

Making events marked as conversions will appear in the tab Engagement > Conversions for easy tracking.

Retention

Tab retention displays information about the number of old and new users as well as the retention rate – the percentage of old users who return to use the site. This information helps you to monitor and make reasonable plans to attract users to continue to use the website.

Demographics

Information of user groups – geographical area, age, gender, interests… will be shown in the tab demographics. This information is extremely important in determining the target group of customers interested in, suitable for the service and product you provide.

Conclude

In this article, I showed you how to install and introduce some basic components of Google Analytics. Thank you for reading my post and don’t forget to upvote if you find it useful

Share the news now