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 개발자 안내서의 Kinesis Streams란?을 참조하세요.

  • 인증되지 않은 자격 증명에 대해 활성화된 액세스 권한이 있는 Amazon Cognito 자격 증명 풀 브라우저 스크립트에 대한 자격 증명을 획득하려면 자격 증명 풀 ID를 코드에 포함시켜야 합니다. Amazon Cognito 자격 증명 풀에 관한 자세한 내용은 Amazon Cognito 개발자 안내서의 자격 증명 풀을 참조하세요.

  • 데이터를 Kinesis 스트림에 제출할 수 있는 권한을 부여하는 정책이 있는 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 구성

Amazon Cognito 자격 증명 풀 ID를 제공하는 CognitoIdentityCredentials 메서드를 직접 호출하여 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에 레코드 제출

배열에 레코드가 있는 경우 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);
});