Libreria JS per analisi utilizzo di siti...

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


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


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


iv ELENCO DELLE FIGURE


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.


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.


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:


4 Introduzione

• Utilizzo di JavaScript come linguaggio principale per la libreria.

• Utilizzo di Spring per sviluppo parte front-end e back-end.


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ì


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.


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.


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.


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.



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.


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



modifiche da apportare per migliorare la qualità e velocità del proprio servizio offerto.


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.


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.


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.


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.


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.


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


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.


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.


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.


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.


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à.


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


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.


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.


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.


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.


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.


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


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-


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.


33

Allegati

RepositoriProgetto_di_diploma_Gabriele_Zorloni

PosterPoster_Gabriele_Zorloni

PresentazionePresentazione_progetto_di_diploma.pdf

CodiceCodice_della_libreria_sviluppata

RapportoProgetto_di_diploma.pdf


34 Conclusione


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...

Documents

Transcript of Libreria JS per analisi utilizzo di siti...