Capturing Web Page Scroll Progress Code - AWS SDK for JavaScript

The AWS SDK for JavaScript version 3 (v3) is a rewrite of v2 with some great new features, including modular architecture. For more information, see the AWS SDK for JavaScript v3 Developer Guide.

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); });