Tous les produits
Search
Centre de documentation

Simple Log Service:SDK JavaScript WebTracking

Dernière mise à jour :Aug 18, 2026

Pour collecter et analyser les informations utilisateur de votre site web, telles que les détails du navigateur, l'activité de navigation ou l'historique des achats, utilisez le SDK JavaScript WebTracking. Ce SDK envoie les journaux utilisateur directement depuis le client web vers un logstore, ce qui contourne vos serveurs d'application et réduit leur charge. Cette rubrique décrit comment envoyer des journaux avec le SDK JavaScript WebTracking.

Prérequis

La fonctionnalité WebTracking est activée pour votre logstore. Pour une introduction à WebTracking et savoir comment l'activer, consultez Utiliser WebTracking pour collecter les journaux front-end.

Limites

Lorsque vous utilisez le SDK JavaScript WebTracking pour envoyer des journaux, chaque requête d'écriture est limitée à 3 Mo ou 4 096 entrées de journal. Pour plus d'informations sur le SDK JavaScript WebTracking, consultez SLS WebTracking JavaScript SDK.

Procédure

Étape 1 : Installer et configurer le SDK

Méthode Npm

  1. Installez Node.js.

  2. Exécutez la commande suivante pour installer la dépendance :

    npm install --save @aliyun-sls/web-track-browser
  3. Ajoutez le code suivant à votre application pour configurer le SDK :

    import SlsTracker from '@aliyun-sls/web-track-browser'
    const opts = {
      host: '${host}', // The endpoint for the region where your project is located. For example, cn-hangzhou.log.aliyuncs.com.
      project: '${project}', // The name of the project.
      logstore: '${logstore}', // The name of the logstore.
      time: 10, // The time interval in seconds for sending logs. Default value: 10.
      count: 10, // The number of logs to send in each batch. Default value: 10.
      topic: 'topic', // A custom log topic.
      source: 'source',
      tags: {
        tags: 'tags',
      },
    }
    const tracker = new SlsTracker(opts)

    Paramètre

    Obligatoire

    Description

    host

    Oui

    L'endpoint Simple Log Service pour la région où se trouve votre projet. Cet exemple utilise la région Chine (Hangzhou). Remplacez-le par l'endpoint réel de votre région. Pour plus d'informations, consultez Endpoints de service.

    project

    Oui

    Le nom du projet.

    logstore

    Oui

    Le nom du logstore.

    time

    Non

    L'intervalle, en secondes, pour l'envoi des journaux. Par défaut : 10.

    count

    Non

    Le nombre de journaux à envoyer par lot. Par défaut : 10.

    topic

    Non

    Un sujet de journal personnalisé pour une identification plus facile.

    source

    Non

    Une source de journal personnalisée pour une identification plus facile.

    tags

    Non

    Des tags de journal personnalisés pour une identification plus facile.

Méthode CDN

  1. Ajoutez le code suivant à l'élément <body> de votre fichier HTML pour importer le SDK JavaScript WebTracking depuis un CDN. Si vous utilisez la méthode CDN, la dernière version prise en charge du SDK est la 0.3.5. Pour les autres versions, consultez SLS WebTracking JavaScript SDK.

    <script src="https://g.alicdn.com/sls/sls-js-sdk/0.3.5/web-track-browser.js"></script>
  2. Ajoutez le code suivant au fichier JavaScript de votre site web :

    if (window.SLS_Tracker) {
           const tracker = new SLS_Tracker({
           host: '${host}', // The endpoint for the region where your project is located. For example, cn-hangzhou.log.aliyuncs.com.
           project: '${project}', // The name of the project.
           logstore: '${logstore}', // The name of the logstore.
           time: 10, // The time interval in seconds for sending logs. Default value: 10.
           count: 10, // The number of logs to send in each batch. Default value: 10.
           topic: 'topic', // A custom log topic.
           source: 'source',
           tags: {
               tags: 'tags',
           },
        })
    }

    Paramètre

    Obligatoire

    Description

    host

    Oui

    L'endpoint Simple Log Service pour la région où se trouve votre projet. Cet exemple utilise la région Chine (Hangzhou). Remplacez-le par l'endpoint réel de votre région. Pour plus d'informations, consultez Endpoints de service.

    project

    Oui

    Le nom du projet.

    logstore

    Oui

    Le nom du logstore.

    time

    Non

    L'intervalle, en secondes, pour l'envoi des journaux. Par défaut : 10.

    count

    Non

    Le nombre de journaux à envoyer par lot. Par défaut : 10.

    topic

    Non

    Un sujet de journal personnalisé pour une identification plus facile.

    source

    Non

    Une source de journal personnalisée pour une identification plus facile.

    tags

    Non

    Des tags de journal personnalisés pour une identification plus facile.

Étape 2 : Envoyer les journaux

Pour envoyer un seul journal, passez un Object. Pour envoyer plusieurs journaux, passez un Array d'objets Object.

  • Envoyer un seul journal :

    tracker.send({
      eventType:'view_product',
      productName: 'Tablet',
      price: 500
    })
  • Envoyer immédiatement un seul journal (contourne les paramètres time et count) :

    tracker.sendImmediate({
      eventType:'view_product',
      productName: 'Tablet',
      price: 500
    })
  • Envoyer un lot de journaux :

    tracker.sendBatchLogs([
      {
        eventType: 'view_product',
        productName: 'Tablet',
        price: 500
      },
      {
        eventType: 'view_product',
        productName: 'Laptop',
        price: 1200
      }
    ])
  • Envoyer immédiatement un lot de journaux (contourne les paramètres time et count) :

    tracker.sendBatchLogsImmediate([
      {
        eventType:'view_product',
        productName: 'Tablet',
        price: 500
      },
      {
        eventType:'view_product',
        productName: 'Laptop',
        price: 1200
      }
    ])

Étape 3 : Consulter le résultat de l'envoi

Vous pouvez consulter les journaux envoyés dans la console ou via l'API.

Console

  1. Connectez-vous à la console Simple Log Service.

  2. Dans la section Projets, cliquez sur votre projet.

  3. Dans l'onglet Log Storage > Logstores, cliquez sur votre logstore, puis cliquez sur Consumption Preview pour afficher les journaux.

Pour interroger et analyser les journaux, consultez Démarrage rapide de l'interrogation et de l'analyse.

API

  1. Appelez l'opération CreateIndex pour créer un index en texte intégral ou un index de champ. Si vous souhaitez utiliser des instructions SELECT, vous devez créer un index de champ.

  2. Appelez l'opération GetLogsV2 pour interroger les données de journal. Cette opération renvoie un tableau d'entrées de journal.

FAQ

Comment résoudre l'erreur « 401 Authorization Required » qui survient lors du débogage ?

Cette erreur se produit si WebTracking n'est pas activé pour le logstore. Pour la résoudre, activez la fonctionnalité WebTracking. Pour plus d'informations, consultez Activer WebTracking.

Références