Javascript personnalisé

Aperçu de la nouvelle fonction Custom Javascript de Screaming Frog

Configuration JS personnalisée

Le JavaScript personnalisé est une nouvelle fonctionnalité de Screaming Frog dans sa version 20 et permet d’exécuter un code JavaScript sur chaque URL analysée avec le SEO Spider.
Grâce à cette fonctionnalité, il est possible d’extraire toutes sortes d’informations utiles d’une page web qui ne seraient pas déjà disponibles dans Spider SEO, ainsi que de communiquer avec des API telles que ChatGPT d’OpenAI, LLM local ou d’autres bibliothèques.

> > Pour configurer le Seo Spider avec cette fonctionnalité, cliquez simplement sur “Configurer le JavaScript personnalisé”. Cliquez ensuite sur “Ajouter” pour commencer à configurer un nouveau snippet, ou sur “Ajouter à partir de la bibliothèque” pour choisir un snippet existant préconfiguré par l’équipe de Screaming Frog.

Custom Javascript con Screaming Frog

La bibliothèque comprend des exemples de snippets permettant d’exécuter diverses fonctions et constitue un véritable réservoir d’inspiration pour des analyses de plus en plus granulaires et complètes :

  • Analyse du sentiment, de l’intention de recherche ou de la langue du contenu de la page.
  • Génération de textes alternatifs pour les images.
  • Activation des événements de survol de la souris.
  • Défilement d’une page (pour analyser certaines configurations avec défilement infini).
  • Extraction de contenu “intégré” à partir du contenu de la page.
  • Télécharger et enregistrer localement divers contenus tels que des images.

La bibliothèque est absolument formidable pour commencer à manipuler les JS et, en les révisant, les personnaliser de manière unique pour votre projet.

Finestra di debug per la JS personalizzata

Cette fonction permet également de définir un filtre de type de contenu, ce qui permettra à l’extrait JavaScript personnalisé d’effectuer l’action uniquement pour certains types de contenu et de ne pas gaspiller l’API d’OpenAi.

Les résultats seront alors disponibles dans l’onglet JavaScript personnalisé.

Nuova tab javascript personalizzata di Screaming Frog

Pour utiliser l’API OpenAi, vous devez acheter des crédits. Il n’est pas suffisant d’utiliser la version gratuite de Chat GPT.

Type d’extrait

En analysant les snippets, nous constatons qu’il y en a 2 types : Extractions et Actions.

Extraction d’extraits

Les extraits de type Extraction renvoient une valeur ou une liste de valeurs (nombres ou chaînes) en affichant la “Valeur” sous forme de colonnes dans l’onglet“JavaScript personnalisé“.
Chaque valeur d’une liste de valeurs sera mise en correspondance avec les colonnes de l’onglet.
Lors du traitement de ces extraits, la page cesse de charger toutes les ressources et commence à les exécuter.

Le SEO Spider ne terminera pas l’analyse de la page tant que l’extrait n’aura pas été complété. Dans certains cas, les extraits trop longs peuvent expirer (timeout) et l’exploration de la page ne sera pas terminée.
Ce type d’extrait permet de télécharger des URL et de les écrire dans un fichier texte. Des snippets sont disponibles dans la bibliothèque qui vous permettent de télécharger toutes les images d’une page web et d’en ajouter les attributs dans un fichier CSV.

Extraits d’action

Les extraits de type action ne renvoient pas de données, mais exécutent uniquement des actions. Par exemple, il existe un extrait qui simule le défilement d’une page en permettant l’analyse des images à chargement paresseux.
La principale différence avec les “Extraction Snippets” réside dans le fait que lorsqu’ils sont exécutés, la page continue de charger des ressources.

Cependant, vous devrez spécifier un délai d’attente en secondes pour ce traitement, et à l’expiration de ce délai, le SEO Spider achèvera son analyse de la page.

Échantillons de comportement

  • Le Seo Spider permet d’exécuter plusieurs snippets simultanément. Cependant, il est important de savoir que la vitesse d’analyse sera affectée par le nombre et le type d’extraits que vous exécutez. Après l’avoir débogué ces jours-ci, j’ai remarqué qu’un trop grand nombre de demandes simultanées faisait “planter” Screaming Frog. À des fins de test, j’ai commencé par une dizaine.
  • Dans le cas de plusieurs extraits, les “Actions” sont exécutées avant les “Extractions”.
  • Dans le cas d’extraits d’action ayant des valeurs de délai différentes, Screaming Frog utilise la valeur de délai maximale configurée entre les différents extraits.
  • Les snippets d’extraction interrompent le chargement de toutes les pages, de sorte qu’aucune autre demande ne sera faite. L’action n’est pas soumise à cette limitation, mais une valeur de délai doit être définie.
  • Les snippets ont accès à l’API Console Utilities de Chrome. Cela lui permet d’utiliser des méthodes telles que getEventListeners(), qui ne sont pas accessibles par le traitement JavaScript normal sur une page web.

API d’extraction d’extraits

Les snippets d’extraction interagissent avec le Seo Spider à l’aide de l’objet seoSpider, qui est une instance de la classe SEOSpider décrite ci-dessous. Dans sa forme la plus élémentaire, il est utilisé comme suit :

Copy to Clipboard

Vous pouvez également envoyer des données au SEO Spider avec une“promesse“. Le SEO Spider attend d’être complété. Cela vous permet d’effectuer des tâches asynchrones telles que des requêtes de récupération avant de renvoyer les données au robot d’indexation. Par exemple :

Copy to Clipboard

Comme dans tous les exemples mentionnés ci-dessus, l’instruction “return” doit être appelée pour mettre fin à l’exécution de la fonction. En effet, tout le code du fragment est implicitement enveloppé par le SEO Spider dans une expression de fonction immédiatement invoquée (IIFE). Ce scénario est nécessaire pour éviter les conflits dans l'”espace de noms JavaScript global” lors de l’exécution d’extraits. Si vous ne le faites pas, le SEO Spider ne peut pas recevoir de données.

L’exemple ci-dessous montre comment votre fragment de code JavaScript est implicitement inclus dans un IIFE. Il montre également comment l’instance seoSpider est créée pour vous juste avant que vous ne saisissiez votre code.

Copy to Clipboard

API d’extraction d’extraits

Cette classe fournit des méthodes pour envoyer des données au SEO Spider. N’oubliez pas : n’appelez pas “new” sur cette classe, car une instance vous est déjà fournie sous le nom de seoSpider.

Copy to Clipboard

Il renvoie les données fournies au SEO Spider pour qu’elles soient affichées dans l’onglet JavaScript personnalisé. Le paramètre “date” peut être une chaîne de caractères ou un nombre, ou une liste de chaînes de caractères ou de nombres. Si “date” représente une liste, chaque élément de la liste sera affiché dans une colonne distincte de l’onglet.

Copy to Clipboard
Copy to Clipboard

Renvoyer tout message d’erreur au SEO Spider. Ces messages apparaîtront dans une colonne de l’onglet JS personnalisé. Le résultat sera une chaîne de caractères.

Copy to Clipboard

La méthode suivante comprend saveText(text, saveFilePath, shouldAppend)

Copy to Clipboard

{Promise}Prochaine méthode loadScript(src ) → . Type : String
Charge les scripts externes qui seront utilisés par l’extrait. Le script est chargé de manière asynchrone. Rédigez votre code à l’intérieur de la clause “then”, comme indiqué dans l’exemple ci-dessous.

Copy to Clipboard

Partage d’extraits

Les snippets seront sauvegardés dans votre bibliothèque utilisateur, et vous pourrez ensuite exporter/importer la bibliothèque au format JSON pour la partager très facilement.

Come condividere lo snippet JS creato con screaming frog in formato json con i colleghi
Seo Spider Tab