What if we said we took our (already amazing) session replay to the next level? It’s AI, you guessed it. But it’s the most natural artificial intelligence analytics add-on you can think of. Here’s how it works!

How it all started…

So, remember our pixel-perfect session replay? It’s that qualitative analytics tool that helps you walk in the shoes of your users and see where they run and where they stumble. To put it briefly, it’s a deconstructed version of the entire user experience rendered into a pixel-perfect replay. Replays resemble miniature videos you can watch whenever you need to fix a problem or understand the user journey better. Except that sometimes, they’re not exactly miniature…

Sometimes, users take really long journeys inside your product. We’re talking about hours here. And this is something we’ve been hearing a lot: ‘We don’t really want to invest in session replay because we don’t have time to watch the replays.’ So, when generative AI came around, it was a no-brainer for us how to implement it inside our product.

Here comes SessionStackAI!

Meet SessionStackAI: the generative AI capability that will condense session replays into short summaries you can read in less than a minute.

Yes, even the hours-long sessions. With SessionStackAI, you can have complete visibility of your users’ experiences in less time. This means you can now focus on actually improving the user experience instead of staring at it. Not that it’s not useful, but hey — we’re living in quite a fast-paced world, right?

That’s not all, though. SessionStackAI pairs the short summary of the user events in the session recording with recommendations on how to improve the user journey. These insights can give you a headstart on how to tackle usability issues.

And you know that a better user journey translates to more conversions, sky-high engagement, and less churn, right?

How do you use it?

SessionStackAI is currently available for all SessionStack customers, those with free accounts included. Simply select a session you want to inspect and click the big trippy button that says Get Summary. That’s it — in just a few seconds, you will have a short summary of the session, a list of the most important user events, and a few quick user experience optimization tips.

Summarizing a nearly 3-hour-long session

To make the most of the tool, we suggest you segment your users first so you can pinpoint sessions that contain specific pages or errors you are interested in.

Note:

As with all our features, we’ve taken the necessary measures to protect user data and ensure the high levels of security and compliance that our customers need and expect. SessionStackAI is an optional feature and we will not use any session data for model training purposes unless you choose to use the feature (that is — until you generate the summary). If you choose to use the feature, all privacy controls that you have implemented, including data masking and data scrubbing, will be respected.

What’s to come?

That was just the beginning — here are a few clues of what’s to come (in no particular order):

Summaries of user segments and funnels

For this update we’re imagining varying use cases but most importantly, churn prevention. Just imagine if you had the knowledge to understand what churned users do before they churn — the exact steps, pages, and subtle behavioral cues. At scale. Or, if you’re experiencing a period of growth and want to double down on the efforts that bring the most value to your customers, you can analyze the segment of users who log in most often and get a summary of their demographics, their user habits, and preferred use cases. These insights can then be translated into better marketing and sales materials.

Tailored summaries: roles and industries

We’d love to hear SessionStackAI speak the language of product owners, developers, customer success agents, e-commerce businesses, SaaS owners… You get it. We intend to tailor the generative output to your industry and role. So that when you get insights, they will be more useful and applicable to the struggles you face in your daily workflow.

Adding data from different sources

SessionStack collects an immense amount of data — both quantitative and qualitative. But in case this is not enough, we will be aiming to integrate our AI functionality with external tools and sources.

While these updates may take us some time, we are extremely proud of the progress we’ve made so far — and are more than excited for the future!

Are you ready to try it? Get your hands on SessionStackAI now — it’s free >>

Meet SessionStackAI: the Session Replay Add-on We Knew You Needed was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

Introduction

Since many people utilize JavaScript to create web-based applications, it is important to understand the dynamics of a URL (Uniform Resource Locator) that can also be called a location With hypertext and HTTP (Hyper Text Transfer Protocol), a URL (uniform resource loader) allows you to retrieve published resources from the web.

A URL is an address that points you to a unique page. It points to a unique resource from the web. For instance, you can retrieve images, web pages (HTML), and CSS documents by pointing to a valid URL. However, if you point to an invalid URL or where the resources have been moved, it will return an error.

URLs consist of a protocol (HTTP). And this is an application layer protocol that allows the transfer of information between devices. Here, the client, which is usually a web browser, sends requests called HTTP requests. Next, it communicates with the web server and fetches the requested resources.

Let’s explore JavaScript’s location object, its anatomy, and how protocols work — focusing on HTTP.

Anatomy of a URL

A URL consists of the complete information to create a web address. Think of a URL as a postal address. The postal address is the postal service you’ll want to use. The domain name represents the city or town where you live, the port is like the postal code, and the file path is like your house of residence. The query string parameters are the extra information like your building number.

Types of URL

There are two basic types of URLs, absolute and relative URLs. The difference between these URLs is their formation and usage. Let’s explore them.

Absolute URL

An absolute URL is a full URL. From the URL example above, we can see that we have a full URL, with the protocol, domain name, etc. Implicit domain names //developer.mozilla.org/en-US/docs/Learn are also classified as absolute URLs, since the browser will call that URL with the same protocol as the one used to load the document hosting that URL. Another example of an absolute URL is an implicit domain name /en-US/docs/Learn. This is mostly used within an HTML document.

Relative URL

A relative URL is not a full URL, since it contains only the path. However, this URL uses the same protocol, subdomain, and domain as the page it’s on since it only contains the URL path. A usage example of this URL is pointing to files in the same directory or loading HTML pages or associated files.

Protocol

The first part of a URL is the scheme. The scheme describes the protocol used for accessing the information from the web. For web resources, it can be an HTTP with or without SSL.

Domain Name

The next part of a URL is the authority. The authority is the domain name that points us to the web server or the represented authority — — from where information is retreived. Most times, the domain name can be a string. Sometimes, an IP address is used, although much less convenient.

Port Number

The port number of a web URL is used for identifying a network service or process. The port number is always associated with the URL authority (IP address/domain). Specific port numbers are reserved to identify specific services so that an arriving packet is forwarded easily to a running application. For instance, HTTP uses port 80, and port 443 is reserved for HTTPS.

Path

The file path is the location of the file on the web server. With this string, the server knows exactly where to fetch the file the client is requesting.

Query Parameters

The query parameter refers to extra parameters used by the webserver to do extra stuff. These parameters consist of key and value pairs that are separated by an (&) ampersand symbol. For instance, when trying to retrieve an image of a specific ID from a web server, you’ll get something like this.

?id1=image1&id2=image2

JavaScript Location Object

The location object is a property of the window and document object. The location object consists of properties that allow you to access and manage documents from a web resource. And in this section, we’ll explore the location object, its properties, and methods.

Properties

JavaScript properties involve the collection of values that are associated with a Javascript object. In this section, we’ll explore the location object’s properties.

AncestorOrigins

This property location.ancestorOrigin is a read-only property of the location interface that contains, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.

You can use this property to determine the behavior of the document based on what site or list of sites is framing it.

Hash

The hash location.hash of a URL returns the ID of the targeted page. When you use this property, it’ll return a hash followed by the ID of the page.

Host

The host property location.host returns the host of the URL. If the port number of the URL is non-empty, this property will also return a semicolon : and port number.

Port

With the location.port property, you can print only the port number of the URL. If the URL doesn’t contain an explicit port number, it’ll return an empty string ’’.

Hostname

If you want to access the hostname of a URL alone, you can use the hostname location.hostname property. Notice that this wouldn’t return the port number.

Href

The href property, allows you to view and manage a web URL. With the location.href property, you can access the full URL. You can also alter or change the value of href. For instance, you can use the location.replace() method to redirect href.

Origin

With the location.origin property, you can print the origin of the represented URL. This read-only property returns a string containing the Unicode serialization of the origin of the URL.

Pathname

The location.pathname property, allows you to access the pathname of your URL. If the pathname is empty, this will return an empty string ””.

Protocol

With the protocol property location.protocol, developers can manage the protocol scheme of the URL of interest.

Methods

JavaScript objects have a lot of methods, which lets managing and accessing objects straightforward. Here’s a list of JavaScript location methods.

Assign

The assign method assign(URL), allows the loading and display of the resource, at the specified URL. For example, when a user tries to navigate to a URL, the assign(URL) method is called, to load and display the document.

If the assignment isn’t successful, because of a security violation, a DOMException of the SECURITY_ERROR is thrown. This can happen if the origin of the script call is different from the origin of the page.

Reload

The reload() method reloads the current URL. This method is called when you hit the refresh button of the browser.

Replace

With the replace button replace(), developers can replace the current resource with that provided in the URL. The difference between this method and the assign(URL) method is that after using replace(), the current page won’t be saved in the history session.

toString

The toSting() method is a read-only alias to the location.href property. With this method, you can print a string of the complete URL of interest.

What is Internet Protocol

A protocol is a set of rules or procedures for transmitting data. Internet protocol is a type of protocol that governs how data communication and exchange is done over the Internet. To communicate properly anywhere, the sender and receiver must understand themselves properly. This also applies to communication over the Internet. Therefore, the sender and receiver should communicate with the same protocol over the internet.

In internet communication, data is broken down into data packets — smaller bits. And the reason for this is for faster data transmission, which won’t be possible when huge data is sent in lumps. Each network protocol specifies how these data packets are organized and sent across the internet. For instance, different networks around the world have different data transfer rates, it is the protocol that manages the rules for the data packet size to be sent across.

There are different types of internet protocols. The Internet protocol suite is commonly made up of three layers.

Application Layer

The application layer provides user services like formatting messages so that the message from the user is in the acceptable format for the receiver. It also facilitates file transfer over the Internet. Protocols classified under the application layer are as follows:

• HTTP (HyperText Transfer Protocol): This protocol is in-charge of hypertext transfer over the world wide web (www).
• File Transfer Protocol (FTP): The file transfer protocol governs the transfer of files between client and server over the network. For instance, this protocol governs the transfer of files like images, and documents, over physical devices like computers. Where one computer serves as the client and the other the server.
• SMTP (Simple Mail Transfer Protocol): The simple mail transfer protocol ensures the smooth transfer of electronic mail (emails). Therefore, when an individual sends or receives an email, they communicate with this protocol.
• HTTPS (HyperText Transfer Protocol Secure): This is an extension of HTTP, it uses the SSL/TLS protocol for authentication and encryption.

Although they’re other protocols classified under the application layer, like the terminal network (TELNET) and secure shell protocol (SSH), etc. Let’s explore the transport layer.

Transport Layer

The transport layer ensures that the data transfer is smooth and seamless. For instance, the transport layer implements flow control, which provides a mechanism for the receiver to control the transmission speed. This is to avoid overwhelming the receiving node with data from the transmitting node.

• TCP (Transmission Control Protocol): The transmission control protocol is connection-oriented, allowing data to be shared in both directions. This way, if an error occurs it’ll be propagated to the sender.
• UDP (User Datagram Protocol): The user datagram protocol is connectionless. This method doesn’t allow for error checking, it also reduces the workload of opening a connection and terminating a connection.

Internet Layer

The internet layer ensures the smooth transmission of network packets to the link layer. It makes this possible, by sending data across different networks via routing.

• Internet Protocol (IP): The internet protocol has two versions:v4 and v6. But v4 is the first version. The internet protocol addresses host interfaces and encapsulates data into datagrams.

Data Link Layer

A link layer is a group of methods and communication methods in the link that is physically connected a host. For example, the point-to-point (PPP) protocol is used to create a direct connection between two communicating devices.

Conclusion

In JavaScript, we have libraries to work with all kinds of network protocols. For instance, there’s the HTTP library that allows you to communicate with the HTTP server. JavaScript also allows you to communicate and manage data from the server using HTTP methods. We also have the WebSocket library, that allows developers to communicate with the web browser using a TCP connection.

In this article, we have explored JavaScript location objects. We’ve discussed the properties, methods of this object, and how to use them. Next, we explored the Internet protocol suite, the different layers, and the different protocols in each layer.

Transmitting and transferring data over the internet is a very delicate subject. And this is because, if not properly secured, intruders can eavesdrop on conversations or even steal information. If you want to learn more about cryptography and data security, read this article on cryptography and how to deal with man in the middle attack.

So if your application transfers data over the internet, you should make sure that proper security measures are taken to make your products provide a better experience for your users.

But even if you feel like the proper decisions have been made, it’s always necessary to verify that this is indeed true and your users have a great experience with your product.

For us at SessionStack, optimizing every bit of our code has been crucial.

The reason is that our library gets integrated into web apps and collects data from user sessions, such as user events, DOM changes, network data, exceptions, debug messages, and so on. Capturing this data without causing any performance impact has been a challenge that we’ve successfully solved.

This data is then processed and allows you to replay user journeys as videos to optimize product workflows, reproduce bugs, or see where users are stuck.

There is a free trial if you’d like to give SessionStack a try.

Interested in more about JavaScript? Check out all “How JavaScript works” publications here.

How JavaScript Works: JavaScript Location Object And How Protocols Work was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

This is post # 76 of the series, dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a JavaScript application that needs to be robust and high-performing to help companies optimize the digital experience of their users.

Introduction

The job of web development involves the combination of many tasks like running a server, optimizing content, Deploying files to the server, minifying scripts and style sheets, and compressing images among others.

To make the job of web development faster and less difficult, web developers can make use of task runners to automate these tasks.

In this article, we’ll explore task runners, the advantages of making use of task runners, and then talk about Gulp task running tools. I am also going to use a quick example that you can follow to show how to make use of the Gulp tool.

What are Task Runners

Developing a web application involves some development tasks and processes such as a server running, caching, and content optimization among others. Most of these tasks require constant repetition, for example, each time you make a change in any of the files present in your project, you might be required to perform these tasks and this is quite time-consuming.

However, developers can make the execution of web development tasks faster and smoother by making use of Task runners. What are task runners? Task runners are simple tools that help web developers automatically run web development tasks that might require additional effort and time to run.

By making use of task runners you do not have to repeat web development tasks, they help you run these commands automatically.

Task runners can be used to do things like compile SCSS codes to CSS codes, and minify CSS codes for production among others.

Some good examples of task runners that we have are Webpack, Grunt, Rollup, and Gulp (which I am going to talk about in this article).

Web developers can also make use of npm scripts for task running purposes. NPM has several built-in scripts when it comes to tasks running and it can be used to run quite a large number of built-in tasks for developers. For example, you have the test script in package.json used for running tests in web applications. NPM also has the init script which is used for initializing a package.json file and the list continues.

In the next section, I am going to cover some of the advantages of using Task runners in your next project. This will help in inspiring you to include a task runner in your future projects or add it to your already existing projects.

Advantages of Using Task Runners

In this section, we’ll explore the advantages of using task runners in your application. And below are some of them:

Automate Web Development Tasks

The first advantage of using task runners is that they automate the tasks and processes involved in web development. with Task runners, developers will not have to worry about running commands that will involve tedious processes, as these tools are capable of running them for you.

For example, in building web application projects, developers might be required to manually compile SASS codes to CSS code, and also minify CSS codes each time there is a change in the code base of the project. But, if you make use of task runners you can prevent these tedious and time-consuming tasks, by using task runners to automatically run specified tasks whenever you make changes to your code base.

Ensure a Faster Web Development Process

Using task runners to automatically run web development tasks is important to ensure that web development processes do not take up a lot of time and eventually cost lots of money.

Since you don’t have to run most of the extra demanding tasks of web development, you get additional speed. Also, you get to prevent repeating particular kinds of tasks multiple times. So you can focus on less tedious and less repetitive tasks.

Most Task Runners Are Easy to Use and Understand

It is quite simple to use most task runners such as Gulp because they use JavaScript — a popular language for web development.

So, even though you have not used task runners before, you can learn how to use these tools quickly. And also, you can understand existing projects that use them.

Minification and Concatenation

Although the process of minification and concatenation may sound as a simple task to most developers, a simple mistake from these tasks may lead to breaking things up in your project. And this might result in time wasting and may be loss of money.

But the use of task runners guarantees to solve a greater part of this problem by automatically running the tasks that will involve the minification and concatenation of project codes.

Simple-to-use plugins

Some good task runners also have easy-to-use plugins that could be implemented to make task execution faster and easier.

You may not have to worry about how to use these plugins as most of them are quite user-friendly and can be applied to your web application project with ease.

So, these are the major advantages of making use of task runners. But we are yet to take a closer look at some of the good examples of task runners that we have, and as I mentioned earlier we have great task-running tools like Gulp, Webpack, Rollup, and even Grunt.

In the next section, I will cover the Gulp task running tool and show how you can use it in your projects. So let’s begin by learning about Gulp and then wrap things up with a quick demo.

What is Gulp

Gulp is an open-source JavaScript tool used by developers to automate web development tasks. So in simple words, you can say Gulp is a task runner.

As a task running tool, Gulp, uses Nodejs as its platform. So to use Gulp you have to download Nodejs on your machine and follow the necessary setup procedures to install it.

With Gulp, you can do the processes of minifying CSS, HTML, and JavaScript files automatically or convert SCSS files to CSS files automatically by setting up Gulp tasks.

In the next section, we will look at an example that will explain how Gulp works and how you can use it in your project or implement it in your old projects.

How to Use Gulp

In the previous section, I explained what the Gulp tool was and what it is used for. Now in this section, we will elaborate with an example that explains the usage of the Gulp tool. We will use Gulp to compile a SASS code to a CSS code.

Using SASS instead of vanilla CSS allows frontend developers to gain access to many great features such as writing cleaner codes with less CSS etc.

But most browsers do not have support for SASS codes, so to make use of SASS code, you first have to compile your code into a CSS file so that the browser can read and apply your stylesheet to your web pages.

In this section, let’s see how Gulp can help us compile our SASS codes into a CSS file and then apply our styles to our web page.

As I mentioned earlier, you need to have Nodejs in your machine because we will make use of NPM — a node package manager that gets installed together with Nodejs.

So if you do not have Nodejs in your machine, visit the official Node Js website here, and download the latest stable version. After that, open up the Nodejs file and run the necessary setup processes.

To check if you have properly installed Nodejs in your system, run the command below:

node -v

The command above will give you the version of Nodejs installed in your machine. But if you don’t have Nodejs on your machine, you will get an error message.

After installing Nodejs on your machine, install the Gulp CLI.

Note, this is important for us to actually install Gulp packages and also run Gulp tasks. So to install the Gulp CLI, run the command below:

npm install — global gulp-cli

You can verify if you installed the gulp-cli properly by running the command below:

gulp — version

This command will print out the version of gulp-cli installed in your machine, but for the local version of Gulp it will print unknown. And this is because we have not installed that just yet.

The next step is to actually create a folder for our project and then add some HTML and SASS files.

So create the project folder with the command below:

mkdir Gulp-tutorial

I decided to call my project folder Gulp-tutorial, but you can call it anything you like.

Now, navigate into the project folder with the command below:

cd Gulp-tutorial

Inside the project’s folder directory, you have to create a package.json file, this file will contain all our project details and all the packages that we are going to install. To create this file run the command below:

npm init

And you will be prompted with some questions, like the version of the project, the project’s name, the project’s description, etc. You can choose to skip through and leave everything as default by hitting the enter button.

You now have a package.json file, you can open the project folder in any code editor of your choice, by running:

code .

You should see the package.json file as the only file present. Now let’s add some HTML and SASS files. So create another file in the root of your project folder, and let’s call it index.html. But you can call it anything that you like.

This file will contain the HTML for our project, and I link it to the CSS file — for styling using the link tag.

So add the code below to your index.html file:

Next, we need to add the styles for our project. Create a folder named Sass and create a file ending with a .scss extension inside it. Now, add the following code to the .scss file:.

Go ahead and save the file. Open the application with a browser. You should see that your styling did not work. Thus they were not applied.

And this is because SASS is not recognized by the browser. So to use SASS codes in your projects, you first have to compile them to CSS codes, and this is where the use of Gulp comes in.

Now let’s install Gulp as a dev-dependency in our application. In the terminal, navigate to the project folder directory if you are no longer there and run the command below:

npm install — save-dev gulp

To confirm that you have Gulp installed, run the following command

gulp --version

This time you should see both the gulp-cli version and the local version of Gulp itself.

Alternatively, you can go into the package.json file and check under the devDependencies. And you will see the version of Gulp installed.

For our example, we need the gulp-sass package from npm. And to install this package run the command below:

npm install sass gulp-sass — save-dev

Note that this tutorial covers codes that are applicable for version 5 of gulp-sass and version 4.0.2 of gulp.

From version 5 of the gulp-sass package, you need to install a sass compiler to use gulp-sass. So the command above will help you install gulp-sass and a sass compiler.

The next step you need to take is to create a gulpfile.js file. And this is where all the tasks that we want to run will be added.

Also, note that you have to use the same name for this file because failure to do so will make it impossible for Gulp to find your gulpfile and this will lead to errors when you execute Gulp commands on the terminal.

Inside the gulpfile.js file add the following code to import Gulp, add a sass compiler and then add your task.

In line 1 we required Gulp into our project and passed it into a variable called Gulp. Then in line 2, we required the gulp-sass package that we installed using NPM. Lastly, we imported our sass compiler.

From lines 5 to 9 we created our task. On line 5 we created a task called sass and on line 6 we asked Gulp to take codes from our sass file which is in the sass folder. Notice that in the code above I made use of * followed by .scss. This simply tells Gulp to watch every file inside the sass folder with a .scss extension. You can also be very specific by removing the * and replace it with the name of the file you want instead, for example, style1.scss.

Now on line 7 we simply want to log out any error that might occur in the process of executing our command.

Finally, on line 8 we asked Gulp to compile our sass codes and store them in a .css file inside a CSS folder that we won’t create. But Gulp will help us create them automatically.

Now save the file and run

gulp sass

In the Command Line Interface, you should see an output like this:

If you look at the folder structure in your code editor, you should see a CSS folder with two CSS files: style1.css and style2.css as seen below:

Now, I want you to notice something: if you open the application in the browser again, you should see that all your styles have been applied. Great this is how Gulp and other task runners help us run web development tasks automatically while making our job as web developers easy and fast.

Conclusion

Web development involves the combination of time-consuming, important tasks that can break down an entire project if executed improperly.

Task runners as web development tools, were introduced for the sole purpose of making the job of running web development tasks smoother and a little bit less complex.

Modern web application bundlers such as Webpack can also be configured to run web development tasks automatically using NPM scripts.

In this article, I talked about what a task runner is, and the different types of task runners. Then I covered what Gulp is, and what it can be used for, and also I elaborated with an example that shows how a web developer can use Gulp in his/her next project — where we made use of the Gulp tool to compile a SASS file to CSS file to style our web page.

Task runners like Gulp make it much easier for software to have efficient and high-performing code. And since we all like to apply new technologies & upgrade our code so even if we feel we’ve tested everything before release, it’s always necessary to verify that our users have a great experience with our product.

A solution like SessionStack allows us to reply to customer journeys as videos, showing us how our customers actually experience our product. We can quickly determine whether our product is performing according to their expectations or not. In case we see that something is wrong, we can explore all of the technical details from the user’s browser such as the network, debug information, and everything about their environment so that we can easily understand the problem and resolve it. We can co-browse with users, segment them based on their behavior, analyze user journeys, and unlock new growth opportunities for our applications.

There is a free trial if you’d like to give SessionStack a try.

Interested in more about JavaScript? Check out all “How JavaScript works” publications here.

How JavaScript Work: What are Task Runners + Introduction to Gulp was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

We are thrilled to announce that SessionStack is now Leader in the Session Replay category on G2! This is the best proof of our team’s dedication to providing the best-in-class Session Replay software — and much more.

Our customers’ feedback played an important role in helping us achieve this milestone. We would like to say thank you to all of you who provided valuable feedback and helped us to become Leader in the Session Replay category. We believe our approach is second to none, and we take pride in providing our users with a pixel-perfect, user-friendly, and reliable tool to help them understand their users better.

Our unbeatable Support team also deserves a special mention as they played a crucial role in making the SessionStack discovery journey a breeze for our customers. 👏

In addition to leading the way in Session Replay, we are also proud owners of the High Performer status in the Co-browsing and Product Analytics categories. This is a clear indication of our commitment to excellence in all segments of the industry:

1. Leader in Session Replay
2. Leader Small-Business Session Replay
3. Leader Europe Session Replay
4. Leader Small-Business Europe Session Replay
5. High Performer Co-Browsing
6. High Performer Product Analytics
7. High Performer Mid-Market Session Replay
8. High Performer Mid-Market Europe Session Replay
9. Users Love Us

We are thrilled to have you as part of the SessionStack family. Thank you again, and we look forward to continuing to provide you with high-value digital experience analytics! 🔥

Check out the G2 grid reports here >>

About SessionStack:

SessionStack is a Digital Experience Analytics platform that helps you track user behavior, spot friction points and conversion opportunities, enhance onboarding and support procedures, and visualize user trends to drive growth. You can easily integrate SessionStack with the tools you’re already using to improve your bug fixing, UX analysis, product adoption, and customer support.

SessionStack: Leading the Way in Session Replay was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article will cover:

1. User Trends: Most Clicked Elements
2. Funnel Summary
3. Matching Sessions in Funnel Summary — Coming Soon
4. Custom Events

1. User Trends: Most Clicked Elements

Back in October in our blog posts, we discussed the Rage Clicks chart and Dead Clicks chart. Now we want to share with you our next new chart called Most Clicked Elements.

You can use it to determine which elements of your website or product are the most interacted with. Furthermore, the new visual can help you figure out which product features are regularly used. All of this comes at the expense of zero-effort configuration.

1.1 How to Read the Data on the Chart

Each bar that is shown on the chart includes four main components:

• An HTML element that has been interacted with. If available for the element, its text is presented on the chart, too.
• The CSS selector of the HTML element is always shown.
• The URL address of the page where the element is located. This will be useful if you have two buttons with the same text on them from different pages.
• Clicks and Users: count of the clicks and users who have clicked the element. These statistics can be visualized in both absolute values and percentages. Turn on the percentage option, as shown below, to see what percentage of your segment’s users (or all users if no filtering criteria are used) are performing these clicks.

1.2 Creating a User Segment Directly from the Chart

A feature of our new Most Clicked Elements chart is the ability to create a user segment quickly and easily. To do this, simply click the unique “Add Filter” icon for any row that you believe merits more examination. You may do this to see which users interacted with a particular element, to view their matching sessions, or to look at the remainder of the User trends for those users.

Check the image below for more details.

2. Funnel Summary

Shortly before the end of 2022, we announced our instrumentation-free conversion funnels. Now, we’ve taken it a step further by delivering a funnel summary.

Funnel Summary assists you by providing:

• The conversion rate and drop-off rate for each funnel step;
• The exact users’ list — converted and drop-offs. A user is considered converted once they have completed all funnel steps from start to finish.
• Quick access to the users’ sessions in chronological order, from the most recent to the oldest;

How will Funnel Summary help you analyze user flow? The key answer is in the user’s list. Conversion funnels incorporated with users’ session recordings give you answers to both questions:

• How many people haven’t converted? (quantitative data)
• Why have they left the desired user flow? (qualitative data)

The Funnel Summary is located directly beneath the funnel step builder and funnel chart. To focus on the summary, you can collapse both the funnel steps and the chart, as shown below. The funnel steps are listed on the left side in the same order that you configured them in the builder section. The list of converted users and drop-off users for the selected step is displayed on the right side.

As a DXI platform, SessionStack provides both quantitative and qualitative data, and conversion funnel analysis supports you in understanding and optimizing user behavior.

3. Matching Sessions in Funnel Summary — Coming Soon

Currently, all user sessions (matching and non-matching funnel step) are displayed in both user lists — converted and dropped. Soon, you will be able to filter out only the sessions that are relevant to any of the funnel steps. This significantly reduces the time spent finding the relevant user sessions.

4. Custom Events

The segment filters Visited URL and Clicked Element can be used to identify and analyze the usage of almost any feature in your product. Through our Rage Click and Dead Click filters you can examine the frustration points for your users while interacting with your platform. And that is all accomplished with a zero-effort configuration. However, there could be some situations in which our built-in supported events are insufficient to perfectly describe your users’ behavior. In such circumstances, you must employ specially created events — custom events.

4.1 Custom Event Definition

A custom event is one that has a name and a set of properties (parameters) that you define in order to collect information specific to your business. Our custom events are JavaScript based and they have a pretty simple structure: SessionStack.trackEvent(eventName, eventProperties).

The first argument (eventName) is required and describes the name of your event. In contrast, event properties is a JSON object containing all the information you want to pass to SessionStack.

4.2 Example of Custom Event

Here’s an example of a custom event to help you understand them better.

Let’s assume you want to filter users on your e-commerce site based on the items in their shopping cart. Upon “Add to cart”, we can add the following custom event:

SessionStack.trackEvent(“Add to Cart”, { itemName_str: “Socks”, price_real: 5.99,color_str: “Blue”,quantity_int: 3, isUserRegistered_bool: true })

In the example above, “Add to Cart” is the event name, itemName_str, price_real, color_str, quantity_int, and isUserRegistered_bool are event properties with their values on the right.

4.3 When to Use Custom Event?

Custom events can be used in one of the following cases:

• When you’ve addressed the key events for comprehending user behavior and using the SessionStack-supported events isn’t enough to build the desired ones.
• When you want to segment your users by events that happen in third-party tools such as external chat or external ticketing system.

4.4 Custom Events in Segments and Funnels Dashboards.

Once we have collected your custom events (at least one user has a session with these events), they will be available in the Segments and Funnel dashboards, as shown in the images below.

The filter icon on the right is used to select the properties of the custom event. Look at the image below. Using event properties for your search criteria is optional, but it makes your filtering criteria more sophisticated and granular.

4.5 Custom Events in the Session Player

The session player also displays custom events. They can be found on the left side of the event timeline. The custom-built events can be easily filtered-out on the left side either by using the option for it or directly using the search bar. Check the next image.

We hope you find these feature updates helpful. We’d love to hear your feedback.

If you still haven’t had the chance to try out SessionStack, get your free plan here.

The latest SessionStack release includes Most Clicked Chart & Funnel Summary & Custom Events was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article will cover

1. What is a funnel and why it’s important for conversion rate optimization?
2. Definition of funnel event steps “In this order”
3. Visualizing funnel steps across all sessions or within one user session
4. How to configure a Conversion Funnel in SessionStack?
5. Wondering which option to use: “Within the same session“ OR “Across all sessions“?
6. Funnel chart summary
7. Coming soon: a detailed funnel conversion summary. Stay tuned!

Before the beginning, if you still haven’t tried SessionStack, now you can start in minutes with our new Free plan. Get 1500 free sessions/month and all features.

1. What is a funnel and why it’s important for conversion rate optimization?

We have a more general definition of a funnel at SessionStack.

A funnel is a set of ordered expected steps that, in the best-case scenario, your user will follow from beginning to end to achieve a business milestone (conversion). In the SessionStack platform steps in a funnel can be end-user actions (mouse clicks, keyboard interactions, scroll, touch events) or end-user navigations to defined locations (URLs), or a combination of both. All of these events, whether user actions or navigations occur sequentially, and each step that we want to measure is defined in our funnel accordingly.

It is unavoidable that not all of our users will follow this flow from start to finish. To achieve product growth, we must investigate user behaviors and optimize the deviation from the desired action. This is best done with funnel analysis, as funnels are the best tool to visualize user flows and analyze the conversion rate of each step. Especially combined with session replay, where you can literally see and understand the user actions of funnel converters or drop-offs.

However, traditional analytics funnels require instrumentation, where you can only measure a static predefined set of steps you qualify as the best customer journey. This causes a significant analytical handicap especially in more complex digital products, with the constant development of new features.

Here is where SessionStack Funnels are truly useful. Since our platform relies on the auto-capture of data it can provide instrumentation-free funnels that are easy to set up and work retroactively. So you can have your conversion analysis right away, starting from any point of the user journey, unfolding every hidden step in between.

You can easily analyze and optimize the conversion process from any login and onboarding, through complex feature adoption, or subscription. From any product page view through the shopping cart steps, till purchase.

In brief, the instrumentation-free Funnels of SessionStack are providing us with the ability to:

• Visualize any desired flow that we want our users to go through without the need for initial preparation;
• Track how many of our users complete each step and how many drop out;
• Investigate the causes of drop-offs and understand better the behavior of converters by replaying the sessions of both segments and following their trends
• Based on the findings, we can fix the identified issues and then verify our conversion optimization effort by comparing the results of both segments before and after

2. Definition of funnel event steps “In this order”

A funnel visualization is a series of an ordered set of events, which means that the event described in step one occurs before the event described in step two. However other events from the user journey may occur in between. In SessionStack the Funnel configuration setting “In this order” follows precisely this example and it’s used to describe only the mandatory steps in a journey in order to achieve the desired business goal (conversion).

To get a better picture of the setting “In this order”, consider the following scenario.

A customer is looking for green handbags on an e-commerce website. They are adding a handbag to the cart and then proceed to the checkout page. The first step is to visit a product page, then add an item to the cart, and the third is to navigate to the checkout page. However, before proceeding to the payment, the user may examine several sets of shoes and belts. Using the setting “in this order” we’ll conduct a funnel analysis specifically of the described process. If we see a significant decrease from step one to steps two and three, we can isolate drop-offs, replay their sessions and optimize our purchase flow, so we keep users focused on finishing the order.

3. Visualizing funnel steps across all sessions or within one user session

So far, we’ve discussed what the sequential order of events in a funnel means. Now let’s review the definition of session order type in SessionStack Funnels. There are two options we support:

• “Across all sessions”: will search for a set of funnel steps that occur across all sessions of a user

Consider the following scenario. There is a new user to the e-commerce site. They navigate to the desired product (the first step of the funnel) during their first session and in the fourth session, they decide to finalize their purchase (the last step of the funnel). Both events, Visting that particular URL and pressing the button “Purchase“ are part of the funnel configuration. Once the funnel is built, the search for events will be performed for all users across all of their sessions, and our newbie will be listed in this funnel.

• “Within the Same Session“: will search for a set of funnel steps that are completed in one user session

In the preceding example, if we select the “Within the same session” option, our newbie in the e-commerce site will not be listed as converted because all steps were not completed in the same session.

4. How to configure a Conversion Funnel in SessionStack?

The Funnels dashboard is in the main menu on the left side. There is a new icon as shown below:

Once you are there, press the “New Funnel” button and you will go to the funnel creation page where you can configure your steps. The general funnel settings and visualization is shown when you add at least two steps. There is a default selection of general settings for your convenience.

• The default selection for Session order type is: “Within the same session”.
• Selected users are: “All users“. Soon we’ll include the ability to select and compare previously saved segments from our primary dashboard (Segments).

As we mentioned above, one of the advantages of SessionStack DXI is that it’s an instrumentation-free platform. You don’t need to predefine events, as it’s widespread with traditional analytical tools. All you have to do is select events from the Search filter list. We currently offer the four events listed below, but we are constantly adding new filters:

• Visited URL
• Clicked Element with contextual filter: Visited URL
• Rage Click with contextual filter: Visited URL
• Dead Click with contextual filter: Visited URL

Each chosen event is a separate step of a funnel. When at least two steps are added, a funnel chart will be visualized. Each new step will be reflected in the funnel chart automatically.

5. Wondering which option to use: “Within the same session“ OR “Across all sessions“?

The funnel setup covering a user experience “Across all sessions” is better suited to analyzing long-term processes in SaaS products. Usually, it takes much more than one session for a user to be onboarded to a complex product. Adoption of all its features takes even longer. In this case, searching for events across all sessions of a user helps us fully visualize their journey and conduct a meaningful conversion analysis.

While funnel event search “Within the same session” is better suited to analyzing a short-term conversion process, for example in e-commerce sites, aiming for impulsive purchases. In such cases, the business goal is to turn a potential customer into a paying one right away.

At SessionStack we use both options. It helps us draw better conclusions about how to better help our users both short and long-term.

6. Funnel chart summary

Currently, we provide general information about converted users (who have completed a specific step) and drop-off users (who have abandoned a specific step). All of these figures can be examined for each step by hovering the mouse over each bar. The dark blue bar represents successfully passed step users, while the light blue portion of the bar represents dropped-off users.

7. Coming soon: a detailed funnel conversion summary. Stay tuned!

A more detailed summary with lists of converted and dropped-off users and their relevant sessions will be presented soon. Thus allowing you to further investigate the causes of drop-offs or conversions, watch relevant sessions of both user groups and discover conversion opportunities in your funnel.

SessionStack instrumentation-free Funnels significantly enhance our feature set of product management solutions. In our roadmap, we plan to continue their upgrade in order to provide even better capabilities for funnel analysis.

Interested in SessionStack? Book your demo now or get started in minutes with our new Free plan.

Happy with SessionStack? Leave a review and get a Gift card!

We hope you find these feature updates helpful. We’d love to hear your feedback in the comments below.

The latest SessionStack release includes instrumentation-free Conversion Funnels was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article will cover

1. Definition of dead click
2. Using the Dead Click event filter
3. How are the dead clicks recreated in our Session player
4. Dead Click Chart

1. Definition of dead click

In our blog post from September, we discussed what rage clicks are and how to search for them in the SessionStack app. Today, we’d like to go over another source of frustration: the dead click.

Dead clicks are clicks or taps that have no effect on the page such as

• DOM events;
• URL changes;
• Console Log Events;

Often such behavior leads to another frustration signal such as a rage click. Therefore it’s essential to look proactively for dead clicks in user sessions of your product as they are an indicator of poor UX.

Some of the reasons for dead clicks could be:

• A text appears to be a link or clickable but is not;
• An image appears to be expandable, but it is not;
• A button does not work correctly;

2. Using the Dead Click event filter

To apply the new Dead click event filter in the SessionStack DXI platform navigate to the Segments dashboard in your project and open the filter drop-down menu as shown below:

Use any of the three options: “Anything”, “Text is” and “CSS Selector is” in accordance with the cases listed below:

• When unsure whether your users have any dead clicks, select the option: “Anything”.
• When you know that users have issues while interacting with a particular HTML element and you want to check if there are any dead clicks on it, use the option: “Text is”.
• And if the HTML element does not have text on it, use the option: “CSS Selector is”.

3. How are the dead clicks recreated in our Session player

The SessionStack platform also recreates dead clicks in the session player as part of the session event log. As a second stage, you can segment all users having dead clicks in their sessions using the fast copy option for the CSS selector of the element and paste it into the input field of the event filter Dead click in the Segments dashboard.

Are you interested in the Dead Click event filter? Contact our team to request the feature.

4. Dead Click Chart

In our previous blog update, we introduced the Rage Click chart. Today we want to show you our new Dead Click chart. To demonstrate how to use it, consider the following example.

The “Submit” button as a part of your registration flow, is not working, which significantly affects the acquisition rate of new users. SessionStack can assist you in quickly determining this. All you have to do is log into our app and use the Dead Click — filter & chart features. The fastest way is to look at the Dead Click diagram first. Check which of the major pain points is causing a poor user experience. Add the users with dead clicks on the “Submit” button from the chart to a new segment and inspect the exact list of users with that particular issue. Explore the sessions of the users from there. To avoid watching all users’ sessions from beginning to end, use our “Only matching sessions” option in conjunction with the quick filter Dead Click in the session player.

Another method for determining the number of dead clicks on the “Submit” button is to use the chart’s “Add Filter” option and copy the automatically added CSS selector in the segment filters. After that, paste the copied string in the search field as shown below and go through the listed dead clicks. All other clicks (rage & regular) will be filtered out and not shown.

Interested in SessionStack? Book your demo now or get started in minutes with our Free plan.

Happy with SessionStack? Leave a review and get a Gift card!

We hope you find these feature updates helpful. We’d love to hear your feedback in the comments below.

The latest SessionStack release includes The Dead Clicks filter & chart was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article will cover

1. User Trends: Rage Click chart
2. Creating a user segment directly from the chart
3. How to get the most out of the Rage Click chart
4. How to filter users' active time on long sessions and find users with specific session duration

1. User Trends: Rage Click chart

In our previous blog post, we discussed our event filter Rage Click which helps you with finding frustration points for your users. In order to enhance our DXI analysis, we released the Rage Click chart. Using both gives you a clearer picture of what and where your users are struggling while using your product.

The new graph in our Segments dashboard helps you:

1. First and foremost, determine whether your users perform rage clicks
2. Second, if there are rage clicks, which elements are causing the most frustration
3. Third, how many users have been affected by this
4. Last but not least, which are the pages causing the rage clicks

By following the three simple steps outlined below, you can get instant value with a zero-effort configuration:

Step 1) Log into the SessionStack app.

Step 2) Navigate to our primary dashboard — Segments

Step 3) Check our new chart in User Trends

2. Creating a user segment directly from the chart

Another useful feature of our new chart Rage Click is the ability to quickly and easily create a user segment. To do this, simply click the unique “Add Filter” icon for any row that you believe merits more examination. You may do this to see which users rage clicks on a particular element, to view their matching sessions, or to look at the remainder of the User trends for those users.

Check the image below for more details.

3. How to get the most out of the Rage Click chart?

Consider the following scenario. As a product manager, you want to know where users are having the most trouble and confusion. You don’t have any assumptions about which are the HTML elements causing frustration points such as rage clicks. One way is to use our segment filter Rage Click with the option “Anything”. However, the simplest method is to use the chart related to those clicks. Examine the list of elements with rage clicks. Use our option to show the data in percentage, too. This will help you to understand what fraction of all your users or segment ones are affected.

You notice that one of the elements causes a large number of rage clicks, but the number of people affected is small, or the clicks are performed by just one person. Directly from the chart, add this element to a segment.

Examine the user(s) with the frustration signals. Examine their matching sessions. To save time from watching too-long sessions, only go through the rage clicks event steps. Or you can watch the entire session to get a complete picture of the user’s behavior — what steps are taken before the rage clicks. Look for errors in our console and network tabs in the session player. It is possible that the button responsible for those clicks is malfunctioning and throwing exceptions in the console.

But what if the rage clicks are actually false positives? People interact with a pagination element, which is regarded as a source of frustration. Remove that specific element from the analysis to avoid false alarms. More on this can be found in our September blog post. Once this configuration is in place, the next time a user interacts with the paging, this activity will not trigger a rage click.

Interested in the Rage Click chart? Contact our team to request the feature.

4. How to filter users’ active time on long sessions and find users with specific session duration

Have you ever wondered if you can use the session length to determine who are your most active and keen on your product users? Let’s face it: long sessions do not always imply that users are active throughout the session and satisfied with your product. To get this insight, use our new Segment filters: “Active Time” and “Session Length”

A user is considered “active” when they perform any of the following types of user action events:

• Mouse events
• Keyboard events
• Touch events
• Scroll
• Navigate (in-tab and cross-tab)

If the user is interacting with the page with any of the above user action events, the SessionStack DXI platform classifies that part of the session to be active. Then we add up all active periods during a session to get a single value: active time.

Let’s assume the typical length of a session for your product is more than 10 min. You want to look at all users who have sessions greater than 10 min and have been active for more than 5 min. To find how many users are meeting these criteria, use our “Active Time” filter with the combination of the other new one “Session Length” as shown below.

The filter will list all users who have at least one session with a duration greater than 10 min and with an active time bigger than 5 min. To examine further what these sessions are and what the users have done while being active, open the right-side panel with the list of all sessions and use the “Only matching“ option for checking only the relevant sessions.

Each session shown in the list has two separate properties: Length and Active Time. So even when you have no idea what is the typical duration of the user activity, you can adopt the value from the relevant property. Then use this value to search for all users matching the criteria.

Interested in SessionStack? Book your demo now or get started in minutes with our Free plan.

Happy with SessionStack? Leave a review and get a Gift card!

We hope you find these feature updates helpful. We’d love to hear your feedback in the comments below.

The latest SessionStack release includes a Rage Click chart & new Session filters was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

This is post # 73 of the series, dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a JavaScript tool for developers to identify, visualize, and reproduce web app bugs through pixel-perfect session replay.

Introduction

With the recent rise in the adoption of microservice architecture, we have seen more containers being used. With that, these containers might range to hundreds and even thousands of them. It is either mismanaged or impossible to manage that amount of containers. Traditionally, you could use Docker-compose to manage several containers simultaneously but this is not feasible if you have a lot of containers with much traffic and downtime.

This brings about a container orchestration — Kubernetes. There are a few alternatives to Kubernetes which are AWS EKS, GKE, Docker-compose, etc.

In this article, we will be looking at how to deploy a Nodejs application to Kubernetes. We will be looking at a brief overview of how Kubernetes works, build a simple web server, choose an image with Dockerfile defined, build the image and push it to a registry. After that is done, we define the Kubernetes Deployment object.

Prerequisites

• Docker should be installed on your system
• A Docker hub account is required
• Nodejs should be installed on your system
• Minikube should be installed on your system
• Knowledge of Javascript and Nodejs is required
• Prior knowledge of Kubernetes is a plus but not necessary

Kubernetes and a brief overview

A clear definition of Kubernetes is that it is a container orchestration tool that helps manage and organize your containerized microservices while scaling them. At scale, we mean horizontal/vertical scaling, auto-healing, load-balancing — high availability, and disaster recovery — rollbacks. The first thing we need to ponder with is our containers. These containers are more or less isolated and need to be properly managed; load balanced, distributed, and connected to the outside world.

Take Kubernetes as a captain on a ship that manages both the ship and the containers on it. It can identify each container on its ship by a label referred to as a “nametag”, thereby querying it using that nametag. On the ship, the container might have to be placed inside a “Pod” which can hold some containers that are related. These Pods are the smallest units in Kubernetes(our ship) and they’re executable i.e they can run the containers in them.

In Kubernetes, each of these Pods can decide to replicate themselves, the replicated pods can be more or less but they must be running at every point in time. This management can only be done by the Replication Controller. It handles monitoring, manages the Pods lifecycle, has a template for each of the Pods which can help replicate them, and can scale the Pods horizontally and vertically.

Also, Kubernetes has what is called ‘Service’ which acts as a bridge between the Pods in a Node. With this, Pods can discover other Pods. Let’s take, for example, a file-compressor backend service with 3 replicas; do not forget these backend servers are containerized each and inside a Pod, the frontend doesn’t know which Pod it is but the Service handles the load balancing for that.

To summarize this so we go into the main reason for this article, these are the important Kubernetes vocabulary:

Node

• It runs the Pods
• Communicates with the master
• Has a kubelet

Pods

• Are within a Node
• Executes the containers in it
• Has 1+ containers in it

Services

• Load balances
• Provides communication and discovery with other Pods
• Identifies Pods using a layer selector

Deployment

• Indicates how many pods should run simultaneously
• Manages Pods in case any dies

Building a simple Nodejs server

We are on our way to deploying a Nodejs server to Kubernetes, but the first thing we have to do is to build a simple application.

The first step is to create a project folder, and from the project folder, create a new Nodejs application using this command:

In the root directory, create an index.js file, and install the needed nodejs package by running:

Next, in our `index.js` file, we create a simple server that will only return ‘Kubernetes Deployment” as text.

Update the scripts section of your package.json file should look like this:

Now, by running `npm start` your server should be started and ready to be in a Docker container.

Containerized server

Since we will be using Docker for this, I assume you have it installed, but if not, please follow these guidelines to install Docker.

And to dockerize our app, create a Dockerfile in the root directory by running this command:

In our Dockerfile, there are a few things we will need to define and the first and most important one is the docker image. Since we are using Node for this application, our image will be based on node:

If you noticed, we used the node:18-buster-slim node image in the code above, but this can be any image of your choice. It doesn’t matter here now.

Next, we define an app directory in our container /usr/src/app, The directory could be anything but it is common to define it inside the /usr directory.

And, we use a wildcard to copy all files that are .json so it covers the package.json and package-lock.json.

Furthermore, we install dependencies and copy all files in our local directory into our container. Do not forget to create a .dockerignore file to ignore huge folders like node_modules.

Lastly, we expose the port 8080 and set the base command.

Following this, we will build the application. But before building the application, log into your docker hub account and create a new Docker hub repository called kubernetes_deploy. Then you can build the Docker image by running:

Note: use your docker hub account, not mine(vectormike) to build your docker file.

When this is successful, you can run the image that your application the container works:

Finally, push this image to your docker hub so it is accessible in Kubernetes:

If you are still unfamiliar with the above process, please refer to this guide on how to dockerize a Nodejs application.

Deployment with Kubernetes

For the sake of learning how to deploy to Kubernetes, we will have to use minikube for this. Minikube is typically meant for testing and running locally on your system. It helps you create a single node cluster inside a VM on your machine rather than a production-ready master node. It is equally easy to set up using its documentation.

Our first step here is to create a deployment.yaml file in the root directory and define our resource for deployment in the YAML file.

So, this file will contain the desired Deployment state for our application. So, if the desired state is 2 — — which is two Pods, and one of the Pods dies, it creates a new one automatically to replace it.

Also, the Service definition in the deployment.yaml file above is to enable communication between each pod and outside the cluster.

So, in our deployment.yaml file, our Service and Deployment definition will look like this:

Lastly, we deploy using the command:

As I stated earlier, our deployment will be in two parts: Services and Deployment.

The Deployment section states that we want five replicas of the Pod specified in specs.replicas with the first Pod as a template.

Inside of those Pods, we have our single container that contains our Nodejs application, and it is going to pull that image from the docker hub and run it — exposing port 8080:

In the Service section, we declare the name of the service and select the app from the `Deployment` section we defined for it to be accessible from the cluster. So in summary, our service is going to target the Pod myapp:

The ports are where it is a little bit confusing But, we are using a LoadBalancer, and within the cluster, each Pods are accessible using port: 8080 that will then target the port: 80. So for us to access the cluster from outside, we use the nodePort: 30001.

Let’s access our service using this command:

It should display the URL you will have to access from your browser.

Minikube also provides a GUI to view stats and anything else rather than using the API service or Command line. To do so, run this command:

Conclusion

This article taught us how to deploy a simple Nodejs application with Kubernetes. This is pretty basic just to give you an overview of Kubernetes and deployment is configured. In another article, we will look at how to deploy the same Nodejs application which has a database, and more about volumes in Kubernetes.

You have to be very careful when you use Kubernetes and minikube because the implementation can be tricky.

So even if you feel like the proper decisions have been made, it’s always necessary to verify that this is indeed true and your users have a great experience with your product.

A solution like SessionStack allows us to replay customer journeys as videos, showing how our customers experience our product. We can quickly determine whether our product is performing according to their expectations or not. In case we see that something is wrong, we can explore all of the technical details from the user’s browser such as the network, debug information, and everything about their environment so that we can easily understand the problem and resolve it. We can co-browse with users, segment them based on their behavior, analyze user journeys, and unlock new growth opportunities for our applications.

There is a free trial if you’d like to give SessionStack a try.

Interested in more about JavaScript? Check out all “How JavaScript works” publications here.

How JavaScript Works: Deploying a Nodejs application with Kubernetes was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.

One of our new features is the “Rage Click” segment filter. It allows you to search proactively for users and their sessions with friction points. You no longer need to watch all available sessions for a single user to determine if the user had a smooth user journey in your digital product.

The second feature update is in our Segments dashboard — a new search option for the existing “Clicked Element” event filter.

This article will cover:

1. The Definition of rage click
2. How to use the main event filter — Rage Click
3. How to search for rage clicks
4. Custom option for excluding HTML element from rage clicks
5. Clicked Element with search option by “Text”

With our latest SessionStack release we move a step further in our goal to provide you with enhanced product analytics tools, combining qualitative and quantitative data. Back in August in our blog post, we introduced to you our User Trends — a tool for quantitative analysis. Now, we want to deliberate more about our most recent event filter in Segments: “Rage Click”, but first let’s clear out what is really a rage click.

The Definition of rage click

A rage click occurs when a user performs multiple quick clicks on the same element in a row. Among the possible explanations are:

• The user does not understand which is a clickable element;
• Buttons, links, and icons do not function properly;
• Unable to click because of the invisible overlay above everything;

How to use the main event filter — Rage click

Our most recent event filter “Rage Click” is available with 3 options: Anything, CSS selector, and Text. You can find it in our Segments dashboard, under the search filters menu.

See the image below.

Consider the following example of how to use the Rage click segment filter:

You are aware that there is a problem with email sending, more specifically the button “Send“ does not work always since the most recent release version. If you want to check how many users have been affected by this issue, one of the ways is to use our event filter “Clicked Element”. However, such an event search will display all users who have clicked the “Send” button, both successfully and unsuccessfully. To refine your search use our new segment filter “Rage Click” with the option “Text is“: “send” as shown above. The option is case-insensitive and works with an exact match (need to define the whole text on the element). The search will show that one user has encountered the problem.

To examine which is the exact session of the user with rage clicks press on the “>” icon on the right side of the user line. On the newly opened right-side panel, you will see all sessions of the user listed in chronological order. The ones that meet the search criteria are marked with the label: “matching“. In our case, just one session out of three matches the “Rage Click” criterion. This can be viewed in the image below.

Opening the relevant session and checking the event time steps on the left in the session player will show a quick glance at the exact rage click events. No need to watch the whole session, just select the related events. They are easily recognizable by color and icon. The rage clicks are marked with a special icon and yellowish color as shown below.

How to search for rage clicks

It might be the case: that you are unaware of any existing issues with your product and simply want to see if there are any frustration points for your customers. This can be examined by the “Rage Click” search filter with the option “anything“. Using this combination will list you all users with rage clicks on any element and page of your product. By going through the matching sessions, you may spot some interesting patterns which can be examined further:

• How frequently does a particular rage click occur?
• How many users are affected?

This can be achieved by copying the CSS selector for the element that you are interested in and then using the CSS string for the configuration of the filter “Rage Click”. The process for obtaining a CSS selector for an element is analogous to that for the “Clicked Element” filter. Learn how to do this by reading this blog post.

After the configuration is applied then you can explore the first two trends: Users and Total Sessions for getting the answer to the questions above.

Custom Option for Excluding HTML Element as Rage Click

Sometimes the rage click can be misleading. For example, the user is clicking on a pagination element for the previous/next page. In order to exclude such false positive instances, you can specify the CSS selector of the HTML element in your project Settings menu and prevent rage clicks from capturing.

Clicked Element with search option by “Text”

In July, we discussed the event filter Clicked Element in our blog post — why and how to use it. Today we want to share with you a new option for the filter. This is the ability to search for HTML elements using text. The option works with a perfect match.

In the example below, we want to examine how many users are clicking on the button “Discard” when creating an email.

Follow the steps outlined below.

Step 1:

Select the “Clicked Element” filter from our Segments dashboard. Choose the “Text“ option. By selecting this, you can easily define the text on the button or any other HTML element. This will avoid dealing with complex CSS selectors like the one shown in the example. Remember that this is a perfect match. You must define the entire text, not just a portion of it. Don’t be concerned about the capital letters; the new option is not case-sensitive.

Example for complex CSS selector:

#checkout-form > div.checkout__user-inputs-wrapper > div.checkout__col.checkout__col — second > div.checkout__step.checkout__step — two > div > div > div.radio-wrapper.shipping-methods__item.snowspeedy_method-b.has-select.select-loaded > div.shipping-methods__select-wrapper > span.

Step 2:

Examine the user list. For sessions and user details, open the right-side panel of any user from the list. To list only the relevant search criteria sessions, use the toggle option “Only matching sessions”.

According to the example above, one user clicked the “Discard” button in two of all sessions. Going through the matching sessions can lead you to some further conclusions about the user behavior and experience in your product.

We’d like to take this opportunity to reveal our upcoming segment filter. It will aid you in your search for sessions with a specific duration.

Interested in SessionStack? Book your demo now or get started in minutes with our Free plan.

Happy with SessionStack? Leave a review and get a Gift card!

We hope you find these feature updates helpful. We’d love to hear your feedback in the comments below.

The latest SessionStack release includes: Rage Click & Search by Text for Clicked Element was originally published in SessionStack Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.