Surveillance du contenu d’une page web


Principe général

En règle générale, les différentes méthodes d’import de flux consistent à récupérer une liste d’informations qui constitueront chacune un article dans Scan, contenant au minimum un titre et une URL. Mais ce principe ne peut pas s’appliquer si les éléments que vous voulez surveiller ne peuvent pas être définis par un titre et une URL. C’est le cas par exemple d’une page affichant les membres du conseil d’administration d’une entreprise, sans qu’il y ait de lien vers une page dédiée à chaque membre.

La méthode de « surveillance du contenu d’une page web » est là pour vous aider. Le principe est de définir des zones à surveiller sur la page, le flux générant alors un article dès qu’une modification du contenu de ces zones a été détecté depuis le dernier crawl de la page.

Le titre de l’article indiquant la modification de la page possédera les informations suivantes :

  • Un titre rappelant par défaut l’URL de la page surveillée, ou si indiquée un titre de votre choix paramétré dans le flux
  • Une description récapitulant le nombre d’éléments textes ajoutés ainsi que ces textes, le nombre d’éléments textes supprimés ainsi que ces textes et le nombre d’éléments structurels tels que les images dont l’URL a été modifiée
  • Un lien vers une page hébergée par Scan, qui est une page hybride entre les deux versions de la page surveillée, indiquant les éléments ajoutés soulignés en vert et les éléments supprimés soulignés en rouge.

Paramétrage

Sous l’onglet IMPORT se trouvent les options de paramétrage du flux.

Zones à surveiller sur la page

Le premier champ de paramétrage, « Sélecteur CSS3 vers les éléments à surveiller », permet d’indiquer des règles CSS3 qui détermineront la ou les zones de la page à prendre en compte.

Par défaut (champ vide), l’ensemble du contenu de la page sera surveillé. Dans beaucoup de cas vous n’aurez pas de paramètre supplémentaire à modifier, mais si par exemple la page affiche la date et l’heure du jour, ou si des éléments affichent le nombre de likes d’une information, vous pourrez multiplier les articles créés, ayant pour conséquence du bruit dans vos veilles…

Il est donc recommandé d’utiliser le bouton « Tester » en bas de la boîte de dialogue afin de voir quels sont les contenus récupérés par le flux et décider si une précision des paramètres s’impose.

L’exemple ci-dessus propose un paramétrage relatif à la page d’accueil du site web de QWAM : le champ « Sélecteur CSS3 de nœuds-bruits à supprimer avant traitement » contient la valeur « header > div, footer > div » correspondant à l’entête et au pied de page.

La saisie de ces deux champs nécessite une maîtrise de la syntaxe CSS3. Afin de faciliter le paramétrage, vous pouvez utiliser l’interface de paramétrage visuel en cliquant sur le bouton

Paramétrage visuel

Quelques secondes après avoir cliqué sur le bouton de paramétrage visuel, une nouvelle fenêtre de navigateur s’ouvre avec une interprétation de la page telle que vue par Scan. Il se peut qu’il y ait quelques petites différences avec la page originale telle que vous la verriez depuis votre navigateur. En cas de non affichage de la page, vous pourrez activer l’option Selenium.

ATTENTION

Étant donné qu’une nouvelle fenêtre doit s’ouvrir, il faudra vous assurer que votre navigateur accepte cette possibilité pour le site asknread.com.

Menu de la fenêtre de paramétrage visuel

La fenêtre de paramétrage visuel affiche le nombre de zones sélectionnées, ainsi que 5 boutons :

  • Le premier bouton vous permettra de valider les zones sélectionnées et de calculer automatiquement les sélecteurs CSS3 du flux. Cliquer sur le bouton fermera la fenêtre de paramétrage visuel.
  • Le second bouton permet de sélectionner les zones similaires à celles que vous avez déjà sélectionnées.
  • Le troisième bouton permettra, si besoin, d’afficher les éléments cachés (tels que des menus, des zones affichées en accordéon…). À noter que cette action n’est pas réversible, et que l’affichage général de la page peut être perturbé.
  • Le quatrième bouton effacera toutes les sélections effectuées.
  • Le dernier bouton annulera le paramétrage visuel et fermera la fenêtre.

Sélection des zones à surveiller

Une fois la fenêtre ouverte, vous aurez la possibilité de sélectionner une ou plusieurs zones à surveiller. Tous les liens de ces zones seront alors pris en compte dans le flux.

En déplaçant la souris, vous remarquerez que des zones sont mises en valeur par une bordure de pointillés verts.

Mise en valeur le la zone survolée par des pointillés verts (cliquez sur l’image pour l’agrandir)

En cliquant avec le bouton gauche de votre souris, la zone active aura une bordure de pointillés bleus. Vous pouvez sélectionner plusieurs zones sur la page si besoin.

Sélection de plusieurs zones sur la page (cliquez sur l’image pour l’agrandir)

Si vous cliquez de nouveau sur une zone sélectionnée (pointillés bleus), elle sera désélectionnée.

Désélection d’une zone (cliquez sur l’image pour l’agrandir)

Définition de zones à ne pas prendre en compte : les nœuds-bruits

Si vous jugez que des éléments d’une zone sélectionnée contient du contenu qui générerait du bruit (l’heure actuelle ou un compteur par exemple), il vous est possible d’indiquer cette zone comme « nœud-bruit ». Pour cela, il vous suffit de survoler la zone en question (qui sera entourée d’une bordure de pointillés verts) et de cliquer sur le bouton droit de votre souris. À noter qu’il est possible d’annuler cette action en re-cliquant avec le bouton droit sur cette même zone.

Définition et annulation d’un nœud-bruit (cliquez sur l’image pour l’agrandir)

Dissimulation de nœuds HTML gênants

Il se peut qu’il apparaisse sur la page des éléments qui se retrouvent au-dessus du contenu que vous voulez sélectionner (une boîte de dialogue vous demandant d’accepter les cookies par exemple, ou des éléments de menus précédemment cachés mais révélés par le bouton d’affichage des éléments cachés). Il vous est possible de dissimuler ces éléments en appuyant sur la touche Ctrl de votre clavier et en cliquant avec le bouton droit de votre souris. À noter que cette action est irréversible pour la durée de session de paramétrage visuel – si vous avez dissimulé un nœud HTML par erreur, il vous faudra soit annuler le paramétrage en cliquant sur le bouton correspondant, soit valider votre paramétrage et relancer une nouvelle session de paramétrage visuel.

Cas particulier des pages avec pagination

Si vous voulez surveiller le contenu d’une page affichant par exemple une mosaïque de personnes, sur plusieurs pages liées par une pagination, il vous est possible de surveiller l’ensemble de ces pages par un seul flux. Pour cela, il vous faudra sélectionner un seul élément (la zone affichant la partie de la page modifiée par la pagination) et ensuite sélectionner le bouton « suivant » en appuyant sur la touche Ctrl de votre clavier et en cliquant avec le bouton gauche de votre souris. La couleur de fond du lien passera alors en pourpre.

Sélection et dé-sélection du lien de pagination « page suivante »

Si vous sélectionnez un second lien de page suivante, le premier sera annulé. Si vous sélectionnez un second élément à surveiller, le bouton de page suivante sera annulé. Si vous cliquez de nouveau sur le lien de page suivante en appuyant sur la touche Ctrl, il sera annulé.

Attention

N’utilisez cette fonctionnalité que si le nombre de pages reste raisonnable ! Contactez-nous si besoin.

Validation des zones sélectionnées

Le menu Scan en bas de la fenêtre vous indique dans sa zone centrale le nombre d’éléments sélectionnés. Cliquez sur le premier bouton « tick » pour valider votre sélection et remplir les deux champs « Sélecteur CSS3 vers les éléments dans lesquels on récupérera les liens » et « Sélecteur CSS3 de nœuds-bruits à supprimer avant le traitement ».

Les sélecteurs sont générés automatiquement, de façon la plus optimale possible. Il faut noter qu’il est fort probable que saisir manuellement des sélecteurs les rende plus efficaces (en utilisant notamment les classes et les ids des nœuds HTML) mais cela vous nécessiterait de maîtriser la syntaxe des sélecteurs CSS3.

Récapitulatif des commandes du paramétrage visuel
  • Clic gauche : sélection d’une zone à surveiller
  • Ctrl + clic gauche : ajout/suppression du lien page suivante
  • Clic droit : ajout/suppression d’un nœud-bruit
  • Ctrl + clic droit : dissimulation d’un nœud gênant

Personnalisation des titres des articles

Le champ « Titre des infos/rapports de modification » permet d’indiquer le titre de l’article qui sera généré si une modification de la page est détecté. Si ce champ est vide, ce sera la valeur du champ « Description du flux » qui sera utilisée. Et si cette dernière n’est pas renseignée, le titre de l’article sera l’URL de la page surveillée.

Avantages
  • Simple à paramétrer grâce au paramétrage visuel
  • Les textes et les images de la page sont surveillés
Inconvénients
  • Les articles créés par cette méthode sont des alertes sur le changement de la page surveillée, pas sur les sous-pages vers lesquelles pointent les modifications de la page
  • Il est préférable de bien définir les zones à surveiller pour ne pas avoir des alertes à répétition si la page affiche l’heure par exemple