Custom JavaScript.

Configurer le Custom JS

Le JavaScript personnalisé est une fonction introduite dans la version 20 de Screaming Frog qui permet d’exécuter du code JavaScript sur chaque URL crawlée par SEO Spider.
Elle permet d’extraire toutes sortes d’informations utiles d’une page que SEO Spider ne fournit pas déjà, et de communiquer avec des API comme ChatGPT d’OpenAI, des LLM locaux ou d’autres bibliothèques.

Pour la configurer, clique sur 1Configuration›2Custom›3Custom JavaScript. Clique ensuite sur Add pour configurer un nouveau snippet, ou sur « Add from Library » pour choisir un snippet existant préconfiguré par l’équipe de Screaming Frog.

1234

1Custom JavaScriptLa section de la configuration.2Privacy NoteLes snippets peuvent envoyer des données à des services externes.3Snippets systèmeDes extractions et actions prêtes à ajouter.4Add from LibraryOuvre la bibliothèque des snippets.

La bibliothèque contient des exemples de snippets pour diverses tâches, une vraie source d’inspiration pour des analyses toujours plus fines 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.
• Déclenchement d’événements mouseover.
• Défilement d’une page (pour analyser certains scrolls infinis).
• Extraction de contenus intégrés dans la page.
• Téléchargement et enregistrement local de contenus, comme les images.

La bibliothèque est excellente pour commencer à manipuler du JS et, en relisant les snippets, les adapter à ton projet.

123

1Clé API et questionLes lignes à personnaliser avec ta clé et ta question.2JavaScript TesterTeste le snippet sur une URL avant le crawl.3Extraction ou ActionLe type de snippet.

Tu peux aussi définir un filtre par type de contenu pour que le snippet ne s’exécute que sur certains types et ne gaspille pas d’appels à l’API d’OpenAI.

Les résultats s’affichent ensuite dans l’onglet Custom JavaScript.

123

1Custom JavaScriptL’onglet des résultats.2Résultat du snippetLa langue de chaque page détectée par ChatGPT.3Snippet configuréNom, type, content type et code.

Pour utiliser l’API d’OpenAI, il faut acheter des crédits : la version gratuite de ChatGPT ne suffit pas.

Types de snippets

Il existe 2 types de snippets : Extractions et Actions.

Snippets d’extraction

Les snippets d’extraction renvoient une valeur ou une liste de valeurs (nombres ou chaînes), affichées en colonnes dans l’onglet « Custom JavaScript ».
Chaque valeur d’une liste est placée dans sa propre colonne.
Pendant leur exécution, la page arrête de charger des ressources et le snippet démarre.

SEO Spider ne termine l’analyse de la page qu’une fois le snippet terminé. Parfois, des snippets trop longs dépassent le délai (timeout) et le crawl de la page n’aboutit pas.
Ce type de snippet peut télécharger des URL et écrire dans un fichier texte. La bibliothèque propose des snippets qui téléchargent toutes les images d’une page ou ajoutent des attributs de page dans un fichier CSV.

Snippets d’action

Les snippets d’action ne renvoient pas de données, ils exécutent seulement des actions. Par exemple, un snippet simule le défilement d’une page pour analyser les images chargées en lazy loading.
La différence essentielle avec les snippets d’extraction est que, pendant leur exécution, la page continue de charger les ressources.

Il faut toutefois définir un délai en secondes : à son expiration, SEO Spider termine l’analyse de la page.

Comportement des snippets

• SEO Spider peut exécuter plusieurs snippets à la fois. Attention : la vitesse du crawl dépend du nombre et du type de snippets. En le déboguant, j’ai constaté que trop de requêtes simultanées font planter Screaming Frog. Pour mes tests, j’en ai lancé une dizaine.
• Avec plusieurs snippets, les actions s’exécutent avant les extractions.
• Avec des snippets d’action aux délais différents, Screaming Frog utilise le délai le plus long.
• Les snippets d’extraction arrêtent tout chargement de la page, aucune autre requête n’est donc faite. Les actions n’ont pas cette limite, mais il faut définir un délai.
• Les snippets ont accès à l’API Console Utilities de Chrome, ce qui leur permet d’utiliser des méthodes comme getEventListeners(), inaccessibles au JavaScript normal d’une page.

API des snippets d’extraction

Les snippets d’extraction communiquent avec SEO Spider via l’objet seoSpider, une instance de la classe SEOSpider documentée ci-dessous. Dans sa forme la plus simple :

// The SEO Spider will display '1' in a single column
return seoSpider.data(1);

// The SEO Spider will display each number in a separate column
return seoSpider.data([1, 2, 3]);

// The SEO Spider will display 'item1' in a single column
return seoSpider.data("item1");

// The SEO Spider will display each string in a separate column
return seoSpider.data(["item1", "item2"]);

Tu peux aussi envoyer des données à SEO Spider avec une « Promise ». SEO Spider attend qu’elle soit résolue, ce qui permet de faire des opérations asynchrones, comme des requêtes fetch, avant de renvoyer les données. Par exemple :

let promise = new Promise(resolve => {
    setTimeout(() => resolve("done!"), 1000);
});

// sends "done!" to the SEO Spider after 1 second
return promise.then(msg => seoSpider.data(msg));

Comme dans tous les exemples précédents, avec une Promise aussi il faut utiliser « return » pour terminer la fonction. En effet, SEO Spider enveloppe implicitement tout le code du snippet dans une fonction immédiatement invoquée (IIFE), pour éviter les conflits dans l’espace de noms global de JavaScript. Sans cela, SEO Spider ne reçoit aucune donnée.

L’exemple ci-dessous montre comment ton code est implicitement enveloppé dans une IIFE, et comment l’instance seoSpider est créée juste avant ton code.

(function () {
    // seoSpider object created for use by your snippet
    const seoSpider = new SEOSpider();

    // Your JavaScript Snippet code is inserted here i.e:
    return seoSpider.data("data");
})();

La classe SEOSpider

Cette classe fournit des méthodes pour envoyer des données à SEO Spider. Attention : n’appelle pas « new » sur cette classe, une instance appelée seoSpider est déjà fournie.

data(data)

Renvoie les données à SEO Spider pour les afficher dans l’onglet Custom JavaScript. Le paramètre « data » peut être une chaîne ou un nombre, ou une liste de chaînes ou de nombres. Si c’est une liste, chaque élément s’affiche dans une colonne distincte.

PARAMÈTRES:
Name: Data
Type: string | number | Array.<string> | Array.<number>

EXEMPLE:
// Get all H1 and H2 headings from page
let headings = Array.from(document.querySelectorAll("h1, h2"))
    .map(heading => heading.textContent.trim());

return seoSpider.data(headings);

error(msg)

Renvoie les messages d’erreur à SEO Spider. Ils apparaissent dans une colonne de l’onglet Custom JavaScript. Le résultat est une chaîne.

return functionThatReturnsPromise()
    .then(success => seoSpider.data(success))
    .catch(error => seoSpider.error(error));
}

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

text
Type: string
Le texte à enregistrer

saveFilePath
Type: string
Le chemin complet du fichier où le texte sera enregistré. Le dossier est créé s’il n’existe pas

shouldAppend
Type: boolean
À régler sur true pour ajouter le texte à la fin du fichier

EXEMPLE:

return seoSpider.saveText('some text', '/Users/john/file.txt', false);

La méthode suivante est loadScript(src), de type chaîne.
Elle charge des scripts externes à utiliser dans le snippet. Le script se charge de façon asynchrone : écris ton code dans la clause « then », comme dans l’exemple ci-dessous.

return seoSpider.loadScript("URL de ton script")
    .then(() => {
        // The script has now loaded, you can start using it from here
 
        ...
 
        // Return data to the SEO Spider
        return seoSpider.data(your_data)
    })
    .catch(error => seoSpider.error(error));

Partager les snippets

Les snippets sont enregistrés dans ta bibliothèque utilisateur, que tu peux exporter/importer en JSON pour la partager très facilement.

123

1UserLa bibliothèque avec tes snippets.2Import et ExportTélécharge ou charge les snippets au format JSON.3Snippets enregistrésTes snippets personnels, y compris de type Action.