Capture de la progression du défilement des pages Web avec Amazon Kinesis - AWS SDK for JavaScript
ScénarioTâches prérequisesPage du blogConfiguration du kit SDKCréation des enregistrements de défilementSoumission d'enregistrements à Kinesis

Nous avons annoncé la sortie end-of-support de la AWS SDK for JavaScript v2. Nous vous recommandons de migrer vers la AWS SDK for JavaScript version 3. Pour les dates, les détails supplémentaires et les informations sur la façon de migrer, reportez-vous à l'annonce associée.

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Capture de la progression du défilement des pages Web avec Amazon Kinesis

JavaScript code example that applies to browser execution

Cet exemple de script de navigateur présente :

  • Comment enregistrer la progression du défilement d'une page Web avec Amazon Kinesis comme exemple de statistiques d'utilisation d'une page de streaming pour une analyse ultérieure.

Scénario

Dans cet exemple, une simple page HTML simule le contenu d'une page de blog. Lorsque le lecteur fait défiler le billet de blog simulé, le script du navigateur utilise le SDK pour JavaScript enregistrer la distance de défilement vers le bas de la page et envoyer ces données à Kinesis en utilisant la méthode putRecordsde la classe client Kinesis. Les données de streaming capturées par Amazon Kinesis Data Streams peuvent ensuite être traitées par les instances Amazon EC2 et stockées dans l'un des nombreux magasins de données, notamment Amazon DynamoDB et Amazon Redshift.

Tâches prérequises

Pour configurer et exécuter cet exemple, vous devez d'abord :

  • Créez un flux Kinesis. Vous devez inclure l'ARN de la ressource du flux dans le script du navigateur. Pour plus d'informations sur la création d'Amazon Kinesis Data Streams, consultez Managing Kinesis Streams dans le manuel Amazon Kinesis Data Streams Developer Guide.

  • Créez un pool d'identités Amazon Cognito dont l'accès est activé pour les identités non authentifiées. Vous devez inclure l'ID du groupe d'identités dans le code afin d'obtenir les informations d'identification relatives au script du navigateur. Pour plus d'informations sur les groupes d'identités Amazon Cognito, consultez la section Groupes d'identités du manuel Amazon Cognito Developer Guide.

  • Créez un rôle IAM dont la politique autorise l'envoi de données vers un flux Kinesis. Pour plus d'informations sur la création d'un rôle IAM, consultez la section Création d'un rôle pour déléguer des autorisations à un AWS service dans le Guide de l'utilisateur IAM.

Utilisez la stratégie de rôle suivante lors de la création du rôle IAM.

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

Page du blog

Le code HTML de la page du blog se compose principalement d'une série de paragraphes contenus dans un élément <div>. La hauteur de défilement de cet élément <div> sert à calculer jusqu'où un lecteur a déroulé le contenu qu'il lit. Le code HTML contient également une paire d'éléments <script>. L'un de ces éléments ajoute le SDK JavaScript pour la page et l'autre ajoute le script de navigateur qui enregistre la progression du défilement sur la page et la rapporte à 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>

Configuration du kit SDK

Obtenez les informations d'identification nécessaires pour configurer le SDK en appelant la CognitoIdentityCredentials méthode, en fournissant l'ID du pool d'identités Amazon Cognito. En cas de succès, créez l'objet de service Kinesis dans la fonction de rappel.

L'extrait de code suivant illustre cette étape. (Pour obtenir l'exemple complet, consultez Code de capture de la progression du défilement d'une page web.)

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

Création des enregistrements de défilement

La progression du défilement est calculée à l'aide des propriétés scrollHeight et scrollTop de l'élément <div> contenant le contenu du billet de blog. Chaque enregistrement de défilement est créé dans une fonction d'écoute d'événements pour l'scrollévénement, puis ajouté à un tableau d'enregistrements pour être soumis périodiquement à Kinesis.

L'extrait de code suivant illustre cette étape. (Pour obtenir l'exemple complet, consultez Code de capture de la progression du défilement d'une page web.)

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

Soumission d'enregistrements à Kinesis

Une fois par seconde, s'il y a des enregistrements dans le tableau, ces enregistrements en attente sont envoyés à Kinesis.

L'extrait de code suivant illustre cette étape. (Pour obtenir l'exemple complet, consultez Code de capture de la progression du défilement d'une page web.)

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