Instana U

Co-authors : @Sreejith H Nair 

In this blog, let us see how Instana monitors a multi-page website.

Multi-page websites have more than one page with navigation for users to move around the site. Multi-page designs can be used to separate the different elements of the website, such as the content, products, and topics. The Instana website monitoring solution works by using a lightweight JavaScript agent, which is embedded into the monitored website.

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.

Website monitoring

Monitoring websites, also known as End-User Monitoring (EUM) or Real-User Monitoring (RUM), is a crucial tool for comprehending the online user experience.

By examining actual browser request times and route loading times, Instana provides website monitoring. It enables in-depth visibility into application call pathways as well as detailed information into users' online browsing experiences. The lightweight JavaScript agent used by the Instana website monitoring solution is embedded on the monitored website.

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.

Installation:

Installing the JavaScript agent is easy. To track website performance information, go to Instana's Websites and Mobile Apps area. You are guided through the installation procedure through the Instana user interface.

1. Click Add Website on the Instana Dashboard.

2. 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.

3. The JavaScript agent exposes an API that is available on monitored websites. Your website can interact with the API of our JavaScript agent in order to enrich or configure the collected data, send custom event, and more. For more information about Javascript Agent API, click here.

This Javascript agent contains a Reporting URL and a key. The key command allows for the setting of monitoring keys. The monitoring key is shown during website configuration in the Instana user interface. To get the monitoring data to Instana, beacons are sent to this URL using the HTTP GET and POST methods.

4. Obtain the website’s parent folder (example, GrowMark) to be monitored containing HTML files of all the pages.

5. 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:

• Run the following command to start the web server:

./startup.sh 

• Run the following command to stop the web server:

./shutdown.sh

vi. Search ‘localhost:8080/folder_name’ (example, GrowMark) in browser.

For more information on Tomcat web server click here.

6. Open the website’s parent folder using any code editor and copy the Javascript agent to HTML document's <head /> tag as shown in the screenshot. For multi-page websites, each page such as index.html, about.html etc. must have this Javascript agent included.

7. 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.

8. Once done, save and run the HTML files of the website. Visit the monitored website and try to load each page of the website.

9. Check if the pages are monitored on the Instana dashboard.

10. Click Pages and see if the pages are displayed.

11. 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.