Custom JavaScript.

Configurar el Custom JS

El JavaScript personalizado es una función introducida en la versión 20 de Screaming Frog que permite ejecutar código JavaScript en cada URL rastreada por SEO Spider.
Con ella puedes extraer todo tipo de información útil de una página que SEO Spider quizá no ofrezca ya, y comunicarte con API como ChatGPT de OpenAI, LLM locales u otras librerías.

Para configurarla, haz clic en 1Configuration›2Custom›3Custom JavaScript. Luego haz clic en Add para configurar un nuevo snippet, o en «Add from Library» para elegir uno existente preconfigurado por el equipo de Screaming Frog.

1234

1Custom JavaScriptLa sección de la configuración.2Privacy NoteLos snippets pueden enviar datos a servicios externos.3Snippets del sistemaExtracciones y acciones listas para añadir.4Add from LibraryAbre la librería de snippets.

La librería incluye ejemplos de snippets para distintas tareas y es una auténtica fuente de inspiración para análisis cada vez más detallados y completos:

• Análisis del sentimiento, la intención de búsqueda o el idioma del contenido de la página.
• Generación de texto alternativo para las imágenes.
• Activación de eventos mouseover.
• Desplazamiento de una página (para analizar algunos scrolls infinitos).
• Extracción de contenidos incrustados en la página.
• Descarga y guardado en local de distintos contenidos, como las imágenes.

La librería es ideal para empezar a trabajar con JS y, revisando los snippets, adaptarlos a tu proyecto.

123

1Clave API y preguntaLas líneas que personalizar con tu clave y tu pregunta.2JavaScript TesterPrueba el snippet en una URL antes del rastreo.3Extraction o ActionEl tipo de snippet.

También puedes definir un filtro por tipo de contenido para que el snippet solo se ejecute en ciertos tipos y no desperdicie llamadas a la API de OpenAI.

Los resultados aparecen después en la pestaña Custom JavaScript.

123

1Custom JavaScriptLa pestaña con los resultados.2Resultado del snippetEl idioma de cada página detectado por ChatGPT.3Snippet configuradoNombre, tipo, content type y código.

Para usar la API de OpenAI hay que comprar créditos: no basta con la versión gratuita de ChatGPT.

Tipos de snippets

Hay 2 tipos de snippets: Extractions y Actions.

Snippets de extracción

Los snippets de extracción devuelven un valor o una lista de valores (números o cadenas), que se muestran como columnas en la pestaña «Custom JavaScript».
Cada valor de una lista se coloca en su propia columna.
Al ejecutarlos, la página deja de cargar recursos y el snippet empieza a ejecutarse.

SEO Spider no termina el análisis de la página hasta que el snippet acaba. A veces los snippets que tardan demasiado agotan el tiempo de espera (timeout) y el rastreo de la página no se completa.
Este tipo de snippet puede descargar URL y escribir en un archivo de texto. La librería incluye snippets que descargan todas las imágenes de una página o añaden atributos de la página a un archivo CSV.

Snippets de acción

Los snippets de acción no devuelven datos, solo ejecutan acciones. Por ejemplo, hay uno que simula el desplazamiento de una página para analizar las imágenes cargadas con lazy loading.
La diferencia clave con los de extracción es que, mientras se ejecutan, la página sigue cargando recursos.

Eso sí, hay que fijar un tiempo de espera en segundos y, cuando se agota, SEO Spider termina el análisis de la página.

Comportamiento de los snippets

• SEO Spider puede ejecutar varios snippets a la vez. Ten en cuenta que la velocidad de rastreo depende del número y del tipo de snippets. Al depurarlo he notado que demasiadas peticiones simultáneas hacen que Screaming Frog se cuelgue. En mis pruebas lancé unos diez.
• Con varios snippets, las acciones se ejecutan antes que las extracciones.
• Con snippets de acción con tiempos de espera distintos, Screaming Frog usa el mayor.
• Los snippets de extracción detienen toda carga de la página, así que no se hacen más peticiones. Las acciones no tienen este límite, pero hay que fijar un tiempo de espera.
• Los snippets tienen acceso a la API Console Utilities de Chrome, lo que les permite usar métodos como getEventListeners(), que no están disponibles para el JavaScript normal de una página.

API de los snippets de extracción

Los snippets de extracción se comunican con SEO Spider mediante el objeto seoSpider, una instancia de la clase SEOSpider documentada más abajo. En su forma más básica se usa así:

// 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"]);

También puedes enviar datos a SEO Spider con una «Promise». SEO Spider espera a que se resuelva, lo que permite hacer trabajo asíncrono, como peticiones fetch, antes de devolver los datos. Por ejemplo:

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));

Como en todos los ejemplos anteriores, también con una Promise hay que usar «return» para terminar la función. Esto se debe a que SEO Spider envuelve implícitamente todo el código del snippet en una función invocada inmediatamente (IIFE), para evitar conflictos en el espacio de nombres global de JavaScript. Si no lo haces, SEO Spider no recibirá ningún dato.

El ejemplo de abajo muestra cómo tu código se envuelve implícitamente en una IIFE y cómo se crea la instancia seoSpider justo antes de insertar tu código.

(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 clase SEOSpider

Esta clase ofrece métodos para enviar datos a SEO Spider. Recuerda: no llames a «new» sobre esta clase, porque ya tienes una instancia llamada seoSpider.

data(data)

Devuelve los datos a SEO Spider para mostrarlos en la pestaña Custom JavaScript. El parámetro «data» puede ser una cadena o un número, o una lista de cadenas o números. Si es una lista, cada elemento se muestra en una columna distinta.

PARÁMETROS:
Name: Data
Type: string | number | Array.<string> | Array.<number>

EJEMPLO:
// 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)

Devuelve mensajes de error a SEO Spider. Aparecen en una columna de la pestaña Custom JavaScript. El resultado es una cadena.

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

El siguiente método es saveText(text, saveFilePath, shouldAppend)

text
Tipo: string
El texto que se guardará

saveFilePath
Tipo: string
La ruta completa del archivo donde se guardará el texto. Si la carpeta no existe, se crea

shouldAppend
Tipo: boolean
Ponlo en true para añadir el texto al final del archivo

EJEMPLO:

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

El siguiente método es loadScript(src), de tipo cadena.
Carga scripts externos para usarlos en el snippet. El script se carga de forma asíncrona, así que escribe tu código dentro de la cláusula «then», como en el ejemplo de abajo.

return seoSpider.loadScript("URL de tu 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));

Compartir los snippets

Los snippets se guardan en tu librería de usuario, que puedes exportar e importar en JSON para compartirla muy fácilmente.

123

1UserLa librería con tus snippets.2Import y ExportDescarga o carga los snippets en formato JSON.3Snippets guardadosTus snippets personales, también de tipo Action.