シナリオ前提条件タスクブログページ SDK の設定スクロールレコードの作成 Kinesis にレコードを送信する

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 デベロッパーガイドの Kinesis ストリーミングの管理を参照してください。
認証されていないアイデンティティに対して有効なアクセス権を持つ Amazon Cognito アイデンティティプールを作成します。コード内の ID プール ID を含めて、ブラウザスクリプトの認証情報を取得する必要があります。Amazon Cognito アイデンティティプールの詳細については、Amazon Cognito デベロッパーガイドのアイデンティティプールを参照してください。
許可を付与してデータを Kinesis ストリームに送信するポリシーを持つ IAM ロールを作成します。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> 要素のペアも含まれています。これらの要素の 1 つでは SDK for JavaScript がページに追加され、もう 1 つではブラウザスクリプトが追加されて、ページのスクロール進行状況をキャプチャし、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 メソッドを呼び出して SDK を設定するために必要な認証情報を取得し、Amazon Cognito アイデンティティプール ID を提供します。成功したら、コールバック関数で 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 にレコードを送信する

配列にレコードがある場合は、1 秒ごとに 1 回、保留中のレコードが 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);
});

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

Amazon Kinesis の例

ウェブページのスクロール状況コードをキャプチャする