AWS SDK for JavaScript
Developer Guide for SDK v2

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 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 kinesis client once var kinesis = new AWS.Kinesis({ apiVersion: '2013-12-02' }); 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 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 kinesis every second if data exists setInterval(function() { if (!recordData.length) { return; } // upload data to kinesis kinesis.putRecords({ Records: recordData, StreamName: 'blog_stats' }, function(err, data) { if (err) { console.error(err); } }); // clear record data recordData = []; }, 1000); });