Comment configurer les sélecteurs CSS pour analyser le contenu dans Telematic.Pro

Introduction

Lors de la configuration des sources dans Telematic.pro, il est essentiel de configurer correctement les sélecteurs CSS. Ils permettent de :

• Extraire les liens vers les articles depuis la page d’accueil du site.
• Trouver et analyser le contenu principal de chaque article.
• Exclure les éléments inutiles (par exemple, les publicités, les pieds de page et les menus latéraux).

Pour effectuer une analyse efficace, il est nécessaire de savoir trouver les bons sélecteurs à l’aide des DevTools du navigateur. Dans cet article, nous allons voir comment procéder.

Utilisation des DevTools pour trouver les sélecteurs

1. Ouvrir les DevTools

Dans Google Chrome ou Firefox, appuyez sur F12 ou Ctrl + Shift + I (sur Mac : Cmd + Option + I) pour ouvrir les outils de développement (DevTools).

2. Déterminer le sélecteur des liens

Supposons que nous souhaitions extraire les liens vers les articles depuis la page d’accueil du blog « https://example.com/news ».

1. Ouvrez les DevTools et sélectionnez l’onglet Elements.
2. Placez le curseur sur le titre de l’article et cliquez dessus avec le bouton droit, puis sélectionnez Inspect (Inspecter l’élément).
3. Dans le code de la page, trouvez la balise <a> la plus proche contenant le lien vers l’article.
4. Examinez ses classes, son ID ou ses autres attributs.
5. Pour copier un sélecteur prêt à l’emploi, faites un clic droit sur l’élément → Copy → Copy selector.

Exemple de code HTML :

<article class="news-item">
    <a href="/news/article-123" class="news-link">Titre de l’article</a>
</article>

Le sélecteur CSS des liens sera donc :

.news-item .news-link

Dans Telematic.pro, indiquez ce sélecteur dans le champ Sélecteur CSS des liens.

3. Déterminer le sélecteur du contenu

Après avoir obtenu la liste des liens, le système accède à chaque article et en extrait le contenu. Nous devons indiquer où celui-ci se trouve.

1. Ouvrez les DevTools sur la page de l’article.
2. Trouvez le conteneur principal contenant le texte (il s’agit généralement d’un <div>, d’un <article> ou d’une <section>).
3. Vérifiez ses classes ou son ID.
4. Sélectionnez le conteneur souhaité, cliquez dessus avec le bouton droit → Copy → Copy selector afin d’obtenir rapidement son sélecteur CSS.

Exemple de code HTML :

<article class="article-content">
    <h1>Titre de l’article</h1>
    <p>Texte de l’article...</p>
</article>

Sélecteur CSS du contenu :

.article-content

Indiquez-le dans Telematic.pro, dans le champ Sélecteur CSS du contenu.

4. Exclure les éléments inutiles

Parfois, des éléments indésirables sont inclus dans l’article : blocs publicitaires, boutons de réseaux sociaux ou liens vers d’autres contenus.

1. Utilisez les DevTools pour trouver le code HTML des éléments inutiles.
2. Identifiez leurs classes ou leurs ID.
3. Sélectionnez l’élément, cliquez dessus avec le bouton droit → Copy → Copy selector afin d’obtenir son sélecteur CSS.
4. Vérifiez le sélecteur dans les DevTools : ouvrez la console (onglet Console) et saisissez :

   document.querySelectorAll('sélecteur')
   

   Si plusieurs éléments sont trouvés, il peut être nécessaire d’affiner le sélecteur.

Exemple de code HTML contenant des éléments indésirables :

<article class="article-content">
    <h1>Titre de l’article</h1>
    <p>Texte de l’article...</p>
    <div class="related-posts">Autres articles</div>
    <div class="ad-banner">Publicité</div>
</article>

Sélecteurs CSS d’exclusion :

.related-posts, .ad-banner

Ajoutez-les dans Telematic.pro, dans le champ Sélecteurs CSS d’exclusion.

Exemple complet de configuration dans Telematic.pro

Supposons que nous configurions une source pour un blog dont l’URL est https://example.com/news. Les paramètres dans Telematic.pro seront les suivants :

• Sélecteur CSS des liens : .news-item .news-link
• Sélecteur CSS du contenu : .article-content
• Sélecteurs CSS d’exclusion : .related-posts, .ad-banner

Conclusion

La configuration des sélecteurs CSS permet d’extraire précisément les données nécessaires et d’exclure les éléments inutiles. Utilisez les DevTools pour trouver les bons sélecteurs, copiez-les via le menu contextuel et testez-les dans la console avant de les ajouter dans Telematic.pro.