Overview
This article provides an overview of some of the most commonly used pages in the Blue Triangle portal. Detailed demonstrations exploring the many pages, dashboards, and features are provided. The topics range from general pages and their customization to Real-User Monitoring and Synthetic Data performance details and overviews.
Navigating The Portal
The Digital Experience Overview (DEO) page is the first page that a user lands when logging into the portal. It provides users with a single-glance read of their digital experience’s overall health. It can also be accessed by clicking on the Blue Triangle logo in the upper left-hand corner of the of the portal.
Blue Triangle Scores
The Blue Triangle scores is a subsection of the DEO page, which details five different score cards correlated to five different modules. The color a card serves as a marker for the overall module health. Green means things are healthy, yellow serves as a warning, and red means there’s an issue. Each score card also displays the average score of the module, the current module score, and difference between the previous two values along with a trend direction.
Page Customization
Time Periods
The time period that is being viewed is also customizable. In the upper left-hand corner of the portal, there is a drop-down menu that defaults to “This Week So Far”. Within the drop-down menu are preconfigured time periods and the option to customize a date selection.
Widgets
The DEO is preconfigured with various widgets, but each DEO is customizable with a variety of widgets and orientations. Each widget can be resized by dragging on either bottom corner of the widget, and relocated by dragging and dropping the widget in a new location on the page.
Dashboards
There are a few preconfigured dashboards available for use, each catered to a different viewing experience. By default, when navigating to the dashboards, the Site Overview Dashboard is the landing page. Site Overview displays the site performance, device metrics, revenue over time, and performance by geography. All of the preconfigured dashboards are shown in the drop-down menu under the “Preconfigured” label. All of the custom dashboards are shown in the drop-down menu under the “Shared” label.
Custom Dashboards
In the upper right-hand corner of the Dashboards page is a “+ Dashboard” button used to create a custom dashboard. After naming the new dashboard, an empty dashboard page will be created where widgets can be added and the dashboard can be tailored to user needs.
Time Periods & Refresh Rates
Similar to the DEO page, the time period being viewed is also customizable for dashboards. In the upper left-hand corner of the Dashboards page, there is a look-back selector that can be used to customize the time period.
The refresh-rate of the dashboard is also customizable using the refresh-selector. The refresh-rates range from 2 minutes - 60 minutes, depending on the time-length of the look-back selector. Manual refreshing is also available by clicking on the curved arrow connected to the refresh-selector.
Filtering
Filtering is a feature available on almost all of the portal pages. Its menu is accessed by clicking on the funnel in upper right-hand corner. In general, the filtering categories include: Time Period, Marketing, Page Segmentation, Network Infrastructure, and more. If any custom categories are set and the page allows for custom categories, they will be located in the Advanced category.
Demo
Real-User Performance Overview
The Real-User Performance Overview displays a high-level overview of page views and performance metrics, broken down by page name. The page includes VitalScope features including detailed Web Core Vital Metrics and specific page components that contribute to each metric. This page provides further insight into the performance metrics by displaying the top 50 URLs for a specific page and their performance. Performance status is shown via these three colors: green, yellow, red. Green is good, yellow needs improvements, and red is poor.
Performance By Metrics
Performance by Geography is also available on this page, using a scale where the darkest green is the best performance and the darkest red is the worst performance.
Performance by other metrics is also displayed. The following are shown: Performance by Country, Performance by Region, Performance by ISP/Organization, and Performance by Traffic Source/Referrer.
Demo
Real-User Performance Details & Filtering
Metric Trend Lines
When navigating to the Real-User Performance Details page, the page first displays the trend lines of different metrics. The metrics displayed are customizable and the option to only show Core Web Vitals is also available.
Page Timing Over Time
A graph displaying all of the metrics in a single graph. This provides a more detailed and comprehensive view of data in comparison to the trend lines.
Page Views Scatterplots
The Real-User Performance Details page contains two scatterplots. Scatterplot metrics can be changed via the Displayed Metric dropdown menu.
The Page Views scatterplot displays all of the page views for any page within a preset time frame. The time-frame is adjusted by using the two arrows to either move forward or backward in time. On the Page Views scatterplot, page level detail is represented by a circle and page level detail with object level detail is represented by a triangle.
When clicking on a specific plot of data, data will be displayed in the All Page Views For Selected Session. This scatterplot displays all of the page views for a specific session.
Performance Measurement Details
The Performance Measurement Details is a comprehensive table that displays details based on a selected session from the Page Views scatterplot. Any custom variables will also be shown in this table.
Domain Level Activity
The Domain and Object Level Activity table displays data related to load times and total times of a selected session from the Page Views scatterplot. There are three detailed views: Domain Level Activity, Object Level Activity, and Object Activity by Domain. The vertical lines throughout the graph represent different metrics. To the right of the graph is a legend of the metrics to aid in reading the graph.
Filtering
By using the Page Segmentation filter, it is possible to compare the performance of up to 50 pages. Under the Page name sub-section, select pages for comparison from the drop-down menu.
A bar graph will appear after applying the filters, showing the performance difference for a selected metric, relative to the pages selected for comparison. If a page’s bar is selected, the rest of the page will update to reflect data specific to that page.
The filter selector for Page Segmentation defaults to Page Name, however, its also possible to filter by URL. A specific URL or wildcard can be used. Note, the time period must be 7 days or less when using the URL filter.
Demo
Real-User Aggregate Waterfall
The Real-User Aggregate Waterfall shows domain and object level data aggregated across a time period. The each vertical line on the graph represents a metric, which can be toggled on and off by clicking on the metric above the the graph. The graph can also be switched to a table view.
Running Comparisons
Running comparisons on performance metrics from two time periods is also possible on this page by clicking on the Run Comparison button in the upper left-hand corner of the page. After running the comparison, a What’s Changed section appears alongside the two generated waterfalls. Within the What’s Changed section, each metric is displayed with a bar showing the difference in data from the two time periods. The waterfall orientation is relative to the orientation of data displayed within these bars, being that data on the left of the bar is in reference to data from the waterfall to the left, and vice versa.
Element duration and element count for specific domains or objects is displayed as well. It compares the change between the two time periods. Lastly, the Resource Timings By File table is available at the bottom of the page.
Demo
Navigating Synthetic Browser Data
Synthetic Monitors
The Synthetic Monitors page displays what monitors are enabled, what type of monitor they are, and projected usage. The page provides a simple view and a detailed table view. New monitors can be created on this page by clicking the Create button in the upper left-hand corner. Note, once a monitor is created, data from the monitor will show in the portal after 1-2 hours.
Synthetic Performance Overview
This page shows Error Tracking and Performance, Performance by Geography, and Performance Overview For All Pages. This page works the same as its Real-User counterpart.
Synthetic Performance Details
This page shows the metrics & Monitor Availability Over Time. This page works the same as its Real-User counterpart.
Synthetic Aggregate Waterfall
This page works the same as its Real-User counterpart, but with the added view of Function Tracing.
Error State Tracking
This page shows all the errors that occurred for a specific time period based on the running synthetic monitors. It details the error time, monitor name, page name, HTTP status code, duration, and more.
Test Results
This page shows the results for every run of each monitor. It is also possible to filter the results by monitor. This page also offers a detailed sub-page displaying a screenshot and object/domain level detail.
Demo
Data Science
This page displays data in a more in-depth fashion and allows freedom to slice the data.
Custom Graphs
After completing its configuration, a custom graph will be created. This graph can also be viewed as a table by using the Table button in the upper left-hand corner of the page. In table form, individual data points are displayed for a more in-depth view. The table also has multiple export options including CSV, TSV, JSON, and Array. The graph view, the viewing the JSON for API is available.
Towards the bottom of the page, the Totals are displayed in a table. If a sub-group was used in the configuration, more in-depth data would be displayed in this table for further analysis.
Comparison Graph
Comparison graphs are used to compare metrics, time-periods, or pages. After configuring the comparison graph, a second graph and Totals table will appear alongside the original custom graph and Totals table.