### Click
Click heatmaps show where your visitors click or tap. The more often they click somewhere, the hotter the area. When they click, but not too often, the area appears as cold.

We aggregate clicks and taps into a single heatmap to give you an overall insight into user behavior. When you switch device type to desktop or mobile, you’ll get a map specifically for clicks (desktop) or taps (mobile).

Click heatmaps show you whether visitors click the links or buttons. When you look at a click heatmap, you can confront your expectations with reality. You can check if your calls to action get enough attention.

![HM_2-700x468.jpeg](https://content.cux.io/uploads/HM_2_700x468_6e6d1f1eb1.jpeg)

### Rage click
Rage click shows where people click numerous times and get no computer response. In effect, they experience something that’s referred to as computer rage — the state of anger and angered actions directed against computers.

In brief, rage clicks are records of user frustration.

In summary, rage clicks show:

1. Design imperfections
2. Implementation errors or bugs


Rage clicks are never a good sign. When you ignore them, you risk increasing customer churn. When you note rage clicks in the visits, use them to prioritize future design and development work. Use this as your chance to turn observations into actionable items.
![HM_3-250x155.jpeg](https://content.cux.io/uploads/HM_3_250x155_1532db2572.jpeg)

To understand why it’s essential to hunt for rage clicks, see What is a rage click?

### Link
Do you want to know which links and subpages on your website are the most frequently clicked by users? Check the “Link” event in the Heatmap tab.

Why should you track links?

- Learn which links are the most popular (and therefore which content is most interesting for users).
- Check what your customers are looking for and need most often.
- Learn about unnecessary links that do not generate traffic.
- Collect insights for redesigning the website or improving the user experience of the website/product.
- When comparing link maps with heatmaps for clicks, you will check the so-called “missed opportunities”.

![Linkmap-700x450.png](https://content.cux.io/uploads/Linkmap_700x450_d49741de31.png)

Remember! The percentage you see on the links is the percentage of clicks in the context of all clicks on a given page!

### Move
Move heatmaps show where visitors have moved their mouse on the screen. What you observe as a single line in a visit recording here is aggregated for all visitors to your site. The areas where visitors move their mouse pointer most often are marked as hot. The page areas where users move their cursor less often is colder. In other words, move heatmap shows how often visitors move their mouse to a specific area.

This type of heatmap can be useful if you want to track scrolling. You don’t need a dedicated map for scrolls. Our move heatmap will show you if people have seen a specific fragment of the page because we record mouse movements. So, if you see a mouse movement at the bottom of a long page, this means people scroll this page.

Move heatmaps help you identify if your page structure is logical for the users. There is a high correlation between mouse movement and eye movement. So, you can assume that where the mouse pointer goes, people are looking as well.

Use this type of heatmap also to identify areas of the page where it’s worthwhile to put important information like announcements or advertisements.

### Devices and resolutions
Is your page mobile friendly? Does it work well on a tablet or a TV? How about the wearable devices? The aggregated view of clicks, taps, and other interactions will let you find the answer to your questions.

Desktop, mobile, tablet, smart TV, gaming console, wearable devices, embedded browsers – CUX allows you to verify how people interact with your pages on each type of these devices. When you display a heatmap for a single page or a grouped heatmap, you can switch the device type and see, for example, how mobile and desktop visitor behaviors differ.

![HM_4-250x344.png](https://content.cux.io/uploads/HM_4_250x344_b515405dcb.png)

Note that we may not be ready to show you heatmaps for some types of devices when there are not enough visits from a specific kind of gear.
[Types of heatmap events and parameters](https://www.youtube.com/watch?v=jTJU0Ee7tQY&ab_channel=CUXio)


Types of heatmap events and parameters

- The trial version has no functional limitations. The trail contains ALL functionalities of our tool available on paid subscription. It allows you to observe how the collected data sample affects the Experience Metrics.  You’ll alsoe see your users’ frustration and your conversion level.
- Our trial has no expiration date – the determinant here is the number of recordings. As part of the CUX free trial you’ll gain access to 1 000 visit recordings. You can collect them at your convenience



<u>After collecting data from 1000 visits, you need to select a subscription to be able to continuously monitor user behavior❗</u>

- CUX can be attached to any website as long as it is possible to paste our code into the website code or to the Google Tag Manager.

What are the limitations of trial version?

✅ **YES.** For all projects with the total number of live recordings below 10k.

❎ **NOT REALLY**. For projects with more than 10k recordings:

- dashboard regenerates every night,
- the recordings list is refreshed in about 15 minutes,
- goal conversion is recalculated hourly,
- goal edition/creation is calculated immediately (real-time).


What’s more: CUX is capable of retroactive analysis which means we collect data **ALL THE TIME**.


For example, you can check the user’s path, waterfall or goal from historical data – we’re able to show you data in different contexts from the moment you’ve put our code on your page (unlike, for example, GA, which displays results only from the moment you set up the goal, without going back in the data).

Is CUX collecting data in real time?

Yes, of course! To identify users by special ID you can use a method in your application’s code to send custom parameters to CUX. When you’ll do that, a new icon will appear on the CUX visits list.

```
_cux.send(‘identity’, [‘example@email.com’, params]);
```

 
_where “params” might be a string, for example “John Doe”, or object where you can pass any properties and values for more detailed segmentation, for example “{ name: ‘John Doe’, email: ‘demo@cux.io’, plan: ‘Trial’ }”_

This code with custom parameter will enable you to find visits with matching identify, when you’ll be going through data filters. 

Can I identify users by setting special user ID?

**Retention is the period for which your data is available at CUX**. This means that if the package you selected has 1 month of retention, both heatmaps, funnels and recordings will be available only from this period, and all older ones will be deleted.

By default, you can choose in our pricing 5 retention models:

- 2 weeks,
- 1 month,
- 3 months,
- 6 months,
- 1 year.


If you need a custom package, no problem! Just drop us a line, and we’ll prepare an account with features and parameters you actually need.

What is retention (in pricing)?

At CUX, we conduct retroactive analysis. It means that we collect data all the time, and you can go through it at your convince. We are able to show you your Customers’ Journeys or Conversion Waterfalls ever since you’ve added our code to your website.


### Why is this groundbreaking?
For example, you can check the Customer Journey, Waterfall or Goal from historical data. We’re able to show you the data in different contexts from the very moment you’ve implemented our code into the page. Unlike, for example, Google Analytics, which displays the results only from the moment of setting the goal, without going back in the data.

>_Explore the value of [retroactive analysis](https://cux.io/blog/retroactive-analysis-hidden-gems-in-your-historical-data/) in our latest blog post. Discover why it's worth delving into this insightful approach._

What is a retroactive analysis?

The answer is very simple: **there is no minimum**!


We have had websites with 1,500 page views, and we were able to collect valuable conclusions from them, just like from pages with 12 million views.

What is the minimum number of page views for the implementation of CUX to make sense?

- The Goal gives you an overview for all the paths/journeys the user can take to match the Goal.

- In Waterfall, you’ll get specific, detailed, step-by-step data for some important parts of this journey. For example for some registration form or checkout.

Why set up Waterfalls if we have already set up Goals?

- To integrate our tool with your store, you need to add the CUX code to the website code – exactly the same as with Google Analytics.

- If you use Google Tag Manager, you can also use this integration option. See, Enable Google Tag Manager integration.

How to integrate CUX with a store based on Shoper or Shopify?

Of course! E-commerce, SaaS, internal systems, marketing pages, landing pages, B2B – any points and industries where the customer comes into contact with your digital product can benefit from analytics.
Also, we have a special offer for advertising, marketing, creative agencies, freelancers and software houses – **Partner Accounts**.


### Partner’s benefits:
- out-of-charge online consultation (onboarding),
- one hour per month of technical expert consultation and Q&A,
- agency account (unlimited client accounts managed by one),
- free multiple customer/project testing,
- dedicated technical support,
- personalized pricing with several clients,
- enable client users to see and manage their data,
- different levels of access to the account granted to users,
- control over customer projects (alerting system),
- billing system adapted to individual needs (possibility of introducing various settlement entities)


Want to be our Partner?
Contact [Marta](mailto:marta@cux.io) 

Is CUX also applicable in industries other than e-commerce?

Yes, it is possible to create a heatmap for different variants of the A/B test page.

### To be able to do this, you need to:
1. Log into [CUX](https://app.cux.io/login/).
2. Go to Heatmaps.
3. Click Open Filter.
4. Define in test URLs which tags define the versions.
5. Filter all entries.
6. Click the “Grouped heatmap” button.

Can CUX create separate heatmaps for two versions when conducting A/B testing?

You can hide some page elements from the CUX script. When you do this, the hidden part is ignored and not shown in visit recordings or heatmaps. This is useful when you want to make sure sensitive data provided by your visitors is never recorded. You can hide static and dynamic (loaded by Ajax loader) page elements.

### Modify HTML
To hide an element from CUX, you need to modify your page HTML code. You can add the class “cux-exclude” to any HTML element. When the CUX script finds an element containing the exclude class, it replaces it with an empty DIV element. The styles for the hidden elements are retained. Thanks to this, the page rendered in CUX player or heatmaps won’t be destroyed.

Note that the operation of the CUX script affects only the data that goes to our database. The masking operation is transparent to your visitors. They can use and see all the elements freely.

It’s good to consider the elements you want to hide carefully.

How to hide page elements from CUX

If you’d like to inform visitors to your site that you use CUX to record them, you need to update your privacy policy or terms of use. To help you with this task, we’ve prepared a snippet of text that you can use as an inspiration.

Please note that in each case, you need to adjust this text to match your service and current legal regulations concerning data privacy. The text provided on this page isn’t a piece of legal advice, and we don’t offer legal consulting. Please consult a lawyer to proceed with the final version for your site.

### English
We use the cux.io tool provided by CUX Research Sp. z o.o. We do this based on our legitimate interest in creating website usage statistics and analyzing them to optimize our websites.

cux.io records users of our site and allows us to play a video of their actions on our site, as well as to generate the so-called heatmaps. cux.io does not provide us with any information that enables us to identify you. Your data is encrypted at the browser level and is not sent to cux.io servers.

The information we collect with cux.io include:

1. Information about the operating system and web browser you are using,
2. Time spent on our website and its pages,
3. The pages you view on our site,
4. Transitions between individual pages of our website,
5. Source from which you come to our website,
6. Places where you click on our pages.


To use the listed data, we implemented the monitoring cux.io code in the source code of our website. It uses cookies from the cux.io tool. You can disable the cux.io tracking code by disabling cookies on our site.

To learn more about the data processing policy of cux.io verify their privacy policy at [https://cux.io/legal/privacy-policy/](https://cux.io/legal/privacy-policy/).

### Polish / Polski
Korzystamy z narzędzia cux.io dostarczanego przez CUX Research Sp. z o.o, ul Robotnicza 42A, 53-608 Wrocław wpisanej do KRS 0000792391. Działania w tym zakresie realizujemy, opierając się na naszym prawnie uzasadnionym interesie, polegającym na tworzeniu statystyk i ich analizie w celu optymalizacji naszych stron internetowych.

cux.io rejestruje użytkowników naszej strony i umożliwia odtworzenie nagrania wideo z jego ruchu na naszej stronie, jak również wygenerowania tzw. map cieplnych. cux.io nie udostępnia nam żadnych informacji, które pozwalają na Twoją identyfikację, ponieważ Twoje dane są szyfrowane na poziomie przeglądarki i nie są wysyłane do serwerów cux.io.

Informacje, do jakich mamy dostęp w ramach cux.io to, w szczególności:

1. informacje o systemie operacyjnym i przeglądarce internetowej, z której korzystasz,
2. czas spędzony w naszym serwisie oraz na jego podstronach, podstrony, jakie przeglądasz w ramach naszego serwisu,
3. przejścia pomiędzy poszczególnymi podstronami w ramach naszego serwisu,
4. źródło, z którego przechodzisz do naszego serwisu,
5. miejsca, w które klikasz myszką na naszych stronach.


W celu korzystania z powyższych danych, zaimplementowaliśmy w kodzie źródłowym naszej strony monitorujacy kod cux.io. Wykorzystuje on pliki cookies narzędzia cux.io. Z poziomu naszej strony, z wykorzystaniem mechanizmu służącego do zarządzania plikami cookies, możesz wyłączyć kod śledzący cux.io.

Jeżeli chcesz dowiedzieć się więcej na temat polityki przetwarzania danych przez cux.io, zachęcamy do spojrzenia na politykę prywatności cux.io [https://cux.io/legal/privacy-policy/](https://cux.io/legal/privacy-policy/)

Sample privacy policy section on your service and CUX

### Goal in brief
1. A configured Goal groups all data relevant to your conversion.
2. The Goals purpose is to pre-filter the data by your analytical goals.
3. You can use one of the predefined Goals or create your own, custom path.
4. The Goal contains data showing only users’ journeys that completed the conversion.
5. Number of Goals for your project is unlimited.
6. You do not need developers to add goals – we’re automatically capturing events on your website.
7. Goal dashboard shows number of visits that reached the Goal, Experience Metrics related to those visit, users’ journeys, activity and devices.

### Goal in detail
The Goal is the ratio of the number of recordings that meet your primary purpose (conversion) to all visits’ recordings. In other – simpler – words, Goals are here to tell CUX’s scripts what is important to your project. They translate your business into code understandable to the tool and define how it is to interpret your data.

![KB_goals-700x347.png](https://content.cux.io/uploads/KB_goals_700x347_643af99597.png)

Imagine: your consumers’ buying intent is high, but the conversion rate still leaves a great deal to be desired. In such a situation – requiring an answer not to the questions “how much?” but “why?” – the correct Goals setting will work wonders.

Goals let you measure only what matters for your business by focusing on the most important data insights in the goal context. The types of goals can be different – we’re focusing not only on sales, but also intentions to sell, abandoned carts, user registrations, subscriptions to newsletters, going through specific categories on the website, form fill-outs or specific paths to be overcome. Thanks to properly configured Goal you’ll be able to track clicks, scrolls, page loads, activities related to form filling or traffic from referrals.

What’s even cooler: we’ll alert you about your goal rate changes and all you’ll have to do would be to see what happened, implement the quick wins, sit back and watch your conversion increasing.

### How to set the main Goal?
In CUX, you can set any number of goals depending on your needs, but on the dashboard, we will display the results for visits reaching your main goal. To set a goal as your primary Goal:

1. Go to Goals
2. Mark a star next to the Goal you want to see on the dashboard immediately after logging in.

![Screenshot-2021-06-23-at-09.55.39-700x277.png](https://content.cux.io/uploads/Screenshot_2021_06_23_at_09_55_39_700x277_0d2745688c.png)

What is a Goal?

### 👉 Traffic tracking
Traffic tracking events help you use visitor activity related to web pages or navigation. They include events like page loading or tracking navigation origin (referrer).

[Waterfall and Goal events: Traffic tracking](https://www.youtube.com/watch?v=GKVJ3VIaG7o&ab_channel=CUXio)

### Page load
Use page loads to track when someone loads a page – visits a specific URL. Several page loads can be used for complex conversion tracking when users need to visit several pages before they reach a conversion goal.


Remember to enter a relative URL here! You can type in only a part of the address, usually a page name like cart.php or product.html.


Just because we wanted to make your life even easier, we’ve added some handy shortcuts to define a part of the page address:


- **Contains (regexp)** – You can use a regular expression to match a page name. This is useful when you want to record page loads whose URLs can vary depending on the use case, for example, the page name gets appended to different parameters.


<u>If you type “product”, we’ll track visits with URL</u>


✅ “/product.html”, “/product-1.html”, “/shoe-product.html”, “/product-promo.html” etc.

- **Starts with** – Type the beginning of the page address to see possible options.


<u>If you type “/product”, we’ll track visits with URL</u>

✅ “/product.html”, “/product-1.html”, “/product-promo.html”

❌ NOT “/shoe-product.html”

- **Ends with** – Type in the ending part of the page address to see the possible options.


<u>If you type “product.html”, we’ll track visits with URL</u>

✅ “/product.html”, “/shoe-product.html”

❌ NOT “product-1.html”, “product-promo.html”


- **Matches** – Type in the exact part of the page address you want to track.


<u>If you type “/product.html”, we’ll only track visits with URL</u>

✅ “/product.html”

❌ NOT “/product-1.html”, “/product-promo.html”, “/shoe-product.html”

![KB_pageload-700x329.png](https://content.cux.io/uploads/KB_pageload_700x329_99fda0922c.png)


#### Referrer
A problem-solver when it comes to tracking visitors coming to you from a specific, external addresses. Very useful while observing users popping on your site from social media or search engines. The value you need to enter here is the source address. Type in the entire URL or part of it.

Such nice fellows we are, here are dedicated shortcuts that will allow you to work with page names or their parts instead of complete URLs.

- **Contains (regexp)** – User regular expression to cover parts of the referrer address.
- **Starts with** – Type the beginning of the referrer address.
- **Ends with** – Type the ending of the referrer address.
- **Matches** – Type in the full URL of the referrer.


#### 👉 Pointer
Pointer events are related to direct user actions on your page – whether it’s a click on a specific element or a page scroll.

[Waterfall and Goal events: Pointer](https://www.youtube.com/watch?v=3FDbOTdYq-k&ab_channel=CUXio)

#### Click
Click event allows you to base a step on specific elements that users click while navigating your pages like buttons, links, images, etc. You’ll need to enter the XPath of the element that receives clicks!

#### Scroll
The scroll event allows you to track users who vertically scrolled your website by a specific number of pixels. You can define the preferred scroll height in pixels to mark user action who gets to a particular area of the page, for example, below the fold.

![KB_scroll-700x317.png](https://content.cux.io/uploads/KB_scroll_700x317_68f9ab7c18.png)

**NOTE:** the pixels used in the Goal are calculated by the visitor browser. You need to verify these numbers by displaying the page using various screen resolutions. This is especially important if the code of your page uses relative units of measure like em or rem!

#### 👉 Form
Those events help you follow visitor actions in form fields. These actions include putting the mouse cursor in the field, moving out of the field, or form submission.

[Waterfall and Goal events: Form](https://www.youtube.com/watch?v=rVMmbkbEmJo&ab_channel=CUXio)

You’ll need to enter the XPath to indicate a specific form element.

![Screenshot-2021-01-13-at-09.03.05-700x124.png](https://content.cux.io/uploads/Screenshot_2021_01_13_at_09_03_05_700x124_01010ed3a7.png)

- Focus in. When users click or tab into a form field. The event is recorded regardless of the input device people use to navigate through your form – whether they use a mouse, keyboard, or other tools is not essential, as the primary thing here is the focus on the field.
- Changed. Whether someone edits a form, enters new data, or changes the field content. All typing, deleting, and overwriting match this event.
- Focus out. The event when someone moves the pointer out of a form field. You’ll see users stop typing in a field and moving forward.
- Submit. When someone clicks the submit button, and data entered in the form is sent to your server. The Submit event is more reliable than Click because it is based on the actual event of submitting the form and not just clicking a button.


**NOTE:** Submit may not work if you have opt-ins or Captcha to click. To be sure that the form was successfully submitted, add one more step – tracking the page-load of the form submission confirmation page.

#### 👉 Reverse this step (Negation)
[Waterfall and Goal events: Negation](https://www.youtube.com/watch?v=5m0bcYeybpM&ab_channel=CUXio)

Negation in the case of events means that CUX will select for you all the visits that did NOT meet the given Goal. For example, if you select an even “Click the “buy” button” and check the “Reverse this step (Negation)” box, you will only see the visits’ recordings where users did not fulfil the Goal (did not click the button).

![Screenshot-2021-01-13-at-10.23.47-700x271.png](https://content.cux.io/uploads/Screenshot_2021_01_13_at_10_23_47_700x271_a6d99c2a1f.png)

Goal events

CUX lets you either create your own custom Goal or use one of the predefined examples. Remember that the number of Goals for one project is unlimited, and they do not have to be related to each other.

By using the predefined Goals, you’ll only get directions on how to guide your path. Following the prompts, you will still have to name your goal, add its internal description (optional) and modify the steps so that they’ll match your project – add xPath or referral page, set appropriate form fields, etc.

![Screenshot-2021-01-13-at-09.08.41-700x503.png](https://content.cux.io/uploads/Screenshot_2021_01_13_at_09_08_41_700x503_0666438399.png)

### Predefined Goals in CUX:
#### 👉 Purchase intention
Lets you follow all visits with consumers’ willingness to buy a given product at a specific time or in a specific situation. This shows that developing purchase intentions makes a consumer more likely to go through with the actual purchase. Also is a great way to track abandoned carts.

#### 👉 Purchase
Shows you all the visits which ended up with the purchase – for example when users reached the Thank You Page.

#### 👉 Traffic from social media
You’ll be able to track all the visitors coming to your site from social media. You’ll have to enter here the source address. Remember to type in the relative URL.

#### 👉 Paid traffic
Not a penny spend on your ads will go unnoticed – see all the traffic and users’ behavior on your site coming from the paid campaigns. You’ll have to enter here the source address. Remember to type in the relative URL.

#### 👉 Create an account
Lets you track all the users’ visits that ended up in creating an account. A default event here is a click on “Sign up” button, but you can freely modify the steps to suit your project. Remember that when you’re choosing a click as an event to follow you’ll have to enter the XPath of the element that receives clicks.

#### 👉 Start trial intention
You’ll be able to track all the user’s with intention to start a trial at your website. A default event here is a click on “Sign up” button, but you can freely modify the steps to suit your project. Remember that when you’re choosing a click as an event to follow you’ll have to enter the XPath of the element that receives clicks.

#### 👉 Buy subscription intention
See users’ visits that indicated an intent to buy your subscription. A default event here is a click on “Pay” button, but you can freely modify the steps to suit your project. Remember that when you’re choosing a click as an event to follow you’ll have to enter the XPath of the element that receives clicks.

#### 👉 Buy subscription
See users’ visits that showed not only an intention to buy your subscription but also fulfilled their desire (e.g. ended up on a Thank You Page). A default event here is a click on “Pay” button, but you can freely modify the steps to suit your project. Remember that when you’re choosing a click as an event to follow you’ll have to enter the XPath of the element that receives clicks.

#### 👉 Send contact form
Perfect if your conversion goal is set up a fulfilled contact form. A default event here is a click on “Send” button, but you can freely modify the steps to suit your project. Remember that when you’re choosing a click as an event to follow you’ll have to enter the XPath of the element that receives clicks.

#### 👉 Custom
CUX lets you create your own custom Goals with as many steps and events as your project needs. See how to create a custom Goal step-by-step.


Predefined Goals

If you’re looking for a more general description of what is CUX Goal, see What is a Goal?

### To create a Goal in CUX:
1. Go to the [Goals page](https://app.cux.io/goals).
2. Click Add New Goal. This starts the Goal creation process.
3. Begin with a name (and description). Enter a meaningful name so that you can later find the Goal you need. The description is optional.


**NOTE:** If you’re adding more than one Goal, remember to choose your main one. You’ll do so by marking the star on the chosen Goal – it’ll be the Goal visible on the CUX Dashboard everytime you’ll log in.

4. Add a step. A Goal step is a single visitor action. You can create Goals that consist of 2 or 3 steps. You can also build a complex one with more steps. There is no technical limit to the number of steps.
4.1. **Enter a step name**. You will see it later when the Goal is ready. Try to use a name that reflects an action you want your visitors to take.
4.2. **Select an event and define its parameters**. You can select events from 4 categories: events related to web traffic (page load or visit origin), user movement on the page (click or scroll), and user interaction with a form (entering data, changing data, submissions) or a custom Goal. To learn more about event types and their function, see Goal events.

![Screenshot-2021-01-13-at-09.08.41-700x503 (1).png](https://content.cux.io/uploads/Screenshot_2021_01_13_at_09_08_41_700x503_1_76a1eb96c0.png)

Note that, for some types of events that represent user interaction with your page element, you need to enter those elements’ XPath. CUX has a built-in mechanism to make the process smoother. To learn more about XPath, see XPath extraction.

5. Optionally repeat adding and configuring steps until you’ve mirrored the entire sequence of actions.

You and your Goal are all set!

[How to build your custom Goals in CUX](https://www.youtube.com/watch?v=aQDKkieNUgE&ab_channel=CUXio)


Building your custom Goals

To discover the page element XPath, you need to tell CUX which HTML element you have in mind. We’ll need the element class or ID that’s part of HTML attributes.

1. Navigate to the page on your site.
2. Find the element you want to track in your Goal.
3. Right-click the element.
4. Use the “Inspect” or “Inspect element” function. This opens the developer tools window or pane. In the developer tools window, a part of the HTML code that represents the chosen element is selected.inspect page cux.io

![xp-700x402 (1).png](https://content.cux.io/uploads/xp_700x402_1_e3f19df961.png)

5. Copy the HTML element class or ID.
6. Paste the copied value in the XPath field of the Goal creator. After a short moment, CUX shows you suggestions for the XPath.
7. Select the option. CUX automatically enters the XPath value into the field.
That’s all you need to do!


**NOTE:** If you use xPath for the Click event – always select “Matches” in the Comparison tab. If you use regular expressions instead of XPath, choose “Contains (regexp)”.

[How to extract XPath for Waterfall or Goal events](https://www.youtube.com/watch?v=abYCNgbybNo&feature=emb_title&ab_channel=CUXio)


Extracting XPath for Goal events

So far, as you know, we used XPath to track events like clicks on the website (see: Extracting XPath for Goal events). To discover the page element XPath, you needed to tell CUX which HTML element you have in mind. Now, instead of the ID that’s part of the HTML attributes you want to track, you can type in the element class.

### Tracking events using classes
From now on, if all items you want to examine have the same class (e.g. _button class=”accept”_), you can track them in CUX using this class.

### To extract class for Goal events:
1. Navigate to the page on your site.
2. Find the element you want to track in your Goal.
3. Right-click the element.
4. Use the “Inspect” or “Inspect element” function. This opens the developer tools window or pane. In the developer tools window, a part of the HTML code that represents the chosen element is selected.
5. Copy the element class (e.g. _button class=”accept”_).
6. Paste the copied value in the Class field of the Goal creator.

![xPath_or_class-700x380 (1).png](https://content.cux.io/uploads/x_Path_or_class_700x380_1_3911a628da.png)

### Two ways of writing down classes:
- _accept_ – CUX will focus on all elements that have the “accept” class and on those which have the “accept” class and any other classes,
- _“accept”_ – CUX will focus only on elements that have the “accept” class.


### Why track events using classes?
xPath is information about a specific element on the page, which means that you can precisely target a specific element, e.g. a button, thanks to which we will be able to measure clicks. But what if we want to measure a click on any of the many buttons? For example, if you have 100 buttons like this on your page?

If all these elements have the same class, e.g. accept, you can measure them using classes.

**NOTE:** If you use classes for the Click event – always select “Contains (regexp)” in the Comparison tab. If you use XPaths, choose “Matches”.

Extracting classes for Goal events

Imagine a world where you would just know what time of day or week the most users fulfilled visit goals. No more waking up screening, remembering you forgot to check the latest analytics updates! You would simply get alerted about any significant changes in conversion rates. Perfect world, right?

Well, now it’s within your reach.

### What are alerts in CUX?
Alerts are e-mail notifications about the progress of your Goal that we send to you automatically. What values and goals interest you, you set yourself. You can set up alerts for any number of analytical goals.

![Screenshot-2022-04-19-at-11.40.01.png](https://content.cux.io/uploads/Screenshot_2022_04_19_at_11_40_01_eef4ff0684.png)

### How to switch on alerts in CUX?
You can switch alerts in the Goals or Visit tabs of your project.

### To switch alerts in Goals:
1. Log into [your account](https://app.cux.io/login).
2. Go to Goals and select the “Alerts” tab. Click “New Alert”.

![Screenshot-2022-04-19-at-11.58.57-700x242.png](https://content.cux.io/uploads/Screenshot_2022_04_19_at_11_58_57_700x242_0e2d4ff6e6.png)

3. Start with a name. Try to enter a meaningful name so that you’ll know which alert is reaching your inbox.
4. Enter your e-mail address.
5. Set up a preferred variable and its value. You can either choose to be alerted when the Goal progress in Greater than or Lesser than a given percentage.

![Screenshot-2022-04-19-at-11.59.36.png](https://content.cux.io/uploads/Screenshot_2022_04_19_at_11_59_36_97adddee41.png)

6. Add a new alert & never have to worry again about the constant need of checking your analytics!

### To switch alerts in Visits:
1. Log into [your account](https://app.cux.io/login).
2. Go to Visits.
3. Filter visits with preferred segments or variables.
4. Click “New Alert”.

![e1dc0a27-54f5-4fea-afaa-b06f95aa3e3a (1).png](https://content.cux.io/uploads/e1dc0a27_54f5_4fea_afaa_b06f95aa3e3a_1_ca2c376e8f.png)

5. Enter a unique an alert’s name, and your e-mail address.
6. Set up a preferred variable and its value. You can either decide to be alerted when the Goal progress in Greater than or Lesser than a given percentage.
7. Add a new alert & never have to worry again about the constant need of checking your analytics!

Setting up alerts for Goal progress

### Technically – what is a heatmap?
A heatmap graphically shows users’ most significant actions on your pages. Each activity, like a click or mouse move, adds to the hotness of a given area. These actions can be, for example, clicks and mouse moves. Any recorded activity makes an area hotter. The places where users click most often are marked as hot areas. Hot regions are marked in warm colors, red being the hottest. The places where users click less often are shown as cold. Cold colors like blue and green mark areas where visitors click but not that often. Any areas without colors are the places where there’s no user action.

![HM_1-700x303.png](https://content.cux.io/uploads/HM_1_700x303_82f5b5291e.png)

Sometimes people get frustrated, and they click somewhere a hundred times just out of anger. CUX heatmaps can show you that as well. For more information on angry clicking see Types of heatmap events and parameters.

### Hot N Cold
Have you ever thought that Katy Perry was singing about heatmaps? Or about the visitors to your website? 😊 Well, think about it like this, people get hot about some things on your website. And they are totally cold about other stuff. This is perfectly normal. Stay calm, [don’t get frustrated as the singer did](https://youtu.be/kTHNpusq654). CUX heatmaps come to the rescue as they help you understand when visitors “are yes,” and when they “are no.” This is a goldmine of insights on your way to understanding your user preferences and behavior.

### What does a heatmap show me?
CUX heatmaps show you the most valuable things that happen on your website:

1. Where people click
2. Where they don’t click (but were supposed to click)
3. Whether people click on things that aren’t links
4. Are visitors clicking out of anger or frustration


Heatmaps can be your website debugging help:

1. You can find clicks on broken links.
2. You can identify missed opportunities to have links (dead clicks).

### I can’t wait to see my heatmaps!
Well, you need to wait. Perhaps this doesn’t sound like good news. Heatmaps are created out of user activity. We need to record and collect enough user click and mouse movements to show you meaningful results. The more visits on your page, the better the heatmaps are. You’ll see this yourself as time passes by, and the heatmaps show more reliable data.

What is a heatmap and what does it tell me?

When you look at a heatmap, don’t take anything for granted. Save some time to have a profound look. Find heatmap settings and try to answer these questions:

1. Is this the thing my users had actually seen?
2. What does the heatmap show me exactly?
3. Is this a mobile or desktop view?
4. What is the resolution of the page shown?
5. Is this a single page or grouped pages view?
6. What types of events does the current view present? Are these events clicks, movements, or experience measurements?


Heatmaps, by default, show a generalized, summary view of user actions. To see more details and analyze specific use scenarios, you need to change heatmap settings. When you open a heatmap, don’t stop there. Review specific resolutions, at least.

The default heatmap view in CUX is the desktop view. If you need a pixel perfect view – and trust us, you need it – you should select a required resolution in heatmap settings. You can start by finding out which screen resolutions are the most frequently used by your site visitors. Next, adjust the CUX heatmap settings to see what happens when people see your pages using this resolution. Some of CUX customers also check the resolutions that get more and more popular to make sure their content works well for emerging technologies.

### Why does the click heatmap look rugged and messy?
We often get the question about the heatmaps showing uneven borders for areas and irregular clicks. And we always reply that it’s about precision.

The nicely looking heatmaps are the effect of overgeneralization. For example, if you have a button on a page, the overgeneralized heatmaps show you clicks at the center of it. The same happens for images. The reality is never beautiful. It never happens that all buttons, images, or other page elements magnetically attract mouse cursor to their center.

Our heatmaps show specific clicks. The exact clicked places. And bring you to a whole new level of understanding.

### Making decisions based on the precise heatmaps
**Are buttons, links, and other active elements easy to access?**
When people are unable to access page elements, they won’t use them. What if that was a “Buy now” button? Can you afford not to know that your conversion call to action doesn’t work? Think about how important that knowledge is for mobile devices, where depending on the device grip style, people might have problems tapping elements that are out of their fingers reach. Watch out for heatmaps showing a button that often gets clicked close to its edges or on one side only. Think if this is an indication that you should change the element placement on the page.

**Are people highlighting text on your page?**
Verify if numerous clicks on a specific piece of text are related to copying text. The most obvious indicators are clicks before a piece of text, for example, at the beginning of a line. This often happens for:

1. Email addresses that aren’t active links
2. Promo codes
3. Street addresses
4. Any piece of text that needs to be used or pasted elsewhere


**Is something particularly engaging for your users?**
It sometimes happens that even images that aren’t linked receive clicks. Sometimes the number of clicks is so significant that we’re showing it on the heatmap. Think of this as an opportunity that wouldn’t normally appear in your business brief. Let’s assume you run an e-commerce site where you sell clothes and accessories. One day you find out that a static photo on a product page gets clicks. Get a closer look – where do the visitors click? Is this a watch, a bracelet, or a cardigan that is clicked. If you have it in stock, you’ve just found an excellent opportunity to cross-sell your products!

### Misleading traits
Note that heatmaps don’t show any dynamic elements. A heatmap is always a snapshot of the default state of your page. Elements like pop-ups, tooltips, modal windows, drop-downs don’t appear on the heatmap view. However, we’ll show clicks that those elements received. When you see unexpected hot areas, think if a dynamic or temporary page element appears there. Do not mislead those areas as rage clicks. Our algorithms understand your page behavior and can distinguish clicking on a dynamic page element and angry behavior.


## What is a heatmap?

As you probably know, a heatmap graphically shows users’ most significant actions on your pages.  Every single activity – like a click or mouse move, scroll, chaotic movement – adds to the hotness of a given area. The places where users click most often are marked as hot areas (yellow, orange, red). The places where users click less often are shown as cold (blue and green). Any areas without colors are the places where there’s no user action.

<center><iframe src="https://giphy.com/embed/5wFkqt6A8R4qAqGIFQ" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/abcnetwork-modern-family-eric-stonestreet-jesse-tyler-ferguson-5wFkqt6A8R4qAqGIFQ">via GIPHY</a></p></center>

## What heatmap is trying to tell me?
In [cux.io](https://cux.io/) heatmaps can show you the most valuable things that happen on your website. Like places here people click or don’t click (but were supposed to click). Phrases that users clicked on thinking that they’re links. Anger and frustrated clicks. You can also use heatmaps for debugging your website. For example, you’ll be able to spot clicks on broken links or missed opportunities to have links (dead clicks).

## How to read a heatmap?
There is a one simple rule for you to follow: don’t take anything for granted. Working with heatmaps require a bit of time and commitment. Heatmaps, by default, show a generalized, summary view of user actions. To see more details and analyze specific use scenarios, you need to change heatmap settings.

**You can for example:**

- change the type of device for which the image is displayed (desktop, mobile, tablet, smart TV, console, wearable, embedded browsers),
- check out images for different types of events (clicks, [rage clicks](https://cux.io/blog/what-is-a-rage-clicks/), mouse movements),
- set time intervals that interest you,
- change page resolutions,
- examine single or [grouped heatmaps](https://cux.io/knowledge-base/what-are-grouped-heatmaps/).

![Heatmap CUX](https://content.cux.io/uploads/heatmap1_700x333_e430c61515.png)

_<center> Adjust heatmap to your analytical needs </center>_

>The default heatmap view in CUX is the desktop view. If you need a pixel perfect view you should select a required resolution in heatmap settings. You can start by finding out which screen resolutions are the most frequently used by your site visitors. Next, adjust the CUX heatmap settings to see what happens when people see your pages using this resolution.

## See better, know more from CUXs' Heatmap
You can use an advanced filtering option for a better insight into heatmaps. Play with opacity – increase and decrease the transparency of hot areas to adjust visibility. Change intensity to find precise user activity points. Increase **intensity** to see exact click points if your page generates a lot of events. Decrease it to see specific places if you’ve fewer events. Play with spread to focus on single areas (low **spread** for high traffic pages, high for low traffic pages).

![Heatmap cux.io ](https://content.cux.io/uploads/advanced_700x333_90e2941150.png)

_<center> Advanced options to read a heatmap </center>_

## Why does a heatmap look messy?
It’s all about precision. If you’re looking at a nice heatmap with even borders you’re probably the victim of overgeneralization. Need an example? Let’s say you have a button on a page. The overgeneralized heatmap will show you clicks at the very center of it. But in reality the button rarely attract the mouse cursor to their center.

![Grouped Heatmaps in cux.io](https://content.cux.io/uploads/Grouped_Heatmap_main_1_700x359_1993e23ba9.png)

_<center> When you read a heatmap you’ll rarely see even borders </center>_

In CUX we’d rather our heatmaps to look messy and at the same time show you specific clicks. The exact clicked places. The right birthplaces of your user’s frustrations. And – thanks to this untidiness – a whole new level of understanding your customers.

## Making heatmap-based decisions
When people cannot access page elements, they won’t use them. If this concerns the “Buy now” button, it would be a bummer, wouldn’t it? Can you afford not to know that your conversion call-to-action doesn’t work? Probably not! Keep an eye out for heatmaps showing a button that often gets clicked close to its edges or on one side only. Think if this is an indication that you should change the element placement on the page.

Examine if numerous clicks on text are related to copying text. The most obvious indicators are clicks before a piece of text, for example, at the beginning of a line. This often happens for emails that aren’t active links, promo codes or street addresses. If that’s the case for you – try to make it easier for users to copy the text. Perhaps highlighting content is not about non-copyable elements, but simply visibility problems? Maybe you used too little contrast font that is invisible to users?

It sometimes happens that even images that aren’t linked receive clicks. Think of this as an unrivalled opportunity. Let’s say you have a fashion e-commerce. One day you find out that a static photo on a product page gets clicks. Where do the visitors click? Is this a watch, a bracelet, or a cardigan that is clicked. If you have it in stock, you’ve just found an excellent opportunity to cross-sell your products!

## Mind the traps while analyzing heatmaps!
That may come as a surprise to you but heatmaps don’t show any dynamic elements! They’re always static snapshots of your page. That’s why you won’t be able to see elements like: pop-ups, tooltips, modal windows or drop-downs. However, we’ll show clicks that those elements received.

![Heatmap CUX](https://content.cux.io/uploads/Ania_Kruk_case_4_700x401_1_73341482c8.png)

_<center> If you read this heatmap you’ll see clicks on the menu bar after its expansion </center>_

When you see unexpected hot areas, think if a dynamic or temporary page element appears there. Do not mislead those areas as rage clicks. Our algorithms understand your page behavior and can distinguish clicking on a dynamic page element and angry behavior.

## How to read heatmap?

Correctly read heatmap is able to show you the exact history of activity on your website. Thanks to it, you’ll find out where exactly people clicked and where they didn’t click, even though you wanted them to. Do they click on things that aren’t linking? Do they click in anger or frustration? You will see which links are not working, and identify places where the links should appear (the so-called dead clicks).

When you look at a heatmap, don’t take anything for granted! What you see is a generalized view of the user’s activities. To see more details and analyze specific scenarios, you’ll have to dig into the settings. Look for new points of view, find specific segments. And I’m here to tell you how to do it.

![Heatmap CUX](https://content.cux.io/uploads/Screenshot_2020_10_21_at_12_24_34_700x405_1_4b6a256ac6.png)

_<center>Heatmap [cux.io](https://cux.io/)</center>_

## Heatmap ≠ Linkmap
When you read a heatmap remember: a heatmap is always static. Some tools scrape the page (i.e. extract data from web pages) immediately after connecting the code. Others, such as CUX, display the latest recorded view in the heatmap preview. This is especially important for the timeliness and accuracy of the collected data on user behavior.

Remember that the heatmap applies to all clicks on the page – regardless of their severity and location. Heatmaps where you can see that users click and hit the buttons perfectly are probably linkmaps. Linkmaps exclude any clicks that are not clicks on links to other subpages, and therefore cannot provide you with a complete picture of user behavior.

## Pop-ups, widgets, drop-down menus
If your website has multiple states – that may be an analytical problem. All clicks and interactions with pop-ups, widgets or hovers appearing on your website will be extremely important for user behavior analysis. Unfortunately, if they don’t generate separate URLs, you won’t see a separate heatmap for them.

When analyzing a heatmap and seeing clicks “floating in the air”, consider whether these are the places with additional content appearing. Like pop-ups, widgets or drop-down menus. While you won’t see them on the heatmap, remember that they have great analytical value! They’ll tell you a lot about what the users are facing.

## Tracking campaign traffic
Do you run an online business? You certainly drive traffic to your website from paid campaigns or social media. But are you following that movement properly on your heatmaps?

Remember that each redirection from external sources “attaches” a piece of text to your address. For users coming from Facebook it will be _fbclid_, for clicks from Google it will be _gclid_. If you have many campaigns or social media inputs, a heatmap for a single URL is not enough. In such a case, it is worth registering all URLs in heatmaps and using the [“grouped heatmap”](https://cux.io/blog/grouped-heatmaps/) function. We used it with great results while [optimizing the Valentine’s Day campaign for aniakruk.pl.](https://cux.io/blog/valentines-campaign-analysis-aniakruk-case/)


![aniakruk.pl heatmap CUX](https://content.cux.io/uploads/Ania_Kruk_case_5_700x392_1_a1303345c1.png)

_<center> Grouped heatmap for campaign traffic in cux.io (for rage clicks) </center>_

## Logging frustration
No matter how much time you devoted to designing your perfect website or product – user frustration is a phenomenon that you will definitely encounter! Tracking user behavior patterns, the so-called Experience Metrics allows you to catch negative emotions before they turn into serious problems that threaten to decrease conversions.

Heatmaps are the perfect solution here. If read correctly, they can become a source of knowledge about users’ frustrations. Imagine a situation where some page element has many more clicks than your CTA (Call to Action). This is not a proof of its popularity, but most often of its problems. It may turn out that users cannot click on it. Thus, they increase the traffic in its area, which is distinguished by red on our heatmap. Heatmaps of [rage clicks](https://cux.io/blog/what-is-a-rage-clicks/) will also be useful in tracking frustration.

How to read a heatmap?

A grouped heatmap shows you data aggregated for several pages. You can view them as regular heatmaps, but the hot and cold areas are shown for more than one page. The grouped heatmap works like a regular heatmap. You can use the same controls and settings for both types.

### When to use grouped heatmaps?
Grouped heatmaps help you overcome technical constraints. They also add a different angle to your observations.

**Aggregating pages listed separately**
It happens that visitors land on your pages using links embedded on different sites. One example of this is social media, Facebook in particular. Each time you share a link to your site on Facebook and someone clicks the link there, they will end up on your page using your URL and a fbclid parameter. For CUX, each of such visits looks like a visit to a different address.

![HM_4-700x314.jpeg](https://content.cux.io/uploads/HM_4_700x314_585a13b90e.jpeg)

A page whose primary address is /ux-blog.html was visited from Facebook and other pages with several parameters. This is the same page shown to visitors using different entry points. Each of these entry points is a separate heatmap in CUX. You can group them to see an overview heatmap.

**Aggregating pages based on a single template**
Our websites very often consist of very similar pages, most of them based on a similar template. Their layout and object placement stay the same. The only difference between them are images and the actual content. In an online store, these are, for example, product pages or shopping cart views. If you want to check how effective the layouts are, grouped heatmap helps you do that.

### Grouping pages into single heatmaps
Grouping pages into a heatmap consists of the following steps:

1. Go to [Heatmaps](https://app.cux.io/pages/).
2. Click Grouped heatmap. This opens a panel where you can select grouping conditions.
3. Select a grouping condition. You can use one of 4 options: Starts with, Ends with, Matches, and Regular expression. Each of the conditions is a shortcut that allows you to skip entering full URLs.
4. Enter a part of the page addresses in the Search by URL field. You can type in the address part by hand or use a “trick” like wildcard (asterisk, “*”) or regular expression to replace part of the URL with a symbol.
4.1. Simple text. Good for fast grouping of pages with simple URLs. Works for conditions: Starts with, Ends with, and Matches.
4.2. Wildcards – an asterisk (“*”). Good for fast grouping of pages whose URLs have a similar beginning, ending, or middle.
4.3. Regular expressions (regex). Good for grouping pages whose URLs are complex or change dynamically.
5. Select a grouping condition. You can use one of 4 options: Starts with, Ends with, Matches, and Regular expression. Each of the conditions is a shortcut that allows you to skip entering full URLs.


Note that when you enter values into the Search by URL field, the table in the background shows a filtered list of addresses. This gives you a preview of the page addresses selected for grouping.

[Grouping pages into single heatmaps](https://www.youtube.com/watch?v=p24c0TUJzfk&ab_channel=CUXio)

### 1️⃣ Wildcard examples
URLs with similar ending –_/myshop/*_. This will group pages with URLs like:
![gr1-700x83.png](https://content.cux.io/uploads/gr1_700x83_255d1ce391.png)

URLs with a similar beginning – _*/category/page.html_
![gr2-700x85.png](https://content.cux.io/uploads/gr2_700x85_0efd75c19b.png)

URLs with similar middle – _/myshop/*/page.html_. Useful when you want to skip part of the address, for example, category names. This groups pages with URLs like:
![gr3-700x84.png](https://content.cux.io/uploads/gr3_700x84_59b450144e.png)

### 2️⃣ Regex example

**Home page**
The home page is represented by the backslash symbol (“/”). Each of the page URLs for which we generate heatmaps contains the “/” symbol. To find URLs matching only the backslash, use the following regexp: _(^\/$|^\/\?.*)_

![HM_5-700x354.jpeg](https://content.cux.io/uploads/HM_5_700x354_612e8d434f.jpeg)

Visits directly to the homepage, with and without parameters. Data we gathered for 3 different pages are going to be combined into a heatmap. Regular expression helps you to precisely select pages for grouping.



What are grouped heatmaps?

While observing your users’ behaviors you can spot their movements and frustrations via heatmaps. There are 4 different events that can be detected:

- click,
- rage click,
- move,
- link.

### What is a link map?
A link map (or a linkmap) is a visual representation of your users’ interactions with links on your website (mouse clicks on a desktop and taps on mobile). Link maps come in handy when you need to track on-page user engagement like clicks on links, form fields, CTA buttons, and images with links across a website, which in turn helps you optimize user experience for better conversion.

![Linkmap-700x450 (1).png](https://content.cux.io/uploads/Linkmap_700x450_1_d9db499fc1.png)

### Why use link maps?
With link maps, you can:

- track users’ activity, 
- see links on which visitors click or tap (mobile users), 
- identify underperforming links, CTAs, and images that are getting ignored,
- identify content that is the most popular/ generates the most traffic, 
- showcase engagement data visually,
- iterate better website design by finding bugs and areas for improvement.


### How to read a link map?
To display a link map for your website page:

1. [Log into CUX](https://app.cux.io/).
2. Go to Heatmaps.
3. Select “Link” from the Events section. 
3.1. Choose the type of device for which you’d like to see a link map: desktop, mobile, tablet, smart TV, gaming console, wearable devices, embedded browsers. Note: we may not be ready to show you views for all types of devices if there’s not enough data.
3.2. Select a date range from which you’d like to see a link map. 

![Heatmap_events.png](https://content.cux.io/uploads/Heatmap_events_8058a7eb53.png)

Remember that CUX will only highlight those links on the page that are clickable and that someone clicked at least once. If a given link is not highlighted, it means that no user has clicked on it.

**Note:** the percentage of clicks is calculated in the context of all clicks on a given page. If the website was visited by only one user who clicked on two of the links, the click-through rate for each of them will be described as 50%.

### How is a link map different from a heatmap?
The heatmap graphically shows ALL user actions on your site, such as rage clicks, click on clickable and non-clickable elements or mouse movements. The link map shows ONLY clicks on clickable elements such as links, buttons, linking images, etc.

![Heatmap-vs-Link-map-700x362.png](https://content.cux.io/uploads/Heatmap_vs_Link_map_700x362_8d97370b84.png)

By using both heatmaps and link maps, you can spot missed opportunities for conversion! 

- Spot places where users click but didn’t find a clickable element.
- Track users’ clicking on broken links.
- Identify places on the website which should have links (dead clicks).


### Why can’t I see clicks on my links?
If there are links on your site that are not highlighted and do not show the clicks’ percentage, check:

- if the link is not damaged,
- that the link is anchored in the right place.

![Links-on-link-map-700x455.png](https://content.cux.io/uploads/Links_on_link_map_700x455_8b4ea3016d.png)

If you still don’t see any clicks, it means that none of the users visiting the sub/page clicked on that particular link.

### Why can I see clicks on heatmap but not on link map?
Do you see user activity on the heatmap that does not resonate with clicks on the map link? Jackpot! You have found places on your website that need optimization.

Users, by clicking on non-clickable elements (such as text, photos, contact etc.) are giving you bop on the head, that you may be letting conversion slip through your fingers! 

Perhaps a blog post’s title that looks like a CTA should be a clickable button? Or the transition to the next subpage should start after clicking the photo, not after hovering over the arrow? Or an e-mail to your support should have a “mailto:” clickable command? After all, who is not losing it when forced to copy-paste an e-mail address from a contact page!?

Comparison of heatmap’s and link map’s results is a real treat for fans of optimization. Enjoy the ride!

What is the difference between heatmap and link map?

### Introduction

CUX code is necessary to connect your site and CUX. The code makes sure the CUX database is always up to date and has the relevant pieces of information about visits, clicks, and visitor data. This is the only way to connect your site and CUX. When CUX script is operational on your site, and there’s traffic, you can safely assume that all the information you need is available on your CUX dashboard.

Before you start
- Consider CUX installation using Google Tag Manager. That’s the least time-consuming approach. For more information, see Install CUX code with Google Tag Manager.
- Make sure you can log in to your site using the administrative account.

The CUX code can be installed anywhere on the page. The recommended location for the script installation is before the closing BODY tag. This is just a recommendation. If you can’t do this, you can install the code, for example, before the closing HEAD tag.


```
           <div class="footer-copyright">
          <div class="container"> made with ♥️in Berlin | © cux.io 2019</span></div>
      </div>
    </footer>
	<script>(function(c,u,x,i,o){
      c._cuxSettings=c._cuxSettings||{id:o};
      var e=u.createElement(x),t=u.getElementsByTagName(x)[0];
      e.src=i;e.async=true;e.defer=true;t.parentNode.insertBefore(e,t);
      c._cux_q=[];c._cux=c._cux||{send:function(n,p){c._cux_q.push({n:n,p:p,t:new Date()})}};
    })(window, document, "script", "//dc.cux.io/analyzer.js?", "2056434044.0.70977600.1495720240.5926e130ad4cf");</script> 
  </body>
</html>
```

_You can install the code anywhere on the page. It’s best to add the code before the </body> tag. Here you have an example of how we did it on our website._

You may be tempted to install the code on a single page or just selected pages. We wholeheartedly do not recommend that. You won’t be able to observe the entire user journey, and you can miss a lot of valuable insights. Always install the CUX code for the entire site.

### Install now 😁
There’s no need to wait. Code installation is the only thing you need to do to get everything running. There are no extra configuration or camera settings.

We’re convinced it shouldn’t be too difficult for you. In just several minutes, you should be able to see the first recordings and start thinking about your user behavior. And in case of problems, you can always talk to us!

### Installing the CUX code

1. Go to Profile >> Projects and click Show. This takes you to the project summary. You can find the code in a special box. It has a copy link that puts the entire CUX code in the clipboard.
2. Log in to your site configuration panel. Use your admin credentials so that you can make changes in the site structure.
3. Find the place where you can modify the site templates.
4. Copy the tracking code from CUX.
5. Switch to your site admin panel and paste the code in the HTML template.
6. Save the template. If required, publish the changes.
7. Verify if the code works. See, Checking if the code works

### Checking if the code works
The easiest way to verify if CUX records visits on your site is to open several pages yourself. Load a page or two in your browser and go to the CUX dashboard. When the code operates and sends data to our database, you instantly see numbers on the dashboard.
If the code installation instructions were displayed after you log in to CUX, they disappear the moment we record the first visit and make it ready for you to replay.

### Where to find your CUX code
You can find the CUX code in the Projects section of the account menu. You can go directly to your current project list: [https://app.cux.io/projects](https://app.cux.io/projects).

We also emailed the code to you when you set up the account.

CUX code is unique for each of your projects. This means you can’t reuse the same code on different sites. We generate the code when you create a new project. If you want to track multiple sites, you need a separate project for each of your sites.

### The code seems not to work?

Here are some steps you can take to troubleshoot CUX connection:

- Visit one of the pages where you installed the CUX code. We need to record at least one visit to show data.
- Disable ad blocking. Browser extensions similar to Adblock prevent the CUX code from sending visit information.
- Check if the code has been pasted on every page of your site. You can preview the source code of the page loaded in your browser. Search for cuxSettings string. If you can find it in your page code, this means the code is installed.
Nothing helps? Let us know.

### Next steps
- Go to Visits. Start investigating the recordings as soon as they appear. For more information on visits, see Working with visits.
- Go to Heatmaps. See user behavior. Understand what interests your users the most and see what catches their eye. For more information on heatmaps, see, What is a heatmap and what does it tell me?.

General instructions for CUX code installation

You can install the CUX code using Google Tag Manager (GTM). This is **the least troublesome** and the fastest method to see data in CUX. If your site already has the GTM code implemented, you can gather insights in **minutes**. Installation via GTM saves you the woes of navigating through the code or admin panel of your site. Once you create a CUX tag and publish your GTM settings, the CUX database starts filling with insights.

####

Before you start
- You need a set up and configured Google Tag Manager. Create a container for the site you want to monitor with CUX.

####

#### Installing CUX code with GTM

1. [Sign in](https://tagmanager.google.com/#/home) to Google Tag Manager.
2. Select the account and container for the site you want to monitor with CUX.
3. Go to Tags and click New.
4. Enter a name for the tag — for example, CUX insights.
5. Click Tag Configuration and select Custom HTML.
6. Copy the CUX code from your account. Make sure you select the right project if you have more than one. For more information, see Where can I find the CUX code?
7. Paste your CUX code in the HTML field.
8. Setup a trigger. Select All pages to ensure the best insight into your visitor behavior. You can optionally add exceptions for pages that you don’t want to be monitored with CUX.
9. Save your new GTM tag configuration.
10. Use the GTM preview feature to see if the CUX code starts.
10.1. Click Preview in GTM. It will inform you that the preview mode is on.
10.2. Open your site in a new browser tab.
10.3. Once a page is loaded, GTM opens a panel in at the bottom of the browser window, where it shows all scripts that it triggered there. You should be able to see CUX on the list.
11. Navigate to GTM and switch off the preview mode.
12. Click Submit to publish the changes. That’s it! The tracking starts momentarily.
13. Log in to CUX to verify if the code works. See Checking if the CUX code works.

####
Please note, we make sure to have this set of instructions as accurate as possible. It may happen that when Google redesign their tools, we may be slightly out of sync. It’s always best to check Google’s help for the most up-to-date description.

If you’re still unsure how to install a custom HTML code in GTM, [see the official Google documentation](https://support.google.com/tagmanager/answer/6107167?hl=en).

#### Data layer integration
The easiest way to verify if CUX records visits on your site is to open several pages yourself. Load a page or two in your browser and go to the CUX dashboard. When the code operates and sends data to our database, you instantly see numbers on the dashboard.

Please note that this process won’t integrate your CUX project with Google Tag Manager events. It is, of course, possible you need to flick a single switch in the **Integrations** section. By default, the integration isn’t active. When you enable the integration, you’ll be able to search visits that triggered specific GTM events.

#### Next steps
- Go to [Visits](https://app.cux.io/visits/). Start investigating the recordings as soon as they appear.
- Go to [Heatmaps](https://app.cux.io/pages/). See user behavior. Understand what interests your users the most and see what catches their eye. For more information on heatmaps, see, What is a heatmap and what does it tell me?.
- Enable GTM integration to start finding visits that trigger specific GTM events.

[How to install the CUX code using GTM - tutorial](https://www.youtube.com/watch?v=2DngSfVpTAg&ab_channel=CUXio)


Install CUX code with Google Tag Manager

### Your visitor browsers and recording visits
These are the browsers that we can record:

**Desktop**

✔️ Chrome 30+

✔️ Firefox 27+

✔️ Edge 13+

✔️ Opera 23+

✔️ Safari 7.1+

**Mobile**

✔️ Mobile Safari iOS 9+

✔️ Mobile Chrome iOS 9+

✔️ Latest Chrome and Firefox on Android


When your visitors use an unsupported browser, the CUX code doesn’t start. This helps us avoid showing broken layouts in visit recordings.

In reality, an unsupported browser means something exotic. We’re able to find out the engine of the browser, so we’ll record visits in built-in browsers services like LinkedIn, Facebook, or Twitter use.

### Browsers and CUX application
CUX dashboard, heatmaps, visit player, etc. work in most current browsers such as Chrome, Mozilla Firefox, and Safari.

Note that for an optimum experience, we recommend using a desktop browser. We know it sounds a bit Y2K. We’re still architecting a mobile interface, so it isn’t available just yet.

### Additional browser notes (XPath)
There’s one useful thing you may need when using CUX – developer tools. If you’re going to build waterfalls, you’ll need to copy XPath of an element you want to track in your customer journey. Most browsers allow you to enter developer mode straight away. You do that by right-clicking and selecting “Inspect element” from the context menu. Some browsers like Safari don’t have this feature enabled by default. To enable developer tools in Safari go to Advanced preferences and select “Show Develop menu in menu bar.”

### CUX and browser performance
CUX tracking code doesn’t affect visitor browsers. We designed it so that it has a minimum footprint on your page performance.

Browser recommendations for CUX app

### Data storage
All data is hosted within the EU territory.

### Data encryption
Data to and from CUX’s servers is encrypted in transit.

### Masking of sensitive data
The exclusion of the indicated sensitive data (such as customer contact details) takes place at the stage of the user’s browser. You can hide sensitive data from our analytical scripts BEFORE sending them to our servers using CSS class cux-excludeclass.

### Client-side script hosting
This option is available for enterprise clients only!

Client-side scripting (embedded scripts) is code that exists inside the client’s HTML page. The main benefits of client-side scripting are:

- Greater control over the way data is collected; full control over the CUX publishing cycle.
- Avoidance of blocking and excluding the analytical script by tools such as AdBlock.
- The user’s actions will result in an immediate response because they don’t require a trip to the server.

### Open code
We provide access to the source code of the data collecting scripts.