How to set up Goal or Waterfall

TABLE OF CONTENTS

• Goal/Waterfall set-up overview
• Events
• Traffic Events
  • Pageload 
  • Referrer
• Pointer Events
  • Click
  • Scroll
• Form Events
• Comparison Types
• Negation
• Visual Editor
• URL Restrain
• Custom Regex

Goal/Waterfall set-up overview

Goals and Waterfalls are features that allow you to track and analyze diverse ways in which users interact with your webpage. Both of those features are based on auto-collected events that will allow you to get your numbers and answers almost immediately after setting up a Goal or a Waterfall.

What’s the difference between them:

Goals filter visits that collect all traffic that meets your goal settings, regardless of the order of events in a goal objective.

• For example, if you set a Goal for two events - clicking 'Add to cart' and /cart/ page load - CUX will filter all visits that contain both of those actions in any order. If you want to see visits consisting of 2 steps: Campaign Link -> Conversion, you'll see both visits with those two steps and visits with more steps, such as Campaign Link -> Go to product page -> About Tab -> Convert.

Waterfalls, on the other hand, show ONLY the visits of those users who have gone through each of the steps you set in a certain order.

• For example: If you set a Waterfall for two steps in presented order - click on “Add to cart” and /cart/ pageload - CUX will filter for you ONLY those visits that contain both of those actions in the order you’ve set.

Apart from this setting up Goal and Waterfall are absolutely identical. To create a new Goal or Waterfall you need to perform a few simple steps:

1. Go to the Goals or Waterfalls tab.
2. Select “Add New Goal” on Goals tab or click “Create new” button on Waterfalls tab.

3. Name your Goal/Waterfall and (optionally) add a description. Try to choose a meaningful name for your Goal so that it is easily recognizable. We also highly recommend adding a short description, especially if you are working with CUX as a team.

4.  Click “Set-up Goal” or “Set-up Waterfall”. 

5.  Select “Add Event”. This will launch the CUX event configurator.

6.    Select and configure the Event you are interested in. Choose from traffic tracking events, pointer actions, or form interactions. For some events, you may also use advanced settings.

7.    Add/remove any number of steps. You can change the order of the steps by dragging the tiles.

8. Once you're done with the settings, select “Create Goal” or “Create Waterfall”.

Note, that after you’ve created and saved a Goal or Waterfall - it will take a maximum of a few minutes for CUX to upload settings and present your pre-filtered data.

Events

Events describe users' interactions when visiting your website. CUX collects events automatically which allows you to track various interactions such as page load, referrer traffic, click, scroll, and interactions with forms. In Goal or Waterfall Editor, you’ll find the next events combined into three groups:

• Trafic events:

• Pageload
• Referrer

• Pointer events:

• Click
• Scroll

• Form events:

• Focus in
• Changed
• Focus out
• Submit
  
  

Traffic Events

Traffic tracking events help you use visitor activity related to traffic sources, web page visits, or navigation. They include events like page loading or tracking navigation origin (referrer).

Pageload 

Use Page load event to track when someone visits a page. Combining comparison types with full relative URL or its parts will allow you to track various cases, such as: 

• page load of the exact page; 
• page load of any page, containing a defined value; 
• page load of a landing page from advertising campaigns (based on utms or other parameters like gclid or fbclid); 
• page load of pages with dynamic parameters like a search query or unique transaction number.

To set a Page load event:

1. Choose the event “Page load”;
2. Type the Name of the Step (optionally);
3. Choose a Comparison type:

• Contains (regexp)
• Starts with
• Ends with
• Matches

4. Type or insert the relative URL or its part;

5.  Save the event.

Please note that CUX events are based on a relative URL - a part of a URL that comes after a domain. For example, for URL adress https://www.shop.com/product/brown-bag/ relative URL will be /product/brown-bag/

Referrer

A problem-solver when it comes to tracking visitors coming to you from external sources. For your convinience we’ve grouped all incoming traffic into four groups by type. To set a Referrer event:

1. Choose the event “Referrer”; 

2. Type the Name of the Step (optionally); 

3. Choose a referrer from the list: 

• Direct traffic 
• Paid traffic 
• Social media traffic 
• Search traffic

4. Save the event.

Pointer Events

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

Click

Click event allows you to base a step in your Goal or Waterfall on specific elements that users click while navigating your pages - like buttons, links, images, etc.

To set a Click event:

1. Choose the event “Click”;
2. Type the Name of the Step (optionally);
3. Insert the XPath of the element you want to track. You can do it two ways:

• simply click on a desired element on the visual editor;
• or paste an element’s XPath in an input manually.

4. Save the event.

What is XPath? Simply put, it is the address of a particular element on your webpage. Here’s how you can extract XPath yourself: How to extract XPath for Waterfall or Goal events | cux.io tutorial.

Remember that you can add more than one XPath to a Click event. They will be connected with the OR logic which means CUX will filter recordings that contain clicks on at least one of the selected elements. If you want to track visits where each of the selected elements was clicked - we recommend setting them as separate events.

For more advanced targeting you can also use such Click event features as URL restrain or Custom regex.

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.

1. Choose event “Scroll”;
2. Type the Name of the Step (optionally);
3. Choose Comparison type:

• Less than
• Greater than
• Equals

4. Type the number of scroll height in pixels;

5. Save the event

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 Events

Those events help you follow visitor actions in form fields. These actions include putting the mouse cursor in the field, changing the field’s content, moving out of the field, or form submission. In CUX’s Goal or Waterfall editor, you’ll find the next types of Form events split by type of user interaction with a form:

• 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. Please note that you won’t be able to track specific values inside the fields as CUX encrypts all content of inputs by default to protect your users' privacy.
• Focus out. The event when someone moves the pointer out of a form field or switches to another input. You’ll see users stop typing in a field and move 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.
  
  

To set any of Form events:

1. Choose one of the Form events:

• Focus in
• Changed
• Focus out
• Submit

2. Type the Name of the Step (optionally);

3. Insert the XPath of the element you want to track. You can do it two ways:

• simply click on a desired element on the visual editor;
• or paste an element’s XPath in an input manually;

4. Save the event.

Remember that you can add more than one XPath to Form events. They will be connected with the OR logic which means CUX will filter recordings that contain a selected type of interaction with at least one of the selected elements. If you want to track visits where each of the selected elements had selected type of interaction  - we recommend setting them as separate events.

NOTE: Submit event 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. Another option will be to set Goal/ Waterfall step for the Click event on the form button (instead of the Submit event) and compare the results.

Comparison Types

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

Contains (regexp) – one of the most versatile comparison types when it comes to what you can track with it. Simply type in part of the URL you want to track page loads for. 

Example:

If you type “product”, we’ll track visits where the page load’s URL contains:

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

This type of comparison also allows you to use a regular expression instead of a URL or its part. Regular expressions (regex) are a sequence of characters used to define a search structure for identifying specific patterns in text strings - like URLs. They are useful when you want to track page loads whose URLs can vary depending on the use case. For example, the page name gets different unique parameters appended to it, or you want to track a group of pages with a similar structure of URL Path but with different values in it - like product pages, blog articles, or user/company/employee profiles.

Example:

You want to track page loads of blog articles and the relative URL for such pages looks like /blog/[article-name]/. If you set your event just to Page load + Contains (regexp) + blog - you will also track visits where users were on a page /blog/ but haven’t opened any article. In this case, the regular expression will be handy: \/blog\/(.*)\/ In it we switched the changing part of the URL to a wildcard (.*) - the regular expression that says “here could be any value of any length”. Now CUX will filter to your Goal or Waterfall only those visits where users were on any article page.

Important: Because this type of comparison also accepts regular expressions - remember to always add a backslash symbol ( \ ) before each special symbol in a relative URL that is not a number or a letter, or a regular expression itself - as shown in an example above. Using a backslash in a regular expression tells CUX to treat a special character as a normal one, not like a special regex metacharacter. Those characters are: / ; , ? : @ & = + $ - _ . ! ~ * ' ( ) # 

Also here are some regular expressions you may find useful:

(.*) - wildcard - replace any part of the relative URL which you’d like to switch to “any value”.  

(a|b) - OR pipe. To track page loads where url contains one of the possible values. For example, tracking only three category pages load of all possible: \/category\/(shoes|bags|wallets)

(^\/$|^\/\?*) - your website’s main page. You may see it in CUX as / - but to track it as a page load you will need to use a regular expression.

Starts with – Type the beginning of the page address to see possible options. If you type “/product”, we’ll track visits with URL:

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

❌ NOT “/shoe-product”

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

If you type “product”, we’ll track visits with URL:

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

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

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

If you type “/product”, we’ll only track visits with URL:

✅ “/product”

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

Negation

Negation in the case of events means that CUX will select for you all the visits that did NOT meet the given event setting. For example, if you select an event “Click” for the “Order and pay” button, and check the “Reverse this step (Negation)” box, CUX will filter only those visits where users did not click the button.

Visual Editor

Visual editor is a part of the Click and Form events configurator. Its main purpose is to help you track clicks on elements or interactions with forms effortlessly. Just hover over the element you want to track and click. CUX will automatically fetch the xPath needed to track the action around that element.

The Visual editor consists of:

1. Navigation arrows. These two arrows will help you to navigate back (the left arrow) to a previously viewed webpage or forward (the right arrow) to more currently viewed webpages.
2. Address bar. It is a text field that shows you the current URL you are previewing in the visual editor and helps to quickly navigate through your website. Paste or type in any relative URL and press Enter on a keyboard or the button on the right of the address bar to move to a selected page.
3. Selection/Navigation Mode toggle. Sometimes the element you want to track is located on pages that require some prior user actions. For example, to enter a checkout page you have to have a product added to your cart. So to prevent CUX from picking XPathes of every element you click before you’ll get to a checkout page - switch the toggle to a Navigation Mode. When you arrive at a page containing the desired element switch the toggle back to a Selection Mode and click the element you want to track to extract its XPath. 
4. Preview mode. This feature allows you to switch the preview of the opened page from desktop to mobile and back. It could be useful if some of your website’s elements have different XPathes on different devices. In this case, you have to select both of them in one event to track the interactions regardless of the device it is happening on.
5. Viewport. The area where your selected page will be displayed. Important: if your website is not opening or have any other issue with previewing - please contact our Support team.

URL Restrain

Some elements within the website may share the same XPath. These could include items in the website menu, elements in the footer, 'Add to cart' buttons on product pages, newsletter forms at the bottom of articles, and various others. If you wish to limit the tracking of users' actions to a specific page or group of pages, you can use the URL restrain feature. This feature is available in both Click and Form events.

To add a URL restrain to your Click or Form event:

1.    Click the “URL Restrain” tab in an event editor;

2.    Choose a Comparison type:

• Contains (regexp)
• Starts with
• Ends with
• Matches

3.    Type or insert the relative URL or its part.

Don’t forget to specify the element’s XPath in the “Select Element” tab, as it is a required field.

Custom Regex

For Click and Form events you can also use a regular expression instead of just an XPath. Regular expressions (regex) are a sequence of characters used to define a search structure for identifying specific patterns in text strings - like XPaths. In CUX using regular expressions for XPaths could be most useful if you want to track interactions with a group of dynamic elements. For example, it could be “Add to cart” buttons on product categories with an infinite load or long forms with lots of conditional fields.

To use a Custom regex in your Click or Form event:

1.    Choose the event;

2.    Type the Name of the Step (optionally);

3.    Click the toggle “Use custom regex” in an event editor;

4.    Insert the regular expression;

5.    Save the event.

NOTE: "Custom regex is an alternative to using just XPath. This means that you could use either of these targeting options separately, but not together. Switching from an XPath selection to a Custom regex will clear any previously selected XPaths. All other features, like Negation or URL restrain, can be used with both simple XPath and Custom regex.

Example: 

You want to track clicks on any “Add to cart” button on a product category page, but this button doesn’t have a dedicated ID and the category page has an infinite load which means that there could be hundreds of products on one page, and each “Add to cart” button has a slightly different XPath like: 

• //*[@id="add-to-cart"]/div[2]/div/div[1]/div/button 
• //*[@id="add-to-cart"]/div[2]/div/div[2]/div/button 
• //*[@id="add-to-cart"]/div[2]/div/div[5]/div/button 
• //*[@id="add-to-cart"]/div[2]/div/div[22]/div/button 
• //*[@id="add-to-cart"]/div[2]/div/div[108]/div/button

Adding hundreds of single unique XPathes would be counterproductive, much easier option would be to create a regular expression that would tell CUX what pattern in XPath we are looking for. In our example we just have to replace the changing part of the XPath to a wildcard (.*) - the regular expression that says “here could be any value of any length”. In this case our regular expression we will use in CUX will look like this: 

\/\/\*\[\@id\=\"add\-to\-cart\"\]\/div\[2\]\/div\/div\[(.*)\]\/div\/button 

Important: remember to always add a backslash symbol ( \ ) before each special symbol in an XPath that is not a number or a letter, or a regular expression itself - as shown in an example above. Using a backslash in a regular expression tells CUX to treat a special character as a normal one, not like a special regex metacharacter. Those characters are: / ; , ? : @ & = + $ - _ . ! ~ * ' ( ) #