5 ways Google Analytics helps Web developers design UI/UX

By Clara Buenconsejo

Source: SMASHING

Translation: W3Cschool

Have you ever wondered what all these Google Analytics snippets are for, and why does your marketing team regularly ask you to add a new snippet? In this article, we'll cover five features in Google Analytics that help web developers and designers provide a better user experience on their websites.

Google Analytics is one of the most popular marketing analytics platforms today, not least because its standard version is free. More than a million organizations around the world use this platform to better understand user behavior on their sites.

However, for most web developers, their involvement in Google Analytics requires only the basic code to install the traffic. When you use the gtag .js version of the code, the code typically looks like this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-35169008-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());


  gtag('config', 'UA-35169008-1');
</script>

Or the analytics .js implementation looks like this:

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');


ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Although this basic implementation already provides many data points, they end up missing out on other key features. Because of a lack of available data for queries, even in some cases, Web developers or designers choose to remove specific features from their sites without realizing that most users use them regularly.

So you can take advantage of the five most important features of Google Analytics to improve the user experience and differentiate you from other web developers and designers:

1. Use events to identify user interactions on specific parts of the site

As mentioned above, by default, the basic Google Analytics code tracks only page views. I f you want to track actions on your site, such as button clicks or form submissions, you'll need to trigger a separate Google Analytics event. These events can be achieved by adding the following code and the appropriate event categories, actions, and label information:

ga('send', {
  hitType: 'event',
  eventCategory: 'Event Category',
  eventAction: 'Event Action',
  eventLabel: 'Event Label'
});

A short version of the code can also be used in the following format:

ga('send', 'event', 'Event Category', 'Event Action', 'Event Label');

When events are set up, they appear under Behavior > Events > Top Events reports in the Google Analytics UI:

Where to find trending event reports in Google Analytics.

As a best practice, you can use Event Categories to group events based on specific features, such as Page Interaction, E-Commerce. At the same time, you can use event actions to identify exact actions performed by users (click, scroll, submit forms), and you can use event tags to get the URL that triggered the event.

In addition, a better way to implement these events is to switch to Google Tracking Code Manager. Instead of the actual Google Analytics code, you'll need to install the Google Tracking Code Manager code:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5PLFVFV');</script>
<!-- End Google Tag Manager -->

Then, once you've set up Google Tracking Code Manager, all you need to do is set up the Google Analytics page view code and event tags that you need. Simply click the New button to create a new label, and then click Label Configuration, and Google Analytics will be one of the default options available:

Create Google Analytics code in Google Tracking Code Manager.

You can then choose between different Types Of Google AnalyticS TagS, Including EventS, As One Of Them. O nce you have filled in the code configuration details, you can trigger the event simply by setting the appropriate trigger. You already have built-in triggers, such as clicks on Google Tracking Code Manager;

Don't forget to test the code in preview mode of Google Tracking Code Manager, and then click Publish when the setup is complete.

Note that be careful when implementing events through Google Tracking Code Manager or adding actual code for events through Google Analytics. T hroughout the site, whichever implementation you choose should be the same. You can use Google Tracking Code Manager entirely, or you can hardcode the actual event code.

Otherwise, you may end up tracking the same site operations twice - once by adding event code and once through Google Tracking Code Manager - and recording duplicate data in Google Analytics.

Adding events becomes even more important when setting up e-commerce and enhanced e-commerce tracking for Google Analytics. A lthough you do need to open these settings in the Google Analytics interface, you do need to go back to tracking and add separate e-commerce events. These events are required to send the complete e-commerce dataset back to the Google Analytics server.

2. Understand the extent to which users scroll down the page using scrolling tracking events

In addition to tracking clicks and form submissions, events in Google Analytics can also be used for scrolling tracking. T his can be done by adding Google Analytics event code to trigger when a specific element appears in the viewport. You can also set the code to fire when the user scrolls down a specific percentage on the screen.

In addition, in Google Tracking Code Manager, scrolling tracking is easier with the Scroll Depth trigger. All you need to do is create a new trigger, select the Scroll Depth trigger type, and fill in the necessary details.

The Type Of Scroll Depth Trigger In Google Tracking Code Manager.

So how does this feature help you with the user experience? F or beginners, this can obviously help you determine which part of the page the user is willing to scroll down. Because the data is located in Google Analytics, you can segment the data by device or browser, time of day, location, and so on.

This way, if you want to determine whether you can place specific widgets for a particular type of user, you can use some data to back up your decision. This also eliminates the need to purchase separate scrolling software, as you only need a little time to implement this feature.

3. Estimate how much time they actually spend on your site

It's one thing to know where people roll. F inding out how much time they spend on the site is another question. Fortunately, this can also be measured by Google Analytics.

By default, users can already get an indicator called "average" when the Google Analytics comprehensive view tag is installed. T he duration of the session. This metric is often understood as a measure of how long it takes a user to visit your site (session).

However, the indicator may sometimes be inaccurate. A fter all, Google Analytics can actually measure averages. Session duration is based on the timestamp of the data received (hit).

This also explains why most jumps out - or site visits with only one view or event - have an average. The session duration is 00:00:00.

So how will you address this limitation? B y triggering a timed hit. T hese can help accurately calculate how long users spend on the page without recording additional views or events. You simply send time matching data by implementing the following code to trigger code at specific intervals on your site:

ga('send', 'timing', [timingCategory], [timingVar], [timingValue], [timingLabel], [fieldsObject]);

For a detailed description of each field, visit the Google Developers website.

Once implemented, these clicks will be visible in Google Analytics' Behavior > Website Speed > User Timing section.

In addition, because the daily limit for timing matches is 10,000, you can create a custom event that is triggered at specific intervals. As with other regular events, these events are displayed in the Behaviors > Events > Hot Events sections.

However, be careful when setting a timing match: make sure you add some kind of "timeout" to it. This way, if you just open the page on an unattended browser, these clicks won't continue to trigger and the data won't be sent to Google Analytics.

4. Find out where the user's card is on the site or other pain points

Once you've implemented event and time matching on Google Analytics, you'll see them in different parts of the platform. However, this presents a new challenge: how do you combine these different data points into a report to show the user's entire journey on the site?

That's where the Behavior Flow report in Google Analytics works. The report, shown as a flowchart, shows how users get to the site and the follow-up views or actions they take before getting off the bus.

Behavioral Flow reports in Google Analytics.

By default, the Behavior Flow report uses the login page and the specific page that the user group wants to access.

You can also change the Behavior Flow report to focus more on events. Simply click the drop-down menu below the report title, and then select Events or Pages and Events.

Google Analytics Behavioral Flow Report - View options.

However, it is important to note when using the Behavior Flow report that sampling can occur when viewing data for larger sites, such as having millions of views. This sample was set up to help Google Analytics process all data at a specific time.

To minimize sampling, you can adjust the date range covered by the Behavior Flow report to reduce the amount of data that Google Analytics needs to analyze. In addition, you can adjust the granularity of your analysis by clicking the Level of Detail drop-down menu and setting it to Show fewer connections.

Adjust the granularity of your Google Analytics behavior flow report by selecting the Level of Detail option.

If the Behavior Flow report isn't enough, you can also set up Custom Reports in Google Analytics. To set it up, go to Custom > Custom Reports, and then click the New Custom Report button.

Where to access custom reports in Google Analytics.

Custom reports can be in three different formats:

• Explorer, which looks similar to the default Google Analytics report.
• The flat table.
• Maps, best suited for geographic overlays.

You can also adjust settings to filter based on specific metrics using exact matches or regular expressions.

That is, some dimensions and indicators may appear when combined with each other. T his may be because these metrics have different ranges - one metric may be measured at the user level and the other metric may be measured at the session (site visit) level. For more information about the scope of Google Analytics, you can view the Processing section of this Google Analytics Help Center article.

5. Discover the types of user behavior that are causing the conversion and what actions are not working

Ultimately, the customer or your employer is building a website to achieve tangible goals. This can be diverse, such as selling a company's products online (e-commerce), generating registrations for services (lead generation), or even simply promoting the company's services (visibility).

That's what Google Analytics really has. B y collecting data based on aggregated views and different events, you can gain a deeper understanding of what users actually do on your site. In addition, you can isolate specific critical actions as conversions on your site by creating goals.

To do this, simply go to the management > goal and click the new target. You can then choose from the template, or you can set custom targets based on the target's "comprehensive views for a particular page," events, duration, and even many comprehensive views.

Go to Manage > goals to access goals in Google Analytics.

Use Google Analytics target settings to set conversions.

Once you've set your goals, you can use Google Analytics segmentation to analyze what people who get a conversion and those who don't. By default, this is available - simply select the Converter or Non-Converter segment to apply to your report.

Google Analytics segment: Select the Converter segment.

If you want a more specific breakdown of your conversions, you can click action options to copy the segments and add your own criteria. F or example, you can add age, gender, location, or language to further filter based on demographics. You can also create segments based on how users visit your site (sources and media), the devices they use, and even a series of actions they take to your site (under Advanced > Sequence).

Of course, you can always create segments from scratch in Google Analytics. Simply open the segment drop-down menu and click the red New Segment button to create your own segment.

Google Analytics Segmentation- Segmentation Options.

With all these free features, Google Analytics is truly one of the most powerful tools any Web developer or designer can use. H owever, adding these features to your site is just the tip of the iceberg. There are many other features to explore, such as Protocol Measurement, which allows Google Analytics to collect data from IoT devices.

To learn more about Google Analytics, check out Google's official resources below:

• Google Developers-Google Analytics documents
• Analytics Help - Google Support
• Google Analytics Academy

Finally, before implementing Google Analytics, be sure to double-check your region's data privacy regulations to avoid any unexpected violations. For more information about ensuring compliance with these rules, check out the Google Support article.

Google Analytics is undoubtedly one of the best UI/UX design tools on the market by balancing end user data privacy with the need to collect data for actionable insights.