Correlatore
Galli Vanni
Committente-Corso di laurea
Ing. Informatica
ModuloC10087
Anno2018/2019
DataIndice
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 . . . 54 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
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
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.
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
4 Introduzione
• Utilizzo di JavaScript come linguaggio principale per la libreria.
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.
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 che indica:"Search Engine Optimization", la cui traduzione significa: “ottimizzazione per i motori di ricerca“. Queste pratiche sono molteplici e riguardano diversi aspetti di un sito web: l’ottimizzazione della struttura del sito, del codice 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 organiricer-ca, i numeri dei back-link e le keyword di ricerricer-ca organiricer-ca 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.
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.
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.
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. Inolttesta-re, 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
12 Tool presenti sul mercato
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 attraversoAjax. 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.
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.
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 cuicicli 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 insprint 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
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.
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 daprovenien-ti raccolprovenien-ti sono gli evenprovenien-ti 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.
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.
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 parteClient 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.
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.
• Laprima 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.
• Lapagina di dettaglio permette la visualizzazione nel dettaglio degli eventi che suc-cedono in una determinata pagina con maggiori informazioni messe a disposizione.
• Lapagina 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 filelibrary.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 classeLibraryService.java, diversi metodi per richiedere i dati al database ed elaborali secondo le richieste.
La classeLibraryController.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
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.
1
Le visualizzazioni di pagina sono definite come il numero totale di volte in cui il contenuto è stato visualizzato in un determinato periodo temporale.
2
Le visualizzazioni di pagine uniche rappresentano un aggregato di visualizzazioni di pagina generate dallo stesso utente durante la stessa sessione (ovvero il numero di sessioni durante le quali tale pagina è stata visualizzata 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:
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 filelibrary.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.
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.
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.
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.
Allegati
Repositori Progetto_di_diploma_Gabriele_Zorloni Poster Poster_Gabriele_Zorloni Presentazione Presentazione_progetto_di_diploma.pdf Codice Codice_della_libreria_sviluppata Rapporto Progetto_di_diploma.pdfBibliografia
[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.
