Custom Javascript

Approfondimento sulla nuova funzione Custom Javascript di Screaming Frog

Screaming Frog, Guide e tutorial avanzati

INDICE:

Configurazione Custom JS

JavaScript personalizzato è una nuova funzionalità di Screaming Frog nella sua versione 20 e consente di eseguire codice JavaScript su ogni URL analizzato con il SEO Spider.
Attraverso questa funzionalità è possibile estrarre tutti i tipi di informazioni utili da una pagina web che potrebbero non essere già disponibili nel Spider SEO, oltre a comunicare con API come ChatGPT di OpenAI, LLM locali o altre librerie.

Per configurare il Seo Spider con questa funzionalità basterà cliccare su “Configurazione > Personalizzato > JavaScript”. Quindi sarà sufficiente fare clic su “Aggiungi” per iniziare a configurare un nuovo snippet, oppure su “Aggiungi dalla libreria” per scegliere uno snippet esistente e pre-configurato dallo staff di Screaming Frog.

Custom Javascript con Screaming Frog

La libreria include esempi di snippets per eseguire diverse funzioni e sono un vero e proprio bacino d’ispirazione per analisi sempre più granulari e complete:

  • Analisi del sentiment, dell’intento di ricerca o della lingua del contenuto della pagina.
  • Generazione di testo alternativo per le immagini.
  • Attivazione degli eventi di mouseover.
  • Scorrimento di una pagina (per analizzare alcuni set-up con scroll infinito).
  • Estrazione di contenuti “embeddati” dal contenuto della pagina.
  • Scaricamento e salvataggio di vari contenuti in locale come ad esempio le immagini.

La libreria è assolutamente eccezionale per iniziare a manipolare JS e, attraverso alla revisione degli stessi personalizzarli in modo univoco per il tuo progetto.

Finestra di debug per la JS personalizzata

Questa funzione permette anche di impostare un filtro per il tipo di contenuto che consentirà allo Snippet di JavaScript personalizzato di eseguire l’azione solo per determinati tipi di contenuto e non sprecare API di OpenAi.

I risultati saranno poi a disposizione nella scheda dedicata JavaScript personalizzata.

Nuova tab javascript personalizzata di Screaming Frog

Per utilizzare le API di OpenAi sarà necessario comprare dei crediti, non è sufficiente utilizzare la versione Free di Chat GPT.

Tipologia di Snippet

Analizzando gli snippet notiamo che ne esistono 2 tipologie: Estractions and Actions.

Extraction Snippets

Gli snippets di tipo Estrazione restituiscono un valore o una lista di valori (numeri o stringhe) visualizzando la “Value” come colonne nella scheda “Custom JavaScript“.
Ogni valore, in una lista di valori verrà mappato attraverso le colonne nella scheda.
Quando si elaborano questi snippets, la pagina interromperà il caricamento di tutte le risorse e inizierà l’esecuzione dello.

Il Spider SEO non completerà l’analisi della pagina fino a quando lo snippet non sarà completato. In alcuni casi gli snippet con un’esecuzione troppo prolungata potrebbero scadere (Timeout) e il crawl della pagina non verrà completato.
Questa tipologia di snippets permette di scaricare URL e scrivere su un file di testo. Nella libreria sono a disposizione snippet che permettono di scaricare tutte le immagini da una pagina web aggiungere attributi di una pagina web su un file CSV.

Action Snippets

Gli snippets di tipo Azione non restituiscono dati, ma eseguono solo azioni. Ad esempio, esiste uno snippets che simula lo scroll di una pagina consentendo di analizzare le immagini caricate con il “lazy loading”.
La differenza sostanziale rispetto agli “Extraction Snippets” risiede sul fatto che quando vengono eseguiti, la pagina continuerà a caricare le risorse.

Tuttavia, sarà necessario specificare un valore di timeout in secondi per questa elaborazione e quando questo scadrà il Spider SEO completerà l’analisi della pagina.

Comportamento Snippets

  • Il Seo Spider permette di eseguire più snippets contemporaneamente. Tuttavia, è importante essere consapevoli che la velocità di scansione verrà influenzata dal numero e dal tipo di snippet che si eseguono. Dopo averlo debuggato in questi giorni noto come troppe richieste simultanee facciano “crashare” Screaming Frog. Per test ne ho avviate una decina.
  • Nel caso di più snippet,gli “Action” vengono eseguiti prima degli “Extractions”.
  • Nel caso di snippet di Azione con valori di timeout diversi, Screaming Frog utilizzerà il valore massimo di timeout configurato tra i diversi snippet.
  • Gli Extraction Snippet interrompono tutti i caricamenti delle pagine, quindi non verranno effettuate ulteriori richieste. Gli “Action” non hanno questa limitazione, ma è necessario impostare un valore di timeout.
  • Gli Snippet hanno accesso all’API delle Utilità della Console di Chrome. Questo gli consente di utilizzare metodi come getEventListeners(), che non sono accessibili tramite elaborazione JavaScript normale su una pagina web.

Extraction Snippets API

Gli Extraction Snippet interagiscono con il Seo Spider utilizzando l’oggetto seoSpider, che è un’istanza della classe SEOSpider documentata di seguito. Nella forma più basilare, lo si utilizza come segue:

Copy to Clipboard

Puoi anche inviare dati allo Spider SEO con una “Promise“. Lo Spider SEO attende il completamento della stessa. Ciò ti consente di eseguire lavori asincroni come richieste fetch prima di restituire i dati allo Spider SEO. Ad esempio:

Copy to Clipboard

Come per tutti gli esempi appena citati anche per la Promise, è necessario chiamare l’istruzione “return” per terminare l’esecuzione della funzione. Questo perché tutto il codice del frammento è implicitamente avvolto dallo Spider SEO in un’espressione di funzione immediatamente invocata (IIFE). Questo scenario è necessario per evitare conflitti nel “namespace globale di JavaScript” durante l’esecuzione degli snippet. Se non lo fai, il Spider SEO non potrà ricevere alcun dato.

L’esempio qui sotto mostra come il tuo codice JavaScript del frammento è implicitamente incluso in un IIFE. Mostra anche come l’istanza seoSpider venga creata per te appena prima che il tuo codice venga inserito.

Copy to Clipboard

Extraction Snippets API

Questa classe fornisce metodi per inviare dati al SEO Spider. Ricorda: non chiamare “new” su questa classe, perché un’istanza ti viene già fornita chiamata seoSpider.

Copy to Clipboard

Ritorna i dati forniti allo Spider SEO per visualizzarli nella scheda JavaScript personalizzata. Il parametro “data” può essere una stringa o un numero, o una lista di stringhe o numeri. Se “data” rappresenta una lista, allora ogni elemento nella lista verrà mostrato in una colonna separata nella tab.

Copy to Clipboard
Copy to Clipboard

Ritorna eventuali messaggi di errore al SEO Spider. Questi messaggi appariranno in una colonna della scheda JS personalizzata. Il risultato sarà una stringa.

Copy to Clipboard

Il prossimo metodo comprende saveText(text, saveFilePath, shouldAppend)

Copy to Clipboard

Prossimo metodo loadScript(src) → {Promise}. Tipologia: Stringa
Carica script esterni per essere utilizzati dallo snippet. Lo script viene caricato in modo asincrono. Scrivi il tuo codice all’interno della clausola ‘then’, come mostrato nell’esempio qui sotto.

Copy to Clipboard

Condivisione degli Snippet

Gli snippet verranno salvati nella tua libreria utente, e quindi potrai esportare/importare la libreria come JSON per condividerla in modo molto semplice.

Come condividere lo snippet JS creato con screaming frog in formato json con i colleghi
Screaming Frog, Guide e tutorial avanzati

INDICE: