使用 Amazon Kinesis 捕获网页滚动进度 - AWS SDK for JavaScript
情景先决条件任务博客页面配置 SDK创建滚动记录将记录提交到 Kinesis

我们已宣布即将终止对 AWS SDK for JavaScript v2 的支持。建议您迁移到 AWS SDK for JavaScript v3。有关日期、其他详细信息以及如何迁移的信息，请参阅链接的公告。

使用 Amazon Kinesis 捕获网页滚动进度

JavaScript code example that applies to browser execution

此浏览器脚本示例演示：

  • 如何使用 Amazon Kinesis 捕获网页中的滚动进度作为流式页面使用指标的示例，以供日后分析。

情景

在本示例中，使用一个简单的 HTML 页面模拟博客页面内容。随着读者在模拟博客帖子中滚动，浏览器脚本使用 SDK for JavaScript 来记录沿着页面向下滚动的距离，并使用 Kinesis 客户端类的 putRecords 方法将该数据发送到 Kinesis。然后，Amazon Kinesis Data Streams 捕获的流数据可以通过 Amazon EC2 实例加以处理，并存储在多个数据存储的任意一个中，包括 Amazon DynamoDB 和 Amazon Redshift。

先决条件任务

要设置和运行此示例，您必须先完成以下任务：

  • 创建 Kinesis 流。您需要将流的资源 ARN 包含在浏览器脚本中。有关创建 Amazon Kinesis Data Streams 的更多信息，请参阅《Amazon Kinesis Data Streams Developer Guide》中的 Managing Kinesis Streams。

  • 创建一个 Amazon Cognito 身份池，并包含为未经身份验证的身份启用的权限。您需要在代码中包含身份池 ID 以获取浏览器脚本的凭证。有关 Amazon Cognito 身份池的更多信息，请参阅《Amazon Cognito 开发人员指南》中的身份池。

  • 创建一个 IAM 角色，该角色的策略授予将数据提交到 Kinesis 流的权限。有关创建 IAM 角色的更多信息，请参阅《IAM 用户指南》中的创建向 AWS 服务委派权限的角色。

在创建 IAM 角色时，使用以下角色策略。

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

博客页面

博客页面的 HTML 主要由包含在 <div> 元素中的一系列段落构成。此 <div> 的可滚动高度用于帮助计算读者阅读时在内容中滚动的距离。该 HTML 还包含一对 <script> 元素。其中一个元素将 SDK for JavaScript 添加到页面，另一个元素则添加浏览器脚本来捕获页面中的滚动进度并报告给 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>

配置 SDK

通过调用 CognitoIdentityCredentials 方法并提供 Amazon Cognito 身份池 ID，获取配置 SDK 时所需的凭证。成功后，在回调函数中创建 Kinesis 服务对象。

下面的代码段演示了此步骤。（有关完整示例，请参阅捕获网页滚动进度代码。）

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

创建滚动记录

滚动进度是使用包含博客帖子内容的 <div> 的 scrollHeight 和 scrollTop 属性计算的。每个滚动记录在 scroll 事件的事件侦听器函数中创建，然后添加到记录数组中，以定期提交到 Kinesis。

下面的代码段演示了此步骤。（有关完整示例，请参阅捕获网页滚动进度代码。）

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

将记录提交到 Kinesis

在经过每一秒后，如果数组中有记录，则这些待处理记录会发送到 Kinesis。

下面的代码段演示了此步骤。（有关完整示例，请参阅捕获网页滚动进度代码。）

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