Shulou(Shulou.com)06/01 Report--

This article focuses on "what are the methods that Web developers use to design UI/UX". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "what are the methods that Web developers use to design UI/UX?"

Google Analytics (Analytics) is currently one of the most popular marketing analysis platforms, not only because its standard version is free. More than 1 million organizations around the world use this platform to better understand user behavior on their websites.

However, for most Web developers, all they need to do to participate in Google Analytics is to install the basic code for the number of views. When using the gtag.js version of the code, the code usually looks like this:

Window.dataLayer = window.dataLayer | | []; function gtag () {dataLayer.push (arguments);} gtag ('js', new Date ()); gtag (' config', 'UA-35169008-1')

Or through analytics.js, the implementation looks like this:

(function) {I ['GoogleAnalyticsObject'] = r [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] M [XSS _ clean] .insertBefore (a send', m)}) (window,document,'script',' https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-XXXXX-Y',' auto'); ga ('send',' pageview')

Although this basic implementation has provided many data points, they end up missing out on other key features. Due to the lack of available data to query, even in some cases, Web developers or designers choose to remove specific features from the site without realizing that most users use the feature on a regular basis.

Therefore, you can take advantage of the following five most important features of Google Analytics to improve the user experience and distinguish 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 only tracks page views. If you want to track actions on your site, such as button clicks or form submissions, you need to trigger a separate Google Analytics event. You can implement these events by adding the following code and the corresponding event category, action, and label information:

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

The abbreviated version of the code can also use the following format:

Ga ('send',' event', 'Event Category',' Event Action', 'Event Label')

Once events are set, they are displayed under the behaviors > events > Hot events report in the Google Analytics UI:

Where can I find hot event reports in Google Analytics?

As a best practice, you can use event categories to group events according to specific features, such as Page interaction, E-commerce. At the same time, you can use the event action to identify the exact action performed by the user (click, scroll, submit the form), and you can use the event tag to get the URL that triggered the event.

In addition, a better way to implement these events is to use the Google tracking code manager instead. Instead of the actual Google Analytics code, you will need to install the Google tracking code manager code:

(function (function) {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), dlactin lancestry F [XSS _ clean] .insertBefore (j _ clean f);}) (window,document,'script','dataLayer','GTM-5PLFVFV')

Then, once you have set up the Google tracking code manager, all you need to do is set up the required Google Analytics page view code and event tags. Simply click the New button to create a new tag, and then click tag configuration, and Google Analytics will be one of the default options available:

Create Google Analytics (analysis) code in the Google tracking Code Manager.

You can then choose between different Google Analytics tag types, including "events" as one of them. After filling in the code configuration details, you only need to set the appropriate trigger to trigger the event. There are already built-in triggers, such as clicks on the Google tracking code manager; you just need to choose an activity that suits you.

Don't forget to test the code in the preview mode of the Google tracking Code Manager, and then click publish when the settings are complete.

Note that you must be careful when tracking the implementation of events through the Google Code Manager or adding the actual code for events through Google Analytics. No matter which implementation you choose throughout the site, it should be the same. You can use the Google tracking code manager completely, or you can hard-code the actual event code.

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

When setting up e-commerce and enhanced e-commerce tracking for Google Analytics, adding events becomes even more important. Although you do need to turn on these settings in the Google Analytics interface, you need to go back to tracking and add separate e-commerce events. These events are necessary to send the complete e-commerce dataset back to the Google Analytics server.

two。 Understand the extent to which the user scrolls down the page using the scroll tracking event

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

In addition, scrolling tracking is easier in the Google tracking code manager using the Scroll depth trigger. All you need to do is create a new trigger, select the scrolling depth trigger type, and fill in the necessary details.

Google tracks the scrolling depth trigger type in the code manager.

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

In this way, if you want to determine whether a specific widget can be placed for a particular type of user, you can use some data to back up your decision. This also eliminates the need to buy separate scrolling tracking software because 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. Finding out how much time they spend on the site is another problem. Fortunately, this can also be measured by Google Analytics.

By default, after installing the Google Analytics comprehensive pageview tag, users can already get a metric called "average". The length of the conversation. It is often understood as this metric, which measures the amount of time users spend each time they visit your site (session).

However, this indicator may sometimes be inaccurate. After all, Google Analytics can actually only measure averages. The session duration is based on the timestamp of the received data (hit).

This also explains why most website visits that pop out-or where there is only one page view or one event-are average. The session duration is 00:00:00.

So how will you resolve this limitation? By triggering a timing hit. These can help accurately calculate the time users spend on the page without recording other views or events. You simply send time matching data by implementing the following code to trigger the code at a specific time interval on your site:

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

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

After implementation, these clicks will be visible in the "behavior" > "site Speed" > "user timing" section of Google Analytics (Analysis).

In addition, because the maximum number of timing matches per day is 10000, you can create custom events that are triggered at specific intervals. Like other regular events, these events will be displayed in the behaviors > events > Hot events section.

However, be careful when setting timing matches: be sure to add some kind of "timeout" to it. In this way, if you just open the page in an unattended browser, these clicks will not continue to trigger, and the data will not be sent to Google Analytics.

4. Find out where the user card or other pain points are on the site.

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

This is where the "behavior flow" report in Google Analytics works. The report, in the form of a flowchart, shows how users arrive at the site and the follow-up views or actions they take before getting off the bus.

The behavior flow report in Google Analytics (Analysis).

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 select events or pages and events.

Google Analytics behavior flow report-View options.

However, there is one thing to note when using the behavior flow report: sampling may occur when viewing data from larger sites, such as sites with millions of views. This sample is set up to help Google Analytics (Analytics) process all data at a specific time.

To minimize sampling, you can adjust the range of dates covered by the behavior flow report to reduce the amount of data that Google Analytics (Analysis) needs to analyze. In addition, you can adjust the granularity of the analysis by clicking the detail level drop-down menu and setting it to Show fewer connections.

Adjust the granularity in the Google Analytics behavior flow report by selecting the detail level option.

If the behavior flow report is not enough, you can also set the Custom report in Google Analytics. To set up, go to Custom > Custom report, and then click the New Custom report button.

Where to access custom reports in Google Analytics (Analysis).

Custom reports can be in three different formats:

Explorer, which looks similar to the default Google Analytics (Analysis) report.

Flat table.

Maps are most suitable for geographical overlay.

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

That is, some dimensions and indicators may appear when they are combined with each other. This may be due to the different scope of these metrics-one metric may be measured at the user level, while another metric may be measured at the session (website access) level. For more information about the scope of Google Analytics, you can check out the "processing" section of this Google Analytics help Center article.

5. Discover the types of user behavior that lead to conversion and which actions do not work

In the final analysis, the customer or your employer is setting up a website to achieve practical goals. This can be varied, such as selling a company's products online (e-commerce), generating registrations for services (potential customer generation), or even simply to promote the company's services (visibility).

This is the real advantage of Google Analytics. By collecting data based on comprehensive page views and different events, you can gain a deeper understanding of the actual behavior of users on your site. In addition, you can isolate specific key actions into transformations on your site by creating targets.

To do this, simply go to Administration > goal, and then click New Target. You can then choose from the template, or you can set custom goals based on the target "overall views of a particular page", events, duration, and even many combined views.

Go to Administration > goals to access the goals in Google Analytics.

Use Google Analytics (analyze) target settings to set up conversion.

Once the goal has been set, you can use Google Analytics subdivision to analyze the actions of users who have obtained the conversion and those who have not. By default, this is available-simply select the "Converter" or "non-Converter" subdivision to apply to your report.

Google Analytics (analysis) subdivision: select the "converter" subdivision.

If you want a more specific breakdown of the transformation, you can click the action option to copy the subdivision and add your own conditions. For example, you can add age, gender, location, or language to further filter based on the characteristics of the audience. You can also create subdivisions based on how users visit your site (source and media), the devices they use, and even a series of actions they do to your site (under "Advanced" > "sequence").

Of course, you can always create subdivisions from scratch in Google Analytics. Just open the subdivision drop-down menu and click the red New Subdivision button to create your own subdivision.

Google Analytics (Analysis) Subdivision-Subdivision option.

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

At this point, I believe that you have a deeper understanding of "what are the methods of Web developers designing UI/UX?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.