Webscraping AJAX dans Alteryx

Bonjour à tous, aujourd’hui nous allons voir comment il est possible de réaliser du webscraping sur du contenu chargé dynamiquement en prenant comme exemple la page des blogs The Information Lab https://www.theinformationlab.fr/hub/

En effet, afin d’optimiser l’expérience utilisateur et le temps de chargement, certains sites choisissent de charger le contenu d’une page de manière asynchrone. Si vous visitez notre page de Blogs, vous vous apercevrez que la liste des blogs se charge après que la page soit affichée. L’idée est d’afficher quelque chose à l’utilisateur en attendant que les blogs soient chargés. Cela est problématique si on souhaite effectuer du web scraping classique car les pages crawlées sont tout simplement vides. On parle donc de contenu dynamique en opposition au contenu statique comme identifié dans mon article sur le Scraping Wikipedia.

Aujourd’hui, nous allons voir comment nous pouvons tout de même réaliser du Web Scraping de contenu chargé dynamiquement sur un site en utilisant Alteryx ainsi que la console de développement de Google Chrome.

1/ Chrome dev tools

Si vous souhaitez savoir comment récupérer du contenu chargé dynamiquement pour du Web Scraping, il est nécessaire de savoir ce que fait votre navigateur pour récupérer ce contenu. Pour cela nous allons visiter notre page de blogs https://www.theinformationlab.fr/hub/ dans Google Chrome. Pour vérifier si le contenu recherché est bien chargé de manière statique, effectuez un clic droit quelque part sur la page, puis sélectionnez Afficher le code source de la page. (vous pouvez aussi copier-coller ce lien dans votre navigateur view-source:https://www.theinformationlab.fr/hub/)

Nous allons essayer de lister tous les articles présents sur la page. Par exemple, nous pouvons rechercher mon article du mois dernier  Graphique avec Axe Double évolué dans Tableau avec un CTRL+F dans la page du code source que l’on vient d’ouvrir.

Vous vous apercevrez que le texte recherché n’est pas présent dans le code HTML de la page en question car ce contenu est chargé dynamiquement.

Mais alors, comment faire pour récupérer ce contenu s’il n’est pas dans la page source? 

Il faut savoir que Chrome nous permet de voir les requêtes HTTP qui sont faites lorsque vous visitez un site web. Il vous suffit de faire un clic droit sur la page puis de sélectionner Inspecter.

Cette action ouvre les outils de développements de Chrome. Sélectionnez ensuite Network puis rechargez/rafraîchissez la page. Vous verrez alors défiler l’ensemble des requêtes HTTP qui sont faites derrière le rideau pour afficher une page web.

Chacune de ces requêtes permet de récupérer des images, des fichier de stylisation, de logique et de templating. Il nous faut donc chercher quelle requête sert à afficher la liste des blogs parmi les 69 requêtes HTTP qui composent la page des Blogs The Information Lab. Pour voir le contenu renvoyé par une requête, cliquez sur une ligne et sélectionnez Response. Vous vous apercevrez peut-être que les requêtes téléchargent des fichiers la plupart du temps. Par exemple, les fichier .js contiennent du code javascript, les fichiers .css contiennent le style de la page, les fichiers .png sont les images… etc. etc.

En cherchant un peu on termine par découvrir que la requête POST https://www.theinformationlab.fr/wp-admin/admin-ajax.php renvoie ce qui nous intéresse. Les requêtes POST contiennent généralement un corps ou body que l’on peut voir dans la section Headers, Form Data ainsi :

Et voilà ! En cherchant un peu, nous avons trouvé la requête asynchrone qu’il nous faut reproduire dans Alteryx pour récupérer le contenu qui nous intéresse 🙂

2/ Requête POST dans Alteryx

L’outil Download d’Alteryx est très complet, il ne se limite pas à une fonction de téléchargement simple mais peut également effectuer des requêtes POST, et même du FTP.

L’étape délicate pour reproduire une requête POST est de bien spécifier le corps ou body de la requête. L’onglet Payload de l’outil Download permet de paramétrer ce « body ». Puisque nous n’allons faire qu’une seule requête, je me contente d’écrire ligne par ligne le contenu de la requête donnée par Chrome :

Petite astuce pour charger plus que 25 résultats dans mon cas, je change la limite de 25 à 100 pour charger plus de résultats de blogs !

Et voilà, si vous faites tourner le Workflow, vous verrez le contenu HTML recherché apparaître dans votre flux. A partir de ce point, le sujet devient très similaire à du Web Scraping de site statique comme expliqué dans mon précédent article Scraping Wikipédia dans Alteryx.

3/ Parsing Alteryx & conclusion

Pour cette étape, je vous invite à lire mon article Scraping Wikipedia dans Alteryx. Le parsing sera différent suivant la structure du code HTML de notre page de blog, très différente de celle d’une page Wikipédia mais les concepts restent les mêmes. Il y a plusieurs manières de réaliser ce parsing, je vais me contenter de vous montrer ce que j’ai réalisé personnellement :

Vous pouvez télécharger ce flux ici !

Et voici un dashboard Tableau Public mis à jour par le Workflow de ce tutoriel qui affiche les contributions de l’équipe ! 🙂