Real-Time Web Analytics with Kinesis Data Analytics
Real-Time Web Analytics with Kinesis Data Analytics

Appendix B: Customizing the Dashboard

The Real-Time Web Analytics with Kinesis Data Analytics solution dashboard displays a default set of metrics, but you can customize the dashboard to include any metrics from your website clickstream. Follow the step-by-step instructions in this section to add a metric that calculates the client-side load time of web pages.

For this exercise, you can add the page_load_time header value to the beacon code on your web server.

Step 1. Add the Beacon Code to Your Web Server

Add the beacon code that contains the new header name and data type to your web server. For this example, add the following code to your web server.

var loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart; var http = new XMLHttpRequest(); var url = beacon_url; //from Outputs section of CloudFormation stack http.open("POST", beacon_url); http.setRequestHeader("custom_metric_name", "page_load_time"); http.setRequestHeader("custom_metric_int_value", loadTime); http.send();

Step 2: Add the Metric to the DynamoDB Table

Use this procedure to add the new metric to the solution's Amazon DynamoDB table. For this exercise, the item you will add represents a metric that will emit the average page load time in milliseconds as an integer.

  1. Open the DynamoDB console and navigate to the Metrics table.

  2. Add a new item to the table with the following fields:

    • For the MetricType string attribute, enter a value of avg_pg_ld.

    • Add a LatestEventTimestamp attribute with a value of 0.

    • Add an AmendmentStrategy string attribute with a value of replace-existing.

    • Add an IsSet Boolean attribute with a value of false.

    • Add an IsWholeNumber Boolean attribute with a value of true.

  3. Select Save.

Note that the custom metric header name (page_load_time) you defined in step 1 is not the same as the metric type (avg_pg_ld). The page_load_time custom header contains the number of milliseconds a page takes to load as calculated on the client. The avg_pg_ld metric is used to show the average load time for all instrumented pages over a one-minute period.

Step 3. Modify the Application’s SQL Code

Use this procedure to update the application’s code with the new SQL statement. For information on using the SQL Editor, see Working with the SQL Editor in the Amazon Kinesis Data Analytics Developer Guide.

For this exercise, the page_load_time custom header value will be used to generate an average page load time (avg_pg_ld) of all pages over a one-minute period.

  1. On the Kinesis Data Analytics application’s SQL Editor page, select the Real-time analytics tab.

  2. Add the following SQL statement

    CREATE OR REPLACE PUMP "PAGELOAD_PUMP" AS INSERT INTO "DESTINATION_SQL_STREAM" (MetricType, EventTimestamp, MetricItem, UnitValueInt) SELECT 'avg_pg_ld', UNIX_TIMESTAMP(eventTimestamp), MetricItem, average_ms FROM ( SELECT STREAM 'All Pages' as MetricItem, AVG(weblogs."custom_metric_int_value") as average_ms, STEP (CHAR_TO_TIMESTAMP('dd/MMM/yyyy:HH:mm:ss z',weblogs."datetime") by INTERVAL '60' SECOND) as eventTimestamp FROM "WASA_001" weblogs WHERE weblogs."custom_metric_name" = 'page_load_time' GROUP BY STEP (CHAR_TO_TIMESTAMP('dd/MMM/yyyy:HH:mm:ss z',weblogs."datetime") by INTERVAL '60' SECOND), STEP (weblogs.ROWTIME BY INTERVAL '60' SECOND) );

    This SQL statement creates a new metric (page_load_time) that calculates the client-side load time of web pages.

  3. Select Save and run SQL.

Step 4. Update the JavaScript Code

The solution creates an Amazon Simple Storage Service (Amazon S3) bucket with a js folder that contains a dash.js file with the JavaScript code that populates the charts with metrics. To populate the new chart with metrics, download the dash.js file and follow the step-by-step instructions to modify the JavaScript.

  1. Add the event type to the switch statement of the getLatestMetrics function. For this exercise, add the bold JavaScript to the dash.js file.

    switch(mtype) { case 'avg_pd_ld' : makeBarChart(mtype, items); break; case 'agent_count' : makePieChart(mtype, items); break;
  2. Upload the modified dash.js file to the solution’s Amazon S3 bucket.

Step 5. Update the Website Assets

In the Amazon S3 bucket with the JavaScript, there is a file (index.html)that contains all the HTML elements that render charts on the dashboard. To add a new chart, download the index.html file, modify the HTML, and upload the modified file to the Amazon S3 bucket. You can replace the row of an existing chart with the new row, or add the new row to the end of the file.

For this exercise, add the bold HTML element to the index.html file.

<div class="row aws-mb-l"> <div class="col-xs-10 col-xs-offset-1 col-xs-12"> <div class="x_title"> <h3>Pages</h3> </div> <div class="x_content"> <canvas id="top_pages" ts="0"></canvas> </div> </div> </div> <div class="row aws-mb-l"> <div class="col-xs-10 col-xs-offset-1 col-xs-12"> <div class="x_title"> <h3>Average Page Load Time</h3> </div> <div class="x_content"> <canvas id="avg_pg_ld" ts="0"></canvas> </div> </div> </div>

After you upload the modified index.html file to the Amazon S3 bucket, open the dashboard in a browser and verify the new chart shows metrics.