Capturing Web Page Scroll Progress Code - AWS SDK for JavaScript

Capturing Web Page Scroll Progress Code

Here is the browser script code for the Kinesis capturing web page scroll progress example.

// Configure Credentials to use Cognito AWS.config.credentials = new AWS.CognitoIdentityCredentials({ IdentityPoolId: "IDENTITY_POOL_ID", }); AWS.config.region = "REGION"; // We're going to partition Amazon Kinesis records based on an identity. // We need to get credentials first, then attach our event listeners. AWS.config.credentials.get(function (err) { // attach event listener if (err) { alert("Error retrieving credentials."); console.error(err); return; } // create Amazon Kinesis service object const kinesis = new AWS.Kinesis({ apiVersion: "2013-12-02", }); // Get the ID of the Web page element. const blogContent = document.getElementById("BlogContent"); // Get Scrollable height const scrollableHeight = blogContent.clientHeight; const recordData = []; let TID = null; blogContent.addEventListener("scroll", function (event) { clearTimeout(TID); // Prevent creating a record while a user is actively scrolling TID = setTimeout(function () { // calculate percentage const scrollableElement = event.target; const scrollHeight = scrollableElement.scrollHeight; const scrollTop = scrollableElement.scrollTop; const scrollTopPercentage = Math.round((scrollTop / scrollHeight) * 100); const scrollBottomPercentage = Math.round( ((scrollTop + scrollableHeight) / scrollHeight) * 100 ); // Create the Amazon Kinesis record const record = { Data: JSON.stringify({ blog: window.location.href, scrollTopPercentage: scrollTopPercentage, scrollBottomPercentage: scrollBottomPercentage, time: new Date(), }), PartitionKey: "partition-" + AWS.config.credentials.identityId, }; recordData.push(record); }, 100); }); // upload data to Amazon Kinesis every second if data exists setInterval(function () { if (!recordData.length) { return; } // upload data to Amazon Kinesis kinesis.putRecords( { Records: recordData, StreamName: "NAME_OF_STREAM", }, function (err, data) { if (err) { console.error(err); } } ); // clear record data recordData = []; }, 1000); });