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
Installez Node.js.
-
Exécutez la commande suivante pour installer la dépendance :
npm install --save @aliyun-sls/web-track-browser -
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
-
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> -
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
timeetcount) :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
timeetcount) :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
Connectez-vous à la console Simple Log Service.
Dans la section Projets, cliquez sur votre projet.
Dans l'onglet , 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
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.
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
Outre son SDK natif, SLS prend également en charge les SDK Alibaba Cloud courants. Pour plus d'informations, consultez Simple Log Service_SDK Center_Alibaba Cloud OpenAPI Explorer.