Libreria JS per analisi utilizzo di siti web
Studente/i
Gabriele Zorloni
Relatore
Galli Vanni
Correlatore
Galli Vanni
Committente
-
Corso di laurea
Ing. Informatica
Modulo
C10087
Anno
2018/2019
Data
30 agosto 2019
i
Indice
1 Abstract 1
2 Introduzione 3
2.1 Descrizione progetto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Compiti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3 Requisiti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3 Contestualizzazione 5
3.1 Analisi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.2 Utilizzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
4 Tool presenti sul mercato 7
4.1 Alternative disponibili . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.2 Analisi alternative . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.2.1 SEMrush . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
4.2.2 SEOZoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.2.3 Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.2.4 Test my site with Google . . . . . . . . . . . . . . . . . . . . . . . . . 11
5 Principali tecnologie utilizzate 13
5.1 Spring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.2 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.2.1 Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.3 Chart.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.4 FileSaver.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.4.1 Utilizzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
6 Sviluppo 17
6.1 Metodologia adottata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
6.2 Back-log . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
6.3 Progettazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
6.3.1 Strutturazione database . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Libreria JS per analisi utilizzo di siti web
ii INDICE
6.3.1.1 Tabella page_event . . . . . . . . . . . . . . . . . . . . . . . 19
6.3.1.2 Tabella mouse_coordinate . . . . . . . . . . . . . . . . . . . 20
6.4 Design dell’architettura . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
6.4.1 Interazione delle tecnologie . . . . . . . . . . . . . . . . . . . . . . . . 21
7 Funzionamento 23
7.0.1 Front-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
7.0.2 Back-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
7.1 Design dell’interfaccia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
7.1.1 Pagina principale libreria . . . . . . . . . . . . . . . . . . . . . . . . . 24
7.1.2 Pagina dettaglio libreria . . . . . . . . . . . . . . . . . . . . . . . . . . 26
7.1.3 Pagina utente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
7.2 Heatmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.2.1 Raccolta dati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.2.2 Utilizzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
8 Conclusione 31
8.1 Stato del lavoro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
8.2 Problemi riscontrati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
8.3 Personali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
8.4 Sviluppi futuri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Allegati 33
Libreria JS per analisi utilizzo di siti web
iii
Elenco delle figure
4.1 Overview tool SEMrush. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4.2 Overview tool SEOZoom. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
4.3 Overview tool Google Analytics. . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.4 Overview tool test my site with Google. . . . . . . . . . . . . . . . . . . . . . 11
5.1 Spring. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.2 Codice utilizzo libreria FileSaver.js. . . . . . . . . . . . . . . . . . . . . . . . . 16
6.1 Back-log features sviluppate. . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
6.2 Schema tabella page_event. . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.3 Schema tabella mouse_coordinate. . . . . . . . . . . . . . . . . . . . . . . . 21
6.4 Descrizione architettura client-server. . . . . . . . . . . . . . . . . . . . . . . 21
6.5 Tecnologie utilizzate nel server e nel client. . . . . . . . . . . . . . . . . . . . 22
7.1 Pagina principale libreria di analisi. . . . . . . . . . . . . . . . . . . . . . . . . 26
7.2 Pagina dettaglio libreria di analisi. . . . . . . . . . . . . . . . . . . . . . . . . 27
7.3 Pagina utente libreria di analisi. . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.4 Visualizzazione menu heatmap. . . . . . . . . . . . . . . . . . . . . . . . . . 29
7.5 Visualizzazione heatmap. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Libreria JS per analisi utilizzo di siti web
iv ELENCO DELLE FIGURE
Libreria JS per analisi utilizzo di siti web
1
Capitolo 1
Abstract
Italiano
L’analisi del proprio sito web permette di raccogliere molti dati utili per migliorare il servizio
offerto, come ad esempio quali utenti visitano il proprio sito internet e tenere traccia di ciò
che effettivamente loro eseguono sul sito web sotto esame. Attraverso una approfondita
analisi di questi dati è possibile offrire una esperienza personalizzata per ogni tipo di uten-
te. In questo caso le informazioni giocano un ruolo fondamentale per il fatto che un utente
soddisfatto sarà maggiormente stimolato ad utilizzare nuovamente il nostro servizio.
I principali vantaggi derivanti da questa operazione sono il fatto di conoscere i propri clienti
e da dove arrivano, per scoprire i loro interessi e indicazioni simili, e quelli di capire lo spo-
stamento del traffico dati sul proprio sito web. Grazie a queste informazioni derivanti dalla
libreria sviluppata si potrà migliorare la gestione ed ottimizzazione del proprio sito internet.
Libreria JS per analisi utilizzo di siti web
2 Abstract
English
The analysis of your website allows you to collect a lot of useful data to improve the service
offered, such as which users visit their website and keep track of what they actually do on
the website under review. Through a thorough analysis of this data it is possible to offer a
personalized experience for each type of user. In this case the information plays a funda-
mental role due to the fact that a satisfied user will be more stimulated to use our service
again.
The main advantages deriving from this operation are the fact of knowing your customers
and where they come from, to discover their interests and similar indications, and to under-
stand the shifting of data traffic on your website. Thanks to this information deriving from the
developed library, it will be possible to improve the management and optimization of your
website.
Libreria JS per analisi utilizzo di siti web
3
Capitolo 2
Introduzione
2.1 Descrizione progetto
Lo scopo di questo progetto di diploma è quello di sviluppare una libreria in linguaggio Ja-
vaScript per l’analisi di utilizzo di determinati siti web, che comprenda sia la parte di raccolta
dati che quella di presentazione degli stessi.
La libreria deve permettere di analizzare come gli utenti di un determinato sito web interagi-
scano con esso e deve, anche, poter essere inclusa in qualsiasi sito web senza influire sul
suo funzionamento naturale.
Per questo motivo è stato fondamentale sviluppare una parte back-end, che si occupasse
della raccolta dati e della loro elaborazione, e una parte front-end per la presentazione ed
analisi degli stessi.
I dati maggiormente raccolti sono stati, ad esempio: tempo trascorso sulle pagine, numero
di click effettuato sulle pagine, numero di click sugli elementi delle diverse pagine, zone più
frequentate delle pagine, sessioni attive ed elementi maggiormente selezionati.
In fine è stata eseguita una raccolta dati completa di tutti quegli eventi significativi che
accadono sul sito web preso in esame.
2.2 Compiti
I principali compiti svolti nell’arco del progetto sono stati:
• Analizzare i tool presenti sul mercato.
• Realizzare la libreria, comprendente le due parti richieste.
2.3 Requisiti
Gli obiettivi principali del progetto erano:
Libreria JS per analisi utilizzo di siti web
4 Introduzione
• Utilizzo di JavaScript come linguaggio principale per la libreria.
• Utilizzo di Spring per sviluppo parte front-end e back-end.
Libreria JS per analisi utilizzo di siti web
5
Capitolo 3
Contestualizzazione
3.1 Analisi
L’analisi del proprio sito web permette di raccogliere molti dati utili per migliorare il servizio
offerto. Attraverso una approfondita analisi dei dati raccolti è possibile offrire una esperienza
personalizzata per ogni tipo di utente.
In questo caso le informazioni giocano un ruolo fondamentale per il fatto che un utente sod-
disfatto sarà maggiormente stimolato ad utilizzare nuovamente il nostro servizio.
La libreria implementata permette l’analisi di come gli utenti di un determinato sito web in-
teragiscano con esso e grazie a queste analisi è possibile offrire un’esperienza di utilizzo
migliore agli utenti del proprio sito.
Infatti attraverso la libreria stessa si potrà sapere quanto tempo passano gli utenti sulle
varie pagine, il numero di click effettuato sui vari elementi di ogni pagine, heatmap per
vedere le zone maggiormente utilizzate di ogni pagina ed infine si potrà sia avere una ana-
lisi mensile (cioè del mese corrente) e settimanale (cioè della settimana corrente o quelle
immediatamente precedente a quella corrente).
3.2 Utilizzo
L’utilità della libreria consiste nell’analizzare e mettere a disposizione i dati acquisiti dal sito
web sotto osservazione, i quali possono essere elaborati per decidere come migliorare la
propria applicazione web.
Infatti tramite le apposite pagine di analisi messe a disposizione è possibile visualizzare
i dati generali, ma anche quelli relativi alle pagine di dettaglio da i quali possono essere
estrapolate diverse informazioni utili per una propria analisi e maggiormente approfondita.
Tramite questa libreria, come detto già in precedenza, si potrà migliorare il proprio sito così
Libreria JS per analisi utilizzo di siti web
6 Contestualizzazione
da permettere agli utenti una esperienza migliore e personalizzata.
Infatti si può affermare che un utente soddisfatto della propria esperienza su un determinato
sito sarà maggiormente invogliato a tornarci ogni qual volta che ne avrà bisogno.
Libreria JS per analisi utilizzo di siti web
7
Capitolo 4
Tool presenti sul mercato
4.1 Alternative disponibili
Le principali alternative disponibili sul mercato per l’analisi di siti web sono:
• SEMrush.
• SEOZoom.
• Google Analytics.
• Test my site with Google.
4.2 Analisi alternative
4.2.1 SEMrush
SEMrush rappresenta uno dei migliori tool dedicati all’analisi di un siti web, piattaforma on-
line a pagamento che permette di analizzare in maniera completa e professionale un sito
web. La piattaforma mette a disposizione diversi strumenti utili per analizzare il traffico infor-
matico di un sito, le parole chiave per le quali è indicizzato e consente di avere informazioni
precise sulla salute dello stesso in termini di SEO1.
SEMrush può essere utilizzato gratuitamente per un massimo di 10 operazioni al giorno, in
seguito alla registrazione di un proprio account personale.
1SEO è quell’insieme di strategie volte ad aumentare la visibilità di un sito internet migliorandone la posi-zione nelle classifiche dei motori di ricerca, nei risultati non a pagamento. S.E.O. è un acronimo inglese cheindica:"Search Engine Optimization", la cui traduzione significa: “ottimizzazione per i motori di ricerca“. Questepratiche sono molteplici e riguardano diversi aspetti di un sito web: l’ottimizzazione della struttura del sito, delcodice HTML, dei contenuti testuali, la gestione dei link in entrata ed in uscita.
Libreria JS per analisi utilizzo di siti web
8 Tool presenti sul mercato
Figura 4.1: Overview tool SEMrush.
Per iniziare l’analisi di un sito web basta digitare il suo l’indirizzo URL nel campo relativo al
dominio, dopo di che si deve attendere la visualizzazione del risultato. Il sito Internet verrà
analizzato in termini delle principali caratteristiche SEO e, nella successiva schermata, si
potranno visualizzare alcune informazioni importanti, come ad esempio: i valori della ricer-
ca organica, i numeri dei back-link e le keyword di ricerca organica principali ed i principali
competitor.
Le principali caratteristiche di questo software sono:
• Volume del traffico: permette di fare una valutazione del traffico complessivo e
confrontare il volume di traffico dei tuoi competitor e dei partner potenziali.
• Traffico desktop e mobile: rapporto tra il traffico desktop e mobile con il coinvolgi-
mento degli utenti in base al tipo di device che stanno utilizzando.
• Distribuzione geografica: Localizza i principali paesi dove il sito web risulta essere
più attivo.
4.2.2 SEOZoom
Un altro strumento utile per analisi di un sito web a livello SEO è SEOZoom, anch’essa
piattaforma a pagamento che permette di analizzare in modo completo e professionale il
proprio sito Web.
Libreria JS per analisi utilizzo di siti web
9
Figura 4.2: Overview tool SEOZoom.
È però possibile utilizzare SEOZoom gratuitamente e senza registrazione, per analizzare un
determinato sito internet, con un numero limitato di ricerche giornaliere. Basterà collegarsi
alla pagina principale del servizio e, nel campo di testo che si trova al centro, digitare l’URL
del sito web da analizzare ed avviare l’analisi desiderata.
Le principali caratteristiche di questo software sono:
• Andamento sito: monitora il posizionamento di pagine e keyword.
• Analisi contenuti: punti forti e deboli dei contenuti delle diverse pagine del sito web.
• Analisi del profilo back-link.
• Gestione e ottimizzazione.
4.2.3 Google Analytics
Un altro tool molto importante per analizzare un sito Internet è Google Analytics, il quale
si rivolge principalmente al marketing di internet e ai web-master. In questo caso si tratta
della piattaforma messa a disposizione gratuitamente da Google, che serve a monitorare il
traffico del proprio sito web visualizzando statistiche dedicate principalmente ai visitatori e
al traffico generato dal sito stesso.
Google Analytics è utile anche per monitorare in maniera approfondita le fonti di traffico,
come per esempio i motori di ricerca e i siti referer.
Libreria JS per analisi utilizzo di siti web
10 Tool presenti sul mercato
Per utilizzare questo servizio è necessario un account Google. Il proprio sito deve essere
stato precedentemente impostato come sito web di proprietà tramite il relativo pannello di
amministrazione. Una volta eseguite queste operazioni preliminari si potrà iniziare ad utiliz-
zare il servizio di analisi messo a disposizione.
Figura 4.3: Overview tool Google Analytics.
Nella pagina iniziale di Google Analytics si potranno vedere diversi grafici dettagliati con-
tenenti diversi tipi di informazioni come ad esempio: quelle relative agli utenti, relative alle
sessioni, i valori della frequenza di rimbalzo e anche avere informazioni sulla durata della
sessione.
L’approccio del servizio è quello di mostrare ad alto livello vari tipi di dashboard, in grado
di soddisfare velocemente l’utente occasionale, ma anche report più approfonditi che ri-
spondono alle esigenze degli utenti più esperti e dei responsabili di Marketing. Attraverso
l’utilizzo di Google Analytics, è possibile individuare quali siano le pagine più visualizzate
dai visitatori di un sito, la loro provenienza, per quanto tempo sono rimasti all’interno del sito
e la loro posizione geografica.
Google Analytics viene implementato aggiungendo quello che viene definito "page tag". Si
tratta del codice di tracciamento di Google (GATC, Google Analytics Tracking Code) ed è un
frammento di codice JavaScript che l’utente aggiunge in tutte le pagine del proprio dominio
web. Questo codice, che dialoga direttamente con il server di Google, consente di racco-
gliere i dati di navigazione degli utenti, che poi vengono elaborati e sviluppati e mostrati
all’interno della piattaforma.
Libreria JS per analisi utilizzo di siti web
11
Per funzionare, il GATC carica un file JavaScript più grande dal server di Google, dopo
di che imposta alcune variabili con il numero di account dello user. Il file ga.js ha una
dimensione media di 18 KB e viene scaricato una volta sola, all’inizio della visita, poiché
viene salvato all’interno della cache. Oltre a trasmettere informazioni al server di Google,
il GATC imposta i first party cookie in ogni computer dei Visitatori. Questo consente di
memorizzare informazioni anonime come il tipo di Visitatore (nuovo o di ritorno), la durata
della Visita e la fonte di provenienza della Visita (Diretto, Organico o da Sito Referrer).
4.2.4 Test my site with Google
Una valida alternativa ai tool sopra descritti risulta essere "Test my site with Google", il quale
offre dei servizi leggermente diversi.
Le prestazioni di sito web in termini di velocità e di caricamento risultano essere criteri molto
importanti.
Per questo motivo una valida alternativa è "Test my site with Google" che permette di testa-
re la velocità di un sito Internet su dispositivi mobili, ormai maggior fonte di traffico. Inoltre,
questo tool è utile in quanto permette di fornire dei suggerimenti per ottimizzazione il proprio
applicativo.
Figura 4.4: Overview tool test my site with Google.
Per utilizzarlo, basta accedere alla sua pagina principale, dopo di che nel campo di testo
basta inserire l’URL desiderato per verificarne la velocità. Una volta terminato il processo di
analisi saranno disponibili i risultati attraverso i quali si potranno verificare le caratteristiche
del proprio sito internet e nel caso in cui non siano ottimi si potrà pensare a delle opportune
Libreria JS per analisi utilizzo di siti web
12 Tool presenti sul mercato
modifiche da apportare per migliorare la qualità e velocità del proprio servizio offerto.
Libreria JS per analisi utilizzo di siti web
13
Capitolo 5
Principali tecnologie utilizzate
5.1 Spring
Spring è un framework open source per lo sviluppo di applicazioni su piattaforma Java. Esso
fornisce un modello di programmazione e configurazione completo per le moderne applica-
zioni enterprise basate su Java. Uno dei suoi elementi chiave è il supporto infrastrutturale a
livello di applicazione.
Figura 5.1: Spring.
Le sua caratteristiche principali sono:
• Tecnologie di base: iniezione di dipendenze, eventi e risorse.
• Testing: validazione della propria applicazione attraverso la suite di test.
• Accesso dati: attraverso transazioni, JDBC, ORM e Marshalling XMl.
• Spring MVC: pattern architetturale per separare logica di business dalla logica di
presentazione dei dati.
Libreria JS per analisi utilizzo di siti web
14 Principali tecnologie utilizzate
• Integrazione: JSM, JCA, JMX e cache.
• Linguaggi: Java, Kotlin, Groovy e linguaggi dinamici.
5.2 jQuery
jQuery è una libreria JavaScript per applicazioni web. Nasce con lo scopo di semplificare
la selezione, la manipolazione, la gestione degli eventi e l’animazione di elementi DOM
presenti nelle pagine HTML, nonché implementare funzionalità AJAX. Le sue caratteristiche
principali permettono agli sviluppatori JavaScript di astrarre le interazioni a basso livello tra
interazione e animazione dei contenuti delle pagine. L’approccio di tipo modulare di jQuery
consente la creazione semplificata di applicazioni web e versatili contenuti dinamici.
5.2.1 Ajax
Attraverso jQuery è possibile implementare chiamate asincrone e sincrone attraverso Ajax.
Esso da la possibilità di cambiare dinamicamente il contenuto di una pagina web o di una
sua porzione senza necessariamente effettuare il caricamento dell’URL, recuperando dati
da risorse web, sia dinamici che statici, che viene contatta attraverso una chiamata HTTP
da file JavaScript. Sarà il file JavaScript stesso ad occuparsi di gestire eventuali errori e di
manipolare il risultato ricevuto in risposta integrandolo nel DOM del documento.
Attraverso il metodo jQuery.ajax() vengono effettuata la chiamata sopra descritta ed è
possibile personalizzarla attraverso i diversi parametri disponibili.
Libreria JS per analisi utilizzo di siti web
15
5.3 Chart.js
La libreria Chart.js permette la creazione di semplici e flessibili grafici in JavaScript. Attra-
verso questa è possibile unire diversi tipi di grafici sotto un unico grafico, come ad esempio
è possibile abbinare grafici a barre e linee.
Le sue principali caratteristiche sono:
• Open source.
• Diversi tipi di grafici: disponibili otto diversi tipi di grafici.
• HTML5 canvas: ottime prestazioni di rendering su tutti i browser commerciali moder-
ni.
• Responsive: Ridisegna i grafici in base alle nuove dimensioni della finestra.
5.4 FileSaver.js
FileSaver.js è una libreria molto utilizzata nel modo JavaScript per il salvataggio lato client
di file in diversi formati. Risulta essere perfetta per le applicazioni web ed è supportata da
tutti i browser commerciali. La sua potenza è la sua facilità di utilizzo. Infatti questa libreria
è sotto licenza MIT e permette il libero utilizzo.
Libreria JS per analisi utilizzo di siti web
16 Principali tecnologie utilizzate
5.4.1 Utilizzo
E’ possibile salvare il contenuto della pagina di dettaglio della libreria in formato CSV richia-
mando il metodo SaveAs() e passandogli come argomento un oggetto di tipo Blob. Come
nome del file ho deciso di utilizzare il nome della pagina di dettaglio con aggiunta della pa-
rola "Table Data" o "View Data". Il primo permette generare e salvare un file lato client con
estensione CSV contenente i dati della tabella della pagina di dettaglio, mentre il secondo
di salvare un file, sempre con estensione CSV, contente i dati relativi alla pageviews.
Figura 5.2: Codice utilizzo libreria FileSaver.js.
Libreria JS per analisi utilizzo di siti web
17
Capitolo 6
Sviluppo
6.1 Metodologia adottata
Per l’organizzazione del ciclo di sviluppo ho deciso di utilizzare la metodologia Scrum, la
quale permette di gestire il periodo di sviluppo del proprio software. Essa permette di piani-
ficare in anticipo i passi da svolgere per lo sviluppo del proprio progetto.
Vengono utilizzati dei meccanismi propri di un processo di controllo empirico, in cui cicli di
feedback permettono di tenere sotto controllo il tutto.
Infatti la metodologia Scrum si basa su tre principi fondamentali:
• Trasparenza: gli aspetti significativi devono essere visibili al responsabile del lavoro.
• Ispezione: ispezionare frequentemente ciò che è stato prodotto ed i progressi realiz-
zati.
• Adattamento: intervenire sul processo nel caso in cui uno o più aspetti non sono
consoni al processo di produzione.
Il progetto in questione è stato suddiviso in sprint della durata di due settimane ciascuno.
Ciò a permesso, da parte del relatore, di tenere sotto controllo il lavoro così che venisse
implementato ciò che effettivamente fosse richiesto, con eventuali cambiamenti desiderati
da parte dello stesso relatore.
6.2 Back-log
Di seguito si può vedere il back-log delle features sviluppate.
Libreria JS per analisi utilizzo di siti web
18 Sviluppo
Figura 6.1: Back-log features sviluppate.
6.3 Progettazione
La fase di programmazione è stata realizzata principalmente in Spring, il quale è un fra-
mework open source per lo sviluppo di applicazioni web in linguaggio Java.
Per la parte database è stato utilizzato MySQL per salvare i dati provenienti dal sito web
analizzato.
La gestione della logica delle pagine di presentazione è stata strutturata attraverso HTML
Libreria JS per analisi utilizzo di siti web
19
(versione 5), lo stile in CSS (versione 3) e i diversi grafici tramite JavaScript (versione 1.8.5).
Principalmente l’applicazione sviluppata è costituita da due parti:
• Back-end: la quale si occupa soprattutto di salvare i dati sul database MySQL attra-
verso un file JavaScript che mette in collegamento sito web e back-end stesso, della
loro elaborazione e della risoluzione dei percorsi messi a disposizione.
• Front-end: la quale si occupa essenzialmente della presentazione delle pagine per
la visualizzazione dei dati della libreria.
6.3.1 Strutturazione database
Il database MySQL della libreria è stato strutturato in modo da ospitare i dati provenien-
ti dal sito web preso in esame. I principali dati raccolti sono gli eventi che accadono su
ogni determinata pagina e la posizione del mouse ogni istante. Il database è composto
essenzialmente da due tabelle, che si chiamano: "page_event" e "mouse_coordinate".
6.3.1.1 Tabella page_event
La presente tabella ha il compito di persistere le informazioni riguardanti gli eventi accaduti
sulle pagine del sito web sotto analisi ed è costituita dalle seguenti colonne:
• id: identificatore univoco del record.
• data: data in cui l’evento è stato registrato.
• html_element_id: id dell’elemento HTML, se presente.
• name: nome dell’elemento che ha scaturito l’evento.
• page_name: nome della pagina del sito internet in cui l’evento è accaduto.
• time: tempo trascorso su quella determinata pagina.
• type: tipo dell’elemento che ha scaturito l’evento.
• user_id: per sapere quale utente ha scaturito l’evento.
• n_week: numero della settimana in cui l’evento è successo, utile per facilitare alcune
query.
• n_month: numero del mese in cui l’evento è successo, utile per facilitare alcune
query.
• os: tipo di sistema operativo utilizzato.
Libreria JS per analisi utilizzo di siti web
20 Sviluppo
Figura 6.2: Schema tabella page_event.
6.3.1.2 Tabella mouse_coordinate
La presente tabella ha il compito di persistere le informazioni riguardanti le coordinate del
mouse su ogni singola pagina sotto esame ed è costituita dalle seguenti colonne:
• n_month: numero del mese in cui l’evento è successo, utile per facilitare alcune
query.
• n_week: numero della settimana in cui l’evento è successo, utile per facilitare alcune
query.
• pagename: nome della pagina del sito internet in cui l’evento è accaduto.
• user: per sapere quale utente ha scaturito l’evento.
• x: coordinata x del mouse registrata.
• y: coordinata y del mouse registrata.
Libreria JS per analisi utilizzo di siti web
21
Figura 6.3: Schema tabella mouse_coordinate.
6.4 Design dell’architettura
L’utente che utilizzerà l’applicativo potrà accedere all’URL della libreria e visualizzare i dati
concernenti gli eventi accaduti sul sito web in esame. Sarà possibile accedervi tramite
qualsiasi dispositivo, che sia computer, smartphone, tablet, etc...
Inoltre lato client sarà possibile visualizzare la heatmap su ogni singola pagina del sito per
vedere le zone di maggior utilizzo e scaricare i dati delle diverse pagine di dettaglio in file
con estensione CSV.
Per eseguire tutti queste funzionalità ho avuto la necessità di utilizzare una architettura
client-server, la quale mi ha permesso di poter persistere i dati su un database MySQL,
elaborarli e poterli presentare lato client attraverso pagine interattive.
Figura 6.4: Descrizione architettura client-server.
6.4.1 Interazione delle tecnologie
Per la realizzazione della parte Server ho deciso di utilizzare il framework open source
Spring boot, il quale ha permesso il collegamento tra la parte back-end e front-end.
Libreria JS per analisi utilizzo di siti web
22 Sviluppo
La classe "LibraryController.java" permette di servire le diverse richieste GET per la vi-
sualizzazione della pagine della libreria.
Invece l’invio di dati tra Server-Client e viceversa avviene attraverso l’invio di file JSON con
protocollo HTTP (versione 1.1).
Viceversa per la creazione della parte Client ho utilizzato principalmente HTML (versione
5), CSS (versione 3) e JavaScript (versione 1.8).
Ho impiegato HTML per costruire lo scheletro delle mie pagine web, dopo di che ho utilizzato
CSS per lo stile ed infine JavaScript elaborazione dati.
Figura 6.5: Tecnologie utilizzate nel server e nel client.
Libreria JS per analisi utilizzo di siti web
23
Capitolo 7
Funzionamento
7.0.1 Front-end
Come già citato in precedenza, la parte front-end permette la visualizzazione delle pagine
messe a disposizione dall’applicazione web. Essenzialmente le pagine disponibili sono di
tre diversi tipi.
• La prima pagina, non che la pagina principale, consente un ampia visuale generale
su i vari eventi catturati nelle diverse pagine e loro analisi inserita tramite grafici di
diverso tipo.
• La pagina di dettaglio permette la visualizzazione nel dettaglio degli eventi che suc-
cedono in una determinata pagina con maggiori informazioni messe a disposizione.
• La pagina utente permette di vedere i cinque elementi più cliccati, il numero di utenti
attivi e il numero totale di sessioni presenti.
Della parte front-end fa parte anche il file library.js, sviluppato in linguaggio JavaScript, il
quale permette di inviare i dati al server, tramite chiamate Ajax, sugli eventi che si vuole
osservare. Per fare questa operazione il suddetto file deve essere incluso in tutte le pagine
che si vuole tracciare.
Gli eventi che vengono soprattutto registrati sono: tempo passato sulle pagine, click su link,
click su bottoni, click su diversi tipi di tasti e coordinate del mouse nello spazio della pagina.
Inoltre questo file permette l’inserimento di cookie da parte della libreria per distinguere i
diversi utenti gli uni dagli altri, permette anche la visualizzazione di una heatmap per ogni
singola pagina che si sta analizzando attraverso le quale sarà possibile visualizzare le zone
di maggior interesse ed attività.
Libreria JS per analisi utilizzo di siti web
24 Funzionamento
7.0.2 Back-end
La parte back-end è stata sviluppata soprattutto in linguaggio Java.
Essa è suddivisa in diversi package, i quali contengono il modello dati utilizzato, i repository,
i vari servizi messi a disposizione per elaborare i dati e il controller per la mappatura dei
diversi URL.
Inoltre vengono messi a disposizione, all’interno della classe LibraryService.java, diversi
metodi per richiedere i dati al database ed elaborali secondo le richieste.
La classe LibraryController.java serve a mappare le diverse richieste GET e POST messe
a disposizione, la maggior parte delle quali servono per inviare i dati richiesti in formato
JSON alle pagine HTML tramite chiamate Ajax.
I dati vengono inviati in formato JSON attraverso chiamate HTTP, dopo di che gli stessi
verranno elaborati da file JavaScript che si occuperanno di inserirli nella pagine HTML sotto
forma di grafici. E’ importante sottolineare come nelle diverse pagine è possibile avere i dati
settimanali e quelli relativi al mese corrente.
7.1 Design dell’interfaccia
Per visualizzare le pagine relative alle libreria di analisi prima di tutto bisogna digitare il se-
guente URL "localhost:8080/library", dopo di che ci troveremo nella pagina principale della
libreria, la quale permette di avere una visione generale sul sito sui cui si sta effettuando
l’analisi.
Da questa pagina in poi potremo visitare le altre pagine, dette anche "pagine di dettaglio",
che ci permetteranno di vedere nel particolare le informazioni relative ad una pagina del sito
web che si sta analizzando.
La pagina "User" permette di avere una panoramica sugli utenti attivi in quel momento, su
il numero totale di utenti che hanno visitato il sito web, la percentuale di attività sulle varie
pagine ed infine i cinque elementi più cliccati dell’applicazione web sotto osservazione.
7.1.1 Pagina principale libreria
In questa pagina abbiamo accesso ad una visione generale dei dati che l’applicazione ha
registrato ed elaborato per offrire una analisi sulla libreria dei dati raccolti attraverso i quali
si potrà migliorare il proprio servizio.
La barra laterale posizionata a sinistra, come si può vedere in figura 5.1, permette di navi-
gare nell’applicazione web per visitare la pagina relativa agli eventi utenti (User), le pagine
di dettaglio relative alle pagina che si vuole visualizzare i suoi eventi e il bottone "Current
Libreria JS per analisi utilizzo di siti web
25
month" che permette di visualizzare i dati relativi al mese corrente.
Il menù a scorrimento "Weekly Data" permette di scegliere tra tre diverse modalità di sele-
zione dei dati che è possibile avere all’interno della pagina.
La prima "This week" offre la visualizzazione dei dati relativi alla settimana corrente, "Previous
week" invece i dati relativi alla settimana antecedente a quella corrente ed infine "All data"
offre la visualizzazione su tutti i dati disponibili.
La parte centrale della pagina è strutturata in due elementi distinti, nominati: "Time pages"
e "Informative event on the pages".
• Time pages: permette la visione del tempo trascorso su le singole pagine web
analizzate.
• Informative event on the pages: offre una analisi degli eventi registrati su ogni pa-
gina attraverso quattro tipi di grafici diversi. Il primo grafico mostra il numero di click
effettuato su ogni elemento della pagina presa in esame, il secondo non è altro che
una tabella riassuntiva degli ultimi dieci eventi accaduti, invece il terzo mostra un con-
fronto tra pageviews1 e unique pageviews2 ed infine l’ultimo grafico rappresenta il
numero di sessioni su quella determinata pagina su ogni giorno.
1Le visualizzazioni di pagina sono definite come il numero totale di volte in cui il contenuto è stato visualizzatoin un determinato periodo temporale.
2Le visualizzazioni di pagine uniche rappresentano un aggregato di visualizzazioni di pagina generate dallostesso utente durante la stessa sessione (ovvero il numero di sessioni durante le quali tale pagina è statavisualizzata una o più volte). Il limite di tempo per una determinata sessione è di 24 ore.
Libreria JS per analisi utilizzo di siti web
26 Funzionamento
Figura 7.1: Pagina principale libreria di analisi.
7.1.2 Pagina dettaglio libreria
La pagina di dettaglio della libreria permette di trovare informazioni più specifiche di quelle
messe a disposizione nella pagina principale. La barra laterale di sinistra e il menu a scorri-
mento "Weekly Data" offrono le stesse funzionalità di quelli presenti nella pagina principale
stessa con l’unica differenza che in questa pagina è possibile scaricare un file in formato
CSV degli eventi che sono accaduti su quella determinata pagina osservata, attraverso i
pulsanti "Save Table Data" e "Save Page View Data".
La parte principale di questa pagina è suddivisa in due sezioni, la prima comprendente quat-
tro diversi tipi di grafici e la seconda la tabella con tutti i record di tutti gli eventi. All’interno
della tabella vengo visualizzati soltanto i primi cento elementi, per vedere tutti gli elementi
disponibili basterà cliccare sull’apposito pulsante chiamato: "See more elements". Una vol-
ta fatto ciò per tornare alla visualizzazione precedente basterà cliccare sul nuovo pulsante
messo a disposizione, chiamato: "See less elements".
I grafici della prima parte mostrano informazioni simili a quelle della pagina principale, con
la differenza che:
• Il primo grafico "Number of sessions" rappresenta il numero di click che gli utenti del
sito web hanno effettuato su i vari elementi della pagina presa in esame.
Libreria JS per analisi utilizzo di siti web
27
• Il secondo grafico "Time spent" mostra l’andamento del tempo trascorso su quella
determinata pagina giorno per giorno.
• Il terzo grafico "Pageiviews vs Unique Pageviews" descrive l’andamento nel tempo
delle visualizzazioni di pagina rispetto alle visualizzazioni di pagine uniche.
• Il quarto ed ultimo grafico "Number of sessions" spiega l’andamento nel tempo del
numero di sessioni sulla pagina.
Figura 7.2: Pagina dettaglio libreria di analisi.
7.1.3 Pagina utente
La pagina utente espone informazioni sul numero totale di utenti avuti in precedenza e su
quelli attivi durante quel determinato giorno.
Al suo interno sono presenti una tabella che mostra il numero di utenti per ogni sistema
operativo, un grafico che mostra la percentuale di attività su tutte le pagine del sito web
preso in esame ed una tabella che indica quali siano i cinque elementi di tutto il sito web più
cliccati.
Libreria JS per analisi utilizzo di siti web
28 Funzionamento
Figura 7.3: Pagina utente libreria di analisi.
7.2 Heatmap
Heatmap è una rappresentazione grafica dei dati dove i singoli valori contenuti in una ma-
trice sono rappresentati da colori. In questo caso lo scopo della mappa di calore è quello di
mettere in evidenza su ogni singola pagina analizzata le zone maggiormente utilizzate ed
attive.
7.2.1 Raccolta dati
I dati per la visualizzazione della heatmap sono salvati in una tabella appositamente model-
lata per ospitare questi tipi di dato, chiamata: "mouse_coordinate".
La raccolta di tali dati avviene attraverso il file library.js, il quale si occupa di inviare al ser-
ver, tramite una chiamata ajax di tipo POST, le coordinate del mouse relative allo schermo
e successivamente il server provvederà a salvarli nel modo adeguato.
E’ importante sottolineare come il campionamento delle coordinate del mouse avvenga ogni
secondo per non avere troppe coordinate con lo stesso valore.
Libreria JS per analisi utilizzo di siti web
29
7.2.2 Utilizzo
Per poterla visualizzare sul proprio schermo basterà digitare da tastiera la seguente short-
cut "cmd/windows + b", dopo di che apparirà la seguente schermata.
Figura 7.4: Visualizzazione menu heatmap.
Si può vedere come in alto a destra appaiono tre bottoni, i quali di permettono di avere tre
diverse rappresentazioni della heatmap.
• Able: permette di visualizzare i dati nella loro totalità per rappresentare l’heatmap.
• Weekly Able: permette di visualizzare una heatmap con i dati concernenti la settima-
na corrente.
• Monthly Able: svolge la stessa funzione di weekly able con la differenza che i data
visualizzati sono riguardanti il mese corrente.
Una volta cliccato su uno dei seguenti bottoni questo sarà un possibile risultato.
Libreria JS per analisi utilizzo di siti web
30 Funzionamento
Figura 7.5: Visualizzazione heatmap.
Ovviamente per cambiare visualizzazione basterà cliccare su uno dei due pulsanti non se-
lezionati precedentemente, oppure se si vuole disattivare la sua visualizzazione basterà
cliccare su l’unico pulsante rosso presente3, il quale disattiverà la visione della mappa di
calore.
3Com’è possibile vedere in figura 5.2
Libreria JS per analisi utilizzo di siti web
31
Capitolo 8
Conclusione
8.1 Stato del lavoro
Gli obiettivi posti all’inizio del progetto sono stati pienamente raggiunti, in quanto è stata
sviluppata una architettura client-server che permetta di registrare gli eventi avvenuti sul
sito web preso in esame e di presentare una analisi dei dati raccolti attraverso una parte
front-end. La libreria, inoltre, permette la visualizzazione di una heatmap sul sito internet
esaminato per visualizzare le zone di maggior interesse e di maggiore utilizzo.
8.2 Problemi riscontrati
La maggior difficoltà riscontrata nello sviluppo di questo progetto è stata quella di strutturare
il database MySQL in modo ottimale sia per salvare i dati in entrata sia per eseguire le query
che permettano di trovare i dati richiesti. Infatti questa operazione di organizzazione del
database e di tutte le sue componenti principali annesse ha richiesto parecchio tempo per
essere portata a termine nel migliore dei modi.
8.3 Personali
Il progetto è stato molto interessante, in quanto mi ha permesso di comprendere meglio
l’importanza di una buona analisi di un sito web e di come migliorare una pagina web per
offrire un buon servizio ed una buona esperienza.
Ho avuto la possibilità di espandere ed affinare le mie conoscenze nel campo delle applica-
zioni web e di migliorare la padronanza del linguaggio JavaScript.
8.4 Sviluppi futuri
La libreria potrebbe essere migliorata aggiungendo una parte dedicata e specifica per rac-
cogliere informazioni su gli utenti che utilizzano il sito web sotto esame. Con queste infor-
Libreria JS per analisi utilizzo di siti web
32 Conclusione
mazioni raccolte si potrebbe creare una area riservata della libreria dove poter visualizzare
questi dati elaborati così da poter vedere quali utenti utilizzano il proprio prodotto e l’area di
copertura che si riesce ad avere. Un altro possibile sviluppo potrebbe essere quello di poter
vedere il grado di condivisone dei contenuti offerti e il traffico generato da questi.
Libreria JS per analisi utilizzo di siti web
33
Allegati
RepositoriProgetto_di_diploma_Gabriele_Zorloni
PosterPoster_Gabriele_Zorloni
PresentazionePresentazione_progetto_di_diploma.pdf
CodiceCodice_della_libreria_sviluppata
RapportoProgetto_di_diploma.pdf
Libreria JS per analisi utilizzo di siti web
34 Conclusione
Libreria JS per analisi utilizzo di siti web
35
Bibliografia
[1] jquery api documentation. www.api.jquery.com.
[2] Chart.js documentation. www.chartjs.org.
[3] Semrush functionality. www.it.semrush.com/features/.
[4] Seozoom. www.seozoom.it.
[5] Google analytics functionality. www.marketingplatform.google.com/intl/it/about/analytics/features/.
[6] Test my site with google. www.thinkwithgoogle.com/intl/en-cee/advertising-channels-
tools/tools-products/test-my-site/.
Libreria JS per analisi utilizzo di siti web
Top Related