Captura do progresso de rolagem da página da web com Amazon Kinesis - AWS SDK for JavaScript
O cenárioTarefas de pré-requisitoA página do blogComo configurar o SDKCriar registros de rolagemEnvio de registros para o Kinesis

Anunciamos o próximo fim do suporte para o AWS SDK for JavaScript v2. Recomendamos migrar para o AWS SDK for JavaScript v3. Para saber as datas e receber detalhes adicionais e informações sobre como migrar, consulte o anúncio vinculado.

Captura do progresso de rolagem da página da web com Amazon Kinesis

JavaScript code example that applies to browser execution

Este exemplo de script do navegador mostra:

  • Como capturar o progresso de rolagem em uma página da web com o Amazon Kinesis, como exemplo de métricas de uso da página de streaming para análise posterior.

O cenário

Neste exemplo, uma página de HTML simples simula o conteúdo de uma página de blog. À medida que o leitor roda o post no blog simulado, o script do navegador usa o para registrar a distância de rolagem vertical da página e envia esses dados para o Kinesis usando o método putRecords da classe de cliente Kinesis. Os dados de streaming capturados pelo Amazon Kinesis Data Streams podem ser processados por instâncias do Amazon EC2 e armazenados em qualquer um dos vários datastores, incluindo Amazon DynamoDB e Amazon Redshift.

Tarefas de pré-requisito

Para configurar e executar este exemplo, você deve primeiro concluir estas tarefas:

  • Crie uma transmissão do Kinesis. Você precisa incluir o ARN do recurso do streaming no script do navegador. Para obter mais informações sobre como criar o Amazon Kinesis Data Streams, consulte Gerenciando Kinesis Streams no Guia do desenvolvedor do Amazon Kinesis Data Streams.

  • Crie um banco de identidades do Amazon Cognito com acesso habilitado para identidades não autenticadas. Você precisa incluir o ID do grupo de identidades no código para obter credenciais para o script do navegador. Para obter mais informações, consulte Grupos de identidade do Amazon Cognito no Guia do desenvolvedor do Amazon Cognito.

  • Crie um perfil de IAM cuja política conceda permissão para enviar dados a um streaming do Kinesis. Para obter mais informações sobre como criar um perfil do IAM, consulte Criação de um perfil para delegar permissões a um serviço da AWS no Guia do usuário do IAM.

Use a política de função a seguir ao criar a função do IAM.

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

A página do blog

O HTML da página do blog é composto principalmente por uma série de pontos contidos dentro de um elemento <div>. A altura rolável desse <div> é usada para ajudar a calcular até onde o leitor rolou o conteúdo à medida que lê. O HTML também contém um par de elementos <script>. Um desses elementos adiciona o SDK para JavaScript à página e o outro adiciona o script do navegador, que captura o progresso da rolagem na página e o reporta ao 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>

Como configurar o SDK

Obtenha as credenciais necessárias para configurar o SDK chamando o método CognitoIdentityCredentials, fornecendo o ID do banco de identidades do Amazon Cognito. Após o sucesso, crie o objeto de serviço do Kinesis na função de retorno de chamada.

O snippet de código a seguir mostra essa etapa. (Consulte Captura do código do progresso de rolagem da página da web para ver o exemplo 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",
  });

Criar registros de rolagem

O progresso de rolagem é calculado usando as propriedades scrollHeight e scrollTop do <div> que contém o conteúdo do post do blog. Cada registro de rolagem é criado em uma função do listener do evento para o evento scroll e adicionado a um array de registros para envio periódico ao Kinesis.

O snippet de código a seguir mostra essa etapa. (Consulte Captura do código do progresso de rolagem da página da web para ver o exemplo 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);
  });

Envio de registros para o Kinesis

Uma vez a cada segundo, se houver registros na matriz, esses registros pendentes são enviados ao Kinesis.

O snippet de código a seguir mostra essa etapa. (Consulte Captura do código do progresso de rolagem da página da web para ver o exemplo 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);
});