Capturing Web Page Scroll Progress Code - AWS SDK for JavaScript

The AWS SDK for JavaScript v2 has reached end-of-support. We recommend that you migrate to AWS SDK for JavaScript v3. For additional details and information on how to migrate, please refer to this announcement.

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 var kinesis = new AWS.Kinesis({ apiVersion: "2013-12-02", }); // Get the ID of the Web page element. var blogContent = document.getElementById("BlogContent"); // Get Scrollable height var scrollableHeight = blogContent.clientHeight; var recordData = []; var TID = null; blogContent.addEventListener("scroll", function (event) { clearTimeout(TID); // Prevent creating a record while a user is actively scrolling TID = setTimeout(function () { // calculate percentage var scrollableElement = event.target; var scrollHeight = scrollableElement.scrollHeight; var scrollTop = scrollableElement.scrollTop; var scrollTopPercentage = Math.round((scrollTop / scrollHeight) * 100); var scrollBottomPercentage = Math.round( ((scrollTop + scrollableHeight) / scrollHeight) * 100 ); // Create the Amazon Kinesis record var 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); });