Co-authors : @Sreejith H Nair
In this blog, let us see how Instana monitors a multi-page website.
Before considering a multi-page website, let’s take a look at single-page websites. Simple, quick, and responsive single-page websites are one of the most well-liked online design trends to date, especially with the development of social media and mobile browsing. A website that has only one HTML page is known as a single or one page website. Single-page websites have fully loaded content on the first page, giving the user a more seamless and fluid experience. With a single-page website, visitors can either scroll down the page to access different content parts, or click navigation links that let them jump to specific locations on the page.
A multi-page website, on the other hand, contains multiple pages. You will be familiar with these websites, where clicking a link opens a new page. Think about Walmart, eBay, or Amazon. A single-page website template is only appropriate for certain projects where all the information a visitor needs to know is explained in one page. But, multi-page websites are appropriate for any type of business. In order to provide more detail on a subject, they are frequently bigger, more complex, and contain large amounts of information, which can be separated into several subsections.
The majority of websites have a multi-page design, especially news sites, blogs, and eCommerce businesses with several products, which employ distinct pages to divide material into categories. A mock-up website GrowMark with additional pages such as About, Services, Projects, Pages and Contact is shown here:
Let’s see how Instana can monitor this multi-page website.
Monitoring websites, also known as End-User Monitoring (EUM) or Real-User Monitoring (RUM), is a crucial tool for comprehending the online user experience.
The agent submits its findings to Instana in the form of beacons after being loaded asynchronously into the webpage. The dashboards for the website in the Instana UI contain this beacon data in aggregate form. The behaviour and speed of websites are explored using these dashboards. For more information on website monitoring, click here.
Click Add Website on the Instana Dashboard.
Add the name of any website to be monitored. Here, we are giving the name as GrowMark_Website_Monitoring, as we are monitoring the GrowMark website.
Obtain the website’s parent folder (example, GrowMark) to be monitored containing HTML files of all the pages.
Host the website on either of the Web servers:
a. Web server on Mac
b. Tomcat Web server
Here are the steps to host the website in Web server on Mac:
i. Add the website’s parent folder to the location /Library /WebServer /Documents.
ii. Run this command to start the web server:
sudo apachectl start
iii. Run this command to stop the web server:
sudo apachectl stop
iv. Search ‘localhost’ in browser to view the website.
Here are the steps to host the website in Tomcat web server:
i. Install Apache Tomcat.
ii. Go to webapps directory under TOMCAT HOME.
iii. Copy website parent folder to webapps directory.
iv. If Tomcat server is not running, run the tomcat from the bin directory under TOMCAT HOME and double click on startup.bat.
v. Use command line method:
vi. Search ‘localhost:8080/folder_name’ (example, GrowMark) in browser.
For more information on Tomcat web server click here.
To understand which page the visitor is currently looking at, you need to mention the page name in each HTML page. This page name can be set by using the page command. Set the page name on each HTML page file.
Once done, save and run the HTML files of the website. Visit the monitored website and try to load each page of the website.
Check if the pages are monitored on the Instana dashboard.
Click Pages and see if the pages are displayed.
Click on each page for a detailed analysis.
We hope this is a helpful exploration on monitoring multi-page website using Instana. To learn more about Instana and its monitoring capabilities, check out this document.