Troubleshooting

Objective

After completing this lesson, you will be able to test and evaluate WalkMe content through various tools.

Flow Tracker Deep Dive

In the Builder I Certification, we introduced a tool called the Flow Tracker. In this section, we will dive further into more of the Flow Tracker's capabilities and their value to you as a builder.

Test & Evaluate

The Flow Tracker is a WalkMe tool used to test and evaluate your WalkMe content and system settings. It provides information in real time as you are interacting with content. The tool appears as a small window on the screen that can be minimized or maximized to access more capabilities.

Based on the settings you configure in the Editor General Settings tab, the Flow Tracker can appear in the modes as follows:

  • Play Mode
  • Preview Mode
  • Published Environment

The Flow Tracker can be maximized to access more capabilities.

Watch the video to know more. Note that the video doesn't support audio.

So How Does it Help Me?

As a Builder, your role is to build, test, and support QA of items. You are inevitably going to run into situations where you have to troubleshoot content. The Flow Tracker can help you efficiently identify issues and the appropriate resolution--no more time wasted guessing! From the maximized view of the Flow Tracker, you can:

  1. Verify that Smart Walk-Thrus, Launchers, SmartTips, ShoutOuts, or Surveys are working as expected before publishing. If they are not, pinpoint the reason why.
  2. Troubleshoot an item that is not playing as expected by checking its associated conditions, Segments, and Auto Play setup.
  3. Confirm Smart Walk-Thru Goals and Step Triggers are tracking as expected.
  4. Easily reset local Auto Play information for testing content that is set to display only Once, Once a Day, and the Cancel Auto Play Settings functionality.
  5. Verify an Engaged Element’s page settings and element within a published environment.
  6. Temporarily reset local Onboarding Tasks progression as you QA if Tasks are crossing off as expected.
  7. Reset all locally stored WalkMe data for easier testing.
  8. Test out CSS rules on the page before applying them in the Editor.
How to Use
Look through each of the following sections to view how to utilize the tabs in the WalkMe Flow Tracker. We'll start at the top and make our way down through all of the tabs.
Step 1: Step Tracker

This tab shows each step of the Smart Walk-Thru you are playing. As you progress through the Smart Walk-Thru, it shows the technical details of the steps. Each line represents a different step.

In the image, the small numbers in blue circles represent:

  1. Step Type - Regular step, Split step, Popup, Wait For, and so on. In the preceding image, we have a regular step.
  2. Step Trigger - Click trigger, Next, Text, Custom, and so on. In the image, we have a "click" trigger.
  3. Step Status - If WalkMe is searching for a step's element, you will see a magnifying glass. If you keep seeing this icon, you know the issue is that WalkMe cannot find the selected element. If you see 1 green checkmark, the step has played. If you see 2 green checkmarks, the step has triggered. So, for example, let's say you have a "click" trigger for a step. If you are clicking the relevant element and the next step balloon does not play, you likely have 1 green checkmark for the step. This indicates that the step has played but not triggered. Your solution is to fix the step's Trigger settings.
  4. Step Played - This indicates whether a step has been displayed to a user or not. If it has been displayed, it is considered "played."

Click here to view all the possible step type and Trigger icons you could see. There are also SmartTips within the Flow Tracker to support you.

The figure shows the Flow Tracker Steps tab.

Flow Tracker Steps tab
Step 2: Goal Tracker

The Flow Tracker is how to test if your Smart Walk-Thru Goals are triggering effectively. The flag icon represents Goals.

In the Flow Tracker, before a Goal for a Smart Walk-Thru is reached, it will show 0/1 Goals completed. Once the user completes the relevant action for the Goal to be met, it should show 1/1 Goals completed. If it does not, your Goal is not functioning as expected, and you can look at the Goal info to view which rules need to be adjusted.

Watch the video to know more. Note that the video doesn't support audio.

Step 3: Smart Walk-Thrus

Here, you can:

  • View all of the Smart Walk-Thrus available in the environment.
  • Use the Play icon to force play a specific Smart Walk-Thru.
  • Expand a Smart Walk-Thru to see all of its steps or play a specific step.
  • See any Display Conditions or Auto Play rules to troubleshoot exactly why something may not be showing up as expected.

The video shows the Smart Walk-Thru tab of the Flow Tracker.

Watch the video to know more. Note that the video doesn't support audio.

Step 4: SmartTips

This tab allows you to:

  • View all SmartTip Sets and related Display Conditions.
  • Expand a Set to view all individual SmartTips.
  • Click the Conditions button to view any Display Condition rules associated with an item
  • Hover over the eye icon to view the selected element associated with an item. WalkMe will highlight the element on the screen with a blue box. If the eye icon is crossed out, WalkMe cannot identify the element on the screen.

Being able to view whether each rule for an item is met or not makes troubleshooting much more efficient. The same is true for using the eye icon. You can pinpoint the exact issue to make content function as intended.

The video shows he SmartTips tab of the Flow Tracker.

Watch the video to know more. Note that the video doesn't support audio.

Step 5: Launchers

This tab is similar to the SmartTips tab.

Here you can view all of the Launchers in the environment, their Conditions, and whether WalkMe sees their associated element on the screen.

The figure shows the Launchers tab of the Flow Tracker.

The Launchers tab of the Flow Tracker is displayed.
Step 6: ShoutOuts

On this tab, you can view all ShoutOuts, play ShoutOuts using the Play button, and view their Auto Play conditions.

An additional data point here is that we can see the ShoutOut's Auto Play Frequency: Once, Once Per Day, or Always. This can be immensely helpful during troubleshooting to better understand the expectations for the item.

Instead of, say, closing out of a Preview Mode, navigating back to a ShoutOut, and then opening the engagement parameters to get an understanding of what is expected, you can immediately see how a ShoutOut should be behaving by looking at the Flow Tracker.

The figure shows the ShoutOuts tab of the Flow Tracker.

The ShoutOuts tab of the Flow Tracker is displayed.
Step 7: Surveys

The Surveys tab has similar functionality, including the Play button, viewing Display Conditions, and viewing Auto Play Frequency setup details.

With the Auto Play Freqeuncy, it is important to remember how WalkMe technically functions. If a Survey was already Auto Played, WalkMe understands that you already saw it, so it could not be showing up for you when you're testing for this reason.

We have introduced a "reset" Auto Play option the Flow Tracker for testing purposes so that you can view the content as if you were a first-time user.

The figure shows the Surveys tab of the Flow Tracker.

The Surveys tab of the Flow Tracker is displayed.
Step 8: Engaged Elements

Here, you can:

  • View all Pages with Engaged Elements
  • Expand each Page to view all Engaged Elements on the Page
  • View Page Settings and Condition evaluations for all items
  • Use the eye icon to view the selected element for an item

The figure shows the Engaged Elements tab of the Flow Tracker.

The Engaged Elements tab of the Flow Tracker is displayed.

Note

Engaged Elements are only visible in the published environment. These are also only available for Clients that have the DeepUI technology enabled.
Step 9: Settings - General

The Settings tab has five sub-tabs: General, Storage, Custom CSS, Alerts, and Segments. We'll explain each sub tab in its own section here.

The Settings - General subtab provides high level information about which features are enabled/disabled. It also shows the last publish date. Here's a list of all the data points:

  • Onboarding Feature: On/Off and if any Display Conditions are set up
  • Search Integration: On/Off
  • Safe Start Enabled: On/Off
  • Live Chat Integration: On/Off
  • Help Desk Integration: On/Off
  • Widget Display Segmentation: On/Off and if any Display Conditions are set up
  • Last Publish Date

The figure shows the General Settings tab of the Flow Tracker.

The General Settings tab of the Flow Tracker is displayed.
Step 10: Settings - Storage

Based on how you set up your WalkMe content, different data points are stored on the end user's browser. The Storage sub tab allows you to clear those data points so you can experience WalkMe content as an end user seeing it for the first time.

  • Reset All Data: Clear any existing WalkMe data stored within your current browser. xxx
  • Reset Onboarding Task Data: Temporarily reset the current user Onboarding Task progression in the Menu. This does not reset Task progress for any end users - just you as you are testing so you can check how Tasks are crossing off.

There are in-app SmartTips on both of these items to serve as reminders.

The figure shows the Storage tab of the Flow Tracker.

The Storage tab of the Flow Tracker is displayed.
Step 11: Settings - Custom CSS

Do you ever wish there was a way to test CSS before officially putting it into the Editor? Well, there is!

Use the Flow Tracker Custom CSS tab to type in any CSS to see how it looks prior to implementing it in the Editor CSS section. You can see all of the CSS created in the system and make changes.

For example, type in CSS specific to a SmartTip. Then, click Apply to see how it looks!

This will NOT automatically apply the CSS in the Editor. You must go into the Editor and add the CSS for it to be permanent for your item. This is just a quick test for a visual.

The figure shows the Custom CSS tab of the Flow Tracker.

The Custom CSS tab of the Flow Tracker is displayed.
Step 12: Storage - Alerts

Alerts may appear to provide visibility into aspects of your WalkMe implementation. These may or may not require action on your end.

The figure shows the Alerts tab of the Flow Tracker.

The Alerts tab of the Flow Tracker is displayed.
Step 13: Storage - Segments

This tab lists any Segments applied to content, and whether or not those rules are being met. Similar to other areas of the Flow Tracker, you can click the Conditions button to view how each individual rule is being evaluated.

This is helpful when troubleshooting why content with a Segment applied may not be appearing - maybe the Segment rules are not being met!

The figure shows the Segments tab of the Flow Tracker.

The Segments tab of the Flow Tracker is displayed.
Summary

The Flow Tracker is a robust tool that can increase efficiency and effectiveness of content troubleshooting.

As you progress your building skills, it also helps you as a content creator recognize the different technical details to check prior to getting to the content testing point - now making your building more efficient, too!

Let's See It in Action!

Watch the video to see one of our recent Tip Tuesday editions - technical builders display each of these sections in action.

Selected Element

The options in the Selected Element tab will play a key role in editing and testing your WalkMe content. Let's take a look at what these are all about.

What is the Selected Element Tab?

The Selected Element tab is where you can troubleshoot your Smart Walk-Thru Balloon Steps, Launchers, or SmartTips when they are not appearing as intended.

There are numerous technical settings in this tab related to how your item displays.

The figure shows the selected element tab in the Launcher Options window.

Selected Element tab in the Launcher Options window
Element behavior

Element Behavior Options

The figure shows the Element Behavior Options in the Editor.

Element Behavior Options in the Editor

Element Behavior generally applies to Launchers and SmartTips and helps with issues where your Launcher or SmartTip is not showing correctly.

By choosing one of the options, WalkMe will have a better understanding of how the element loads on the site, so WalkMe knows when to try and load it.

Hint

WalkMe's default is to look to load content only when a web page loads.

Appears on Page Load

This is the most common setting for Element Behavior. Most elements on the web page show up as soon as the page loads.

Example:

When you load up the page everything that you like adding to your Favorites or + buttons on the application automatically load without any user interaction.

Watch the video to know more. Note that the video doesn't support audio.

Appears After Page Load and then Stays Visible

This option is used for elements like buttons or forms that appear after you click on an element on the page.

Example:

This is common behavior with forms on some sites. When you click on a button, a form may appear for you to fill out. Once the form is on the page, there is no button to remove the form - it just stays on the page.

Watch the video to know more. Note that the video doesn't support audio.

Appears and Disappears As a Result of User Action

This option means that if you interact with a button or page, a new element will appear, but if you interact with that same element the new element will go away. The element your items is attached to can show up or go away depending on how the user interacts with the page.

Example:

Menus are the most common example of this. When you click/hover on a menu, you may see a list of options, but the moment you move away from the menu, it will go away.

Watch the video to know more. Note that the video doesn't support audio.

Automatic Setting

WalkMe has introduced a new Element Behavior setting: Automatic. This is now the default setting for Launchers and SmartTips.

When using this setting, WalkMe will first apply the highest evaluation frequency (also highest performance impact) to your item. Over time, it learns the selected element's behavior and then automatically applies the appropriate evaluation frequency moving forward.

This setting is meant to support builders who may not be sure of the appropriate behavior setting for their element. If you have a strong grasp on the element behavior settings and know which one is appropriate for your item, select the appropriate setting for optimal performance.

The figure shows the Automatic settings.

The Automatic Behavior of the Display Condition on the Launcher Options is displayed.

Selected Element Other Options

Element Grade

Element Grade is how well WalkMe can find the element on the page. The higher the number of bars the better, the general rule of thumb is to have 3 bars or more.

Note that, if you are using jQuery then this section of the Selected Element is irrelevant.

The figure shows the Element Grade of Excellent with five bars in the progress bar.

The Element Grade of Excellent with five bars in the progress bar is displayed.

Define How to Identify the Element

The options here are alternative ways to identify your element when WalkMe content is not consistently playing as it should using the default WalkMe algorithm.

  • Automatic - this is the default WalkMe algorithm.
  • By Text - this will only work for elements that have text like a field name or page title (Not recommended for multi-language sites). This is also helpful if you have similar elements on a page but the text is different.
  • jQuery selector - this is the most commonly used in this section, after finding writing and testing your selector you'll place it into this field

The figure shows the option to define how to identify the element.

The option to define how to identify the element is displayed.

Define Which Attributes to Ignore

This section is rarely used and many of the options here are usually automatically checked off all your content based features that your WalkMe representative has enabled for your Editor.

  • Text within Element- this is used for sites or applications that are used globally and are translated for various countries, WalkMe will ignore the text by default.
  • Element ID - this will commonly be checked for sites that are Single Page Application (SPA) since the IDs can be dynamic and change every time a user visit the page.
  • Position - some elements are the same but may move around on the page for dynamic pages.

The figure shows the options to define which attributes to ignore.

The options to define which attributes to ignore are displayed.

Z-Index

What is Z-index?

Z-index refers to how elements are stacked on a webpage. The higher the number the more on top it is. WalkMe content has a really high Z-Index and sits on top of all elements on a page.

The figure shows the elements on a webpage and their order in terms of stacking.

Elements on a webpage and their order in terms of stacking

Why is it important?

Understanding Z-index is important when it comes to troubleshooting issues with your WalkMe content. You'll need to adjust it accordingly if your content is blocking or being blocked by elements on the page. A balloon step with Z-index issue is blocking the list of items in a menu.

Watch the video to know more. Note that the video doesn't support audio.

How to Resolve Z-index Issue?

Scenario

Upon reviewing content, the QA reviewer noticed that the Give Feedback Launcher placement blocks the menu when clicking on the Profile icon.

We will need to resolve this issue by using the Z-index option.

The image shows the My Subscriptions page.

The My Subscriptions page is displayed.
Step 1: Open the Launcher

Upon opening the Give Feedback Launcher, click the Appearance tab.

The image shows the Appearance option of the Launcher Options.

The Appearance option of the Launcher Options is displayed.
Step 2: Click the Option to Expand Z-index

Go down to the option where it says Arrange Layer Order (z-index), and click the down arrow to expand the section.

The image shows the Arrange Layer Order or z-index ion the Appearance area of the Launcher Options.

The Arrange Layer Order or z-index ion the Appearance area of the Launcher Options is highlighted.
Step 3: Toggle on Z-Index

Click on the toggle button. It will be off by default and should turn green when turned on.

The image shows the Arrange Layer Order on the Appearance page.

The Arrange Layer Order on the Appearance page is highlighted.

Note

You do not need to enter any values. That is for more advanced scenarios when turning on the toggle.
Step 4: Edit on Page

Now, either click Edit on Page within the Arrange Layer Order (z-index) section, or click the Edit on Page button on the bottom left of the Options Menu.

The image shows the Edit on Page option.

The Edit on Page option is highlighted.

Note

You will need to have the relevant web page open and attached to your Editor to be able to use the Edit on Page functionality. Otherwise, it will be grayed out.
Step 5: Arrange Layer Order

You should now see the Launcher you created in context, and the editing window will show your layer order arrangement options. Depending on your situation, select either:

  • Bring forward(if your Launcher is being hidden behind a site element when it should not be).
  • Send backward(if your Launcher is hiding covering or "on top of" a website element it should be behind).

For our use case here, we would select send backward.

The image shows the Arrange Layer Order tab.

The Arrange Layer Order tab is displayed.
Step 6: Select On Screen Element
  1. Click Select on-screen Element.
  2. Click the on-screen Element you want your Launcher to go in front of or move behind.

    Once you click the element, look at the define Z-index value manually section; you should see the Z-index value change automatically (if a change was necessary) to reflect the required Z-index to achieve your desired effect.

The image shows the Select On Screen Element option.

The Select On Screen Element option is highlighted.
Summary

Resolving Z-index issues can be as simple as turning on a toggle for Z-index. You'll notice when you Play the Launcher, it actually sends the Launcher behind the menu now.

In rare cases, you might have to enter a value and play with the number to resolve the issue.

The image shows that the Z-index issue is resolved.

Image displays that Z-index issue is resolved.

Lock to Element

What is Lock to Element?

Lock to Element is WalkMe-specific terminology. It is a feature that forces your WalkMe item to inherit the technical attributes of the web element it’s attached to. This allows it to behave and feel more similarly to the element on your site.

When we notice a piece of WalkMe content (usually a SmartTip or Launcher) "jumping around" when we scroll up and down a page, Lock to Element is the fix. Its main use case is to solve the "jumping around" issue.

Sometimes, Lock to Element can be used as a final troubleshooting tactic if a WalkMe item is not showing up on the screen as expected. However, only apply this if you have tried other troubleshooting tactics first!

The figure shows an example of Lock to Element in the Editor.

Example of Lock to Element in the Editor

Why is it important?

We want WalkMe to feel as native to the site as possible. If your users notice a piece of content that is acting erratic on the page, it will be distracting. Fixing this with Lock to Element creates a better experience for users when your WalkMe content feels like it is naturally part of the site.

Watch the video to know more. Note that the video doesn't support audio.

Scenario

Watch the video to know more. Note that the video doesn't support audio.

The same QA reviewer stumbled across another issue with the What's New Launcher, where scrolling up and down the page caused it to jump up and down.

Let's resolve this by turning on Lock to Element.

Step 1: Open the What's New Launcher

Once you open the What's New Launcher, click Edit on Page.

The image shows the New Launcher.

What's New Launcher is displayed.
Step 2: Navigate to the Arrange Tab

If it is not already on that tab, click on Arrange to reveal the Lock to Element option.

The image shows the arrange tab.

The Arrange tab is highlighted.
Step 3: Toggle on Lock to Element

Click the toggle for Lock to Element to activate the feature.

he image shows the toggle of lock to element tab.

The Lock to Element is toggled to the on position.
Summary

Lock to Element prevents the WalkMe item from jumping up and down a screen and will resolve most issues. In some cases, this can also resolve Z-Index issues as well!

Note

Lock to Element is a performance heavy feature. That means we should not toggle this on just for fun. It should only be toggled on when we identify it is necessary.

Troubleshooting Checklist

So, what types of things should I be checking?

At this point, we have covered numerous tools for both creating your WalkMe content to work as you intend it to and then testing. But, it might still be difficult to identify exactly what to look at when troubleshooting why an item isn't working how you want it to.

In the following table, we provide reminders of the specific features to look at if a piece of content isn't working how you think it should be. This is not an exhaustive list, but these should cover the majority of issues.

Rule Engine

Anywhere the Rule Engine is used is always a great place to start. Are all of the rules being met? If not, adjust the relevant rule(s) and test again.

Segmentation

Are there any Segments applied to the item that might be preventing it from showing up?

Display Conditions

Display Conditions are specific parameters for when content should or should not appear. Understand if the item should be playing, and then make sure all the rules are being met.

Element BehaviorMake sure WalkMe knows when the selected element appears on the page.
Element GradeIs WalkMe able to consistently identify the selected element? Red or orange is risky. Reselect the element or expand/narrow the selection.
Z-indexIt's possible there is a layering issue.
Lock to ElementRemember, this is great for solving the "jumping around" issue when scrolling.
Auto PlayCheck that any Auto Play rules are being met and the frequency. Also consider if the item has already Auto Played for you, and that's why you aren't seeing it.
Menu OrganizerIf an item isn't appearing in the Menu, head to the Menu Organizer to ensure it is added to the end user facing Menu.
Publish StatusNot seeing something in a published environment? Confirm it's published!
Preview ItemsNot seeing an item in Preview Mode? Make sure you included it in your selective preview!
Element Recognition MethodFor when an item isn't showing up or is attaching to the wrong element. If you have a text- based element selection, consider bumping up the recognition method from "Automatic" to "By text" to make it more specific.

Summary

Now you have all the tools you need to ensure you are publishing the best content experience to your end users.

To recap, we covered:

  • Concepts to consider when preparing for QA.
  • Various tools to use when testing or fixing content.
  • Common Z-index issues and how to resolve them.
  • Common Lock to Element issues and how to resolve them.

Related Resources

QA Spreadsheet

This spreadsheet is an example of one way to document tester feedback from a QA cycle. It is very common to adjust this document, or create your own, to fit your organization's needs.

View Spreadsheet

Log in to track your progress & complete quizzes