This document presents a web application that tracks how users view different sections of a webpage. It aims to extend typical pageview analytics by monitoring the date and duration users spend on each section. The application uses JavaScript to start and stop timers when users' mouse enters and leaves sections. This allows visualization of viewing patterns in a timeline. The project aims to provide new insights for behavioral researchers but future work includes integration with content management systems and support for more page types.

1. 1/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Introductory Work on Section Based Page View
of Web Contents: Towards The Idea of How a
Page is Viewed
Fajar Purnama 1, Alvin Fungai 1, Thinh Minh Do 1, Al Hafiz
Akbar Maulana Siagian 1, Anwar Annas 1, Harry Susanto 1,
Hendarmawan 1, Tsuyoshi Usagawa1, Hiroshi Nakano 1
1Graduate School of Science and Technology, Kumamoto University
fajar@st.cs.kumamoto-u.ac.jp, f.alvin@st.cs.kumamoto-u.ac.jp,
madsheep2410@gmail.com, alha002@st.cs.kumamoto-u.ac.jp,
annas@st.cs.kumamoto-u.ac.jp, h.susanto@st.cs.kumamoto-u.ac.jp,
hendarmawan@st.cs.kumamoto-u.ac.jp, tuie@cs.kumamoto-u.ac.jp,
nakano@cc.kumamoto-u.ac.jp
November 2, 2016Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

2. 2/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Outline
Introduction
Related Work
Web Application Architecture
Demonstration
Conclusion and Future Work
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

3. 3/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Online with Information Communication Technology (ICT)
Access Information Anywhere Anytime
Interract Through Social Media
Information in Form of Audio and Video
Take Courses Online
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

4. 4/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Posibility of Online Analytics (below are examples)
Pageviews of a Webpage [1]
Watch Statistic of a Youtube Channel
Browsing Behaviour Timestats [2]
Webpage Visitors Analytics by Piwik
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

5. 5/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Example Analysis on Online Learning
Data:
contents viewed
discussions posted
assignments submitted
quizzes attempted
scores
From [3] shows the learning patterns of
those who passes and fails on a course.
From [4] states that content management
will affect how active students on online
course, for this case the number of post on
discussion forum rises when assignments
and quizzes were handed out.
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

6. 6/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Limitation
Problem
Current data can answer what, when, and where a page is viewed
but cannot answer how it is viewed.
Proposal
Extend the pageview feature by being able to monitor as far as
each sections of the page.
Objective
Demonstrate a web application that can track the date and
duration viewed on sections of a page
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

7. 7/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Related Work
In ICT Industry
Browser History
Statistical Pageviews
Timeline Pageviews
Tracking User Mouse Clicks
Scrolls and Keyboard Types
In Learning Analytics
Online Book Framework
Finger Trail Learning System
(FTLS) [5]
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

8. 8/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
The Architecture
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

9. 9/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Main Coding Concept
1 <form id= s e c t a c t i o n=”thewebAPI”
2 onmouseleave=”submitFunction ( s e c t )”>
3 <div id= s e c t onmouseenter=”startCount ( s e c t )”
4 onmouseleave=”stopCount ( s e c t )”>
5
6 <h1> Section 1 </h1>
7 <input type=”hidden ” id=”value”>
8 <p> This i s s e c t i o n 1. </p>
9
10 </div> </form>
Embed Javascript on Hypertext Markup Language (HTML) Page
onmouseenter: Upon mouse pointer enter, start the timer.
onmouseleave: Upon mouse pointer leave, stop the timer.
(The onmouseleave on the form tag is to submit the value (date and
duration) to the Web API upon leaving, on this work is written in Java)
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

10. 10/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Snapshot Demo
As the mouse pointer move to the next section the timer on the
previous section stops and the next section starts.
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

11. 11/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Snapshot Result
Here shows an image of a timeline how a user view the web page
(how long a section was viewed and in what pattern was the page
viewed).
Full Source Code:
https://github.com/0fajarpurnama0/Section_Based_Page_View
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

12. 12/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Conclusion and Future Work
Conclusion
Extension of Pageview Feature
Track Date and Time on Certain Section
New Possibility for Behaviour Researchers
Future Work
Plugin on CMS LMS etc
Compatibility to More Webpages Type
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

13. 13/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Reference
[1] http://www.histats.com/viewstats/?sid=3383017&ccid=406
[2] http://www.wips.com/news/detail/26/time-stats-phenomenal-
chrome-extension
[3] M. Wen and C. P. Ros, Identifying Latent Study Habits by
Mining Learner Behavior Patterns in Massive Open Online Courses,
In Proc. 23rd ACM International Conference on Conference on
Information and Knowledge Management., pp. 1983-1986, 2014.
[4] D. Nandi, M. Hamilton, J. Harland and G. Warburton, How
Active are Students in Online Discussion Forums?, In Proc.
Thirteenth Australasian Computing Education Conference (ACE
2011)., pp. 125-134.
[5] K. Maruya, J. Watanabe, H. Takahashi and S. Hashiba, A
learning system utilizing learners active tracing behaviors, In Proc.
Fifth International Conference on Learning Analytics And
Knowledge., pp. 418-419, 2015.
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016

14. 14/14
Introduction Related Work Web Application Architecture Demonstration Conclusion and Future Work
Thank you
Any comments or questions?
Presented by: Fajar Purnama Graduate School of Science and Technology, Kumamoto University
International Student Conference on Advanced Science and Technology (ICAST) 2016