Captura de la progresión del desplazamiento en una página web con Amazon Kinesis - AWS SDK for JavaScript

LaAWS SDK for JavaScript versión 3 (v3) es una reescritura de la versión 2 con algunas funciones nuevas y excelentes, incluida la arquitectura modular. Para obtener más información, consulte la Guía para desarrolladores de la versiónAWS SDK for JavaScript 3.

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Captura de la progresión del desplazamiento en una página web con Amazon Kinesis

JavaScript code example that applies to browser execution

Este ejemplo de script de navegador muestra:

  • Cómo capturar la progresión del desplazamiento en una página web con Amazon Kinesis como ejemplo de métricas de uso de la página de streaming para su análisis posterior.

El escenario

En este ejemplo, una sencilla página HTML simula el contenido de una página de blog. A medida que lector se desplaza por la entrada de blog simulada, el script de navegador usa el SDK para JavaScript para registrar la distancia de desplazamiento hacia abajo por la página y envía dichos datos a Kinesis mediante elputRecordsde la clase de cliente de Kinesis. A continuación, los datos de streaming que captura Amazon Kinesis Data Streams pueden procesarse mediante instancias de Amazon EC2 y almacenarse en cualquiera de los diversos almacenes de datos, incluidos Amazon DynamoDB y Amazon Redshift.

Tareas previas necesarias

Para configurar y ejecutar este ejemplo, primero debe completar estas tareas:

  • Cree una secuencia de Kinesis. Debe incluir el ARN de recurso de la transmisión en el script de navegador. Para obtener más información sobre cómo crear Amazon Kinesis Data Streams, consulteAdministración de Kinesis Streamsen laGuía para desarrolladores de Amazon Kinesis Data Streams.

  • Cree un grupo de identidades de Amazon Cognito con el acceso habilitado para identidades sin autenticar. Debe incluir el ID del grupo de identidades en el código para obtener las credenciales para el script del navegador. Para obtener más información sobre los grupos de identidades de Amazon Cognito, consulteGrupos de identidades deen laGuía para desarrolladores de Amazon Cognito.

  • Cree un rol de IAM cuya política conceda permiso para enviar datos a una secuencia de Kinesis. Para obtener más información sobre cómo crear un rol de IAM, consulteCreación de un rol para delegar permisos a unAWSService (Servicio)en laIAM User Guide.

Utilice la siguiente política de funciones al crear la función de IAM.

{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "mobileanalytics:PutEvents", "cognito-sync:*" ], "Resource": [ "*" ] }, { "Effect": "Allow", "Action": [ "kinesis:Put*" ], "Resource": [ "STREAM_RESOURCE_ARN" ] } ] }

La página de blog

El código HTML de la página del blog se compone principalmente de una serie de párrafos incluidos en un elemento <div>. La altura desplazable de este <div> se utiliza como ayuda para calcular hasta dónde se ha desplazado un lector por el contenido a medida que va leyendo. El HTML también contiene un par de elementos <script>. Uno de estos elementos añade el SDK para JavaScript a la página y el otro añade el script de navegador que captura la progresión del desplazamiento en la página y lo notifica a Kinesis.

<!DOCTYPE html> <html> <head> <title>AWS SDK for JavaScript - Amazon Kinesis Application</title> </head> <body> <div id="BlogContent" style="width: 60%; height: 800px; overflow: auto;margin: auto; text-align: center;"> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nulla eget nisl bibendum feugiat. Fusce rhoncus felis at ultricies luctus. Vivamus fermentum cursus sem at interdum. Proin vel lobortis nulla. Aenean rutrum odio in tellus semper rhoncus. Nam eu felis ac augue dapibus laoreet vel in erat. Vivamus vitae mollis turpis. Integer sagittis dictum odio. Duis nec sapien diam. In imperdiet sem nec ante laoreet, vehicula facilisis sem placerat. Duis ut metus egestas, ullamcorper neque et, accumsan quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> <!-- Additional paragraphs in the blog page appear here --> </div> </div> <script src="https://sdk.amazonaws.com/js/aws-sdk-2.283.1.min.js"></script> <script src="kinesis-example.js"></script> </body> </html>

Configuración del SDK

Obtenga las credenciales necesarias para configurar el SDK llamando alCognitoIdentityCredentialsque proporciona el ID del grupo de identidades de Amazon Cognito. En caso de éxito, cree el objeto de servicio Kinesis en la función de devolución de llamada.

El siguiente fragmento de código muestra este paso. (Consulte Captura del código de progresión del desplazamiento en la página web para ver el ejemplo completo).

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

Creación de registros de desplazamiento

La progresión del desplazamiento se calcula mediante las propiedades scrollHeight y scrollTop de <div> que tiene el contenido de la entrada de blog. Cada registro de desplazamiento se crea en una función de escucha de eventos para elscrolly luego se añade a una matriz de registros para su envío periódico a Kinesis.

El siguiente fragmento de código muestra este paso. (Consulte Captura del código de progresión del desplazamiento en la página web para ver el ejemplo completo).

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

Envío de registros a Kinesis

Una vez cada segundo, si hay registros en la matriz, dichos registros pendientes se envían a Kinesis.

El siguiente fragmento de código muestra este paso. (Consulte Captura del código de progresión del desplazamiento en la página web para ver el ejemplo completo).

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