[RFC]: Migrate web API documentation to use matomo and instrument for better understanding user navigation behavior

[nishant-s7]

Full name

Nishant Shinde

University status

Yes

University name

Indian Institute of Information Technology, Sri City

University program

Computer Science and Engineering

Expected graduation

May 2025

Short biography

Hi there! I'm Nishant , a third-year student pursuing B.Tech in Computer Science and Engineering at IIIT Sri City, Chittoor. My hometown is Sambhaji Nagar, Maharashtra. My current CGPA is 8.96.

I am mainly a Full Stack Developer. I am proficient in front-end technologies like React, Next.js and EJS and back-end technologies like Node.js, Laravel and Symfony. I have experience with MongoDB and MySQL. I also know Mobile App Development with React Native. I'm also proficient in AR VR Application Development using Unity and Blender.

I really like trying out new technologies and learn about them to make interesting applications.

Timezone

IST ( UTC +5:30 )

Contact details

email:nishantshindelp@gmail.com,github:nishant-s7

Platform

Linux

Editor

My preferred code editor is Visual Studio Code (VSCode) as it is beginner-friendly as it is a feature rich IDE while also being comparatively lightweight.

Programming experience

I started coding when I entered my first year of college in C. After enough practice in C, I moved to C++ and it became my go-to language for problem solving (DSA). I also studied Object Oriented Programming in Java. Through Full Stack Development, I practiced Javascript in great detail after learning it from multiple platforms for front-end and back-end. The full list is as follows:

Programming Languages: JavaScript, TypeScript, C/C++, php, C#, Solidity Databases: MongoDB, MySQL Libraries and Frameworks: React, Nextjs, TailwindCSS, GSAP, Express.js,, Mongoose, Laravel, Symfony, Ether.js Tools and Platforms: Git, Github,, Postman, Vercel

JavaScript experience

At the beginning of our full stack development course, I learnt all the fundamental concepts of Javascript and ES6 through YouTube. Further, I learnt React for developing interactive user-friendly UI web pages. Some of my projects are as follows:

• WizLance - A Freelancing platform
• Workshop Certification DApp
• TODO List

I have also worked at a startup named Career Milaap: Learning and Hiring Platform where I used React to make several pages in their admin website. I also used Next.js for their consumer website.

Node.js experience

At the end of 2nd year, I finished learning Node.js from Maximillian sir's Udemy course. He taught it so well and I followed along while coding in parallel, giving me confidence in developing back-end applications. Some of the projects where I did backend are as follows:

• WizLance - A Freelancing platform
• Applin - Dairy Farm Management

C/Fortran experience

My first programming language was C, also present as a subject in my college course. I also did Codeforces in C language for a while. I have a strong foundation in programming principles, data structures, and algorithms with C. I have no experience with Fortran, but I believe I will be able to learn it pretty quick if required.

Interest in stdlib

Javascript is my favorite language for any kind of development. So having a library like stdlib which provides extensive functionality for numerical calculations so easily is brilliant.

Version control

Yes

Contributions to stdlib

As of right now, I have 2 merged contributions in stdlib.

• https://github.com/stdlib-js/stdlib/pull/1748
• https://github.com/stdlib-js/stdlib/pull/1734

Goals

Currently, the stdlib web-based API docs use GA for analytics and have only minimal integration. E.g., the API docs application is an SPA that uses React and the app does not record changes in page views; we only record first hits.

The goal of this idea is to migrate to using matomo and take advantage of its privacy features. The work will involve instrumenting the API documentation application and integrating it with matomo. A potential stretch goal would be to set up dashboards for reporting so that we can better understand user behavior and continue to improve project documentation.

Why this project?

I have been doing web development for almost 2 years now, yet, I still keep coming across various new technologies. And I love learning new things. This project will be fun to do as it lies between comfortable and something very new. I look forward to giving my best for this project.

Qualifications

I have good experience with all the required technologies for this project, which are, Javascript, Node.js, HTML/CSS and JSX/React. I have learned all these technologies from the fundamental level up to the required advanced level in my college journey. As mentioned above, I have done multiple projects in React and Node.js. I have also done an internship under a startup for over 6 months which included these technologies.

Prior art

The task of recording change in page views in an SPA has been achieved previously using Matomo. This process can be greatly simplified using the Matomo Tag Manager using the built in History Change trigger. The detailed steps are given here. Further, the choice has to be made on usage of Matomo's on-premise solution or cloud solution, both of them have steps listed on how to work:

• On premise
• Cloud

Commitment

My semester will be completed in early May (5 May precisely), leaving me enough time to get ready to work on my GSoC project. If I am selected, I shall be able to work around 40 hours a week on the project, though I am open to putting in more effort if the work requires. I will be at home during the summer (until August), so I will be having enough time for the project. However, I plan on going on a vacation for not more than 10 days with my family. Apart from that, there would be no breaks.

Schedule

• Pre GSoC:

  • Within this period, I aim to gain a complete understanding of stdlib’s www repository codebase (React) and contribute as much as I can.
  • I will also go through concepts of analytics (specifically Matomo).
  • Deliverables: Multiple issues resolved

• Community Bonding Period:

  • Complete understanding of Matomo.
  • Clearance of doubts on certain doubts regarding project and plan (eg. Matomo's hosted or cloud solution).
  • Deliverables: Small demo application using Matomo

• Week 1:

  • Defining tracking events by planning of specific user interactions we want to track within the documentation application (e.g., clicks on buttons, navigation elements, scrolling behaviors).
  • Defining what all privacy features of Matomo do we have to leverage.
  • Deliverables: A full technical plan of the project

• Week 2, 3, 4:

  • In this phase, instrumentation of application will start. I'll start adding Matomo's JavaScript tracking code to capture the defined user interactions within the React components of the API documentation application. This might involve creating custom hooks or components for managing Matomo interactions. This can be understood by this example:

    
    // as we use react-router-dom in our docs website, this can be a sample approach
    import { useEffect } from 'react';
    import { useLocation, Link } from 'react-router-dom';

  function App() { const location = useLocation();

  useEffect(() => { // Track page view on route change _paq.push(['trackPageView']); }, [location]);

  return (

  I

  <Link to="/p2">like</Link>
  <Link to="/p3">stdlib!</Link>

  ); }

  
  - We'll also set up the Matomo instance, and configure it to receive data from our application, and define how user interaction data will be stored within the Matomo platform.
  - Testing of the features and functionality
  - **Deliverables**:  All user interaction data is logged to Matomo and stored in a hosted database.

• Week 5:

  • Documentation of working of analytics along with privacy feature implementation will be done in this week.
  • Deliverables: Documentation

• Week 6: (midterm)

  • Spare week for any delays
  • Evaluation report

• Week 7, 8:

  • To effectively communicate user behavior and insights, a dashboard design has to be made thinking about what all things to include, and also clean UI.
  • Deliverables: Dashboard design

• Week 9, 10, 11:

  • Implementation of the proposed dashboard design.
  • Deliverables: Dashboards for reporting to better understand user behavior and continue to improve project documentation.

• Week 12:

  • Documentation of the dashboards to better understand the provided functionalities in the dashboard.
  • Deliverables: Documentation of dashboards

• Final Week:

  • Completion of any pending work
  • Submission of final report

Notes:

• The community bonding period is a 3 week period built into GSoC to help you get to know the project community and participate in project discussion. This is an opportunity for you to setup your local development environment, learn how the project's source control works, refine your project plan, read any necessary documentation, and otherwise prepare to execute on your project project proposal.
• Usually, even week 1 deliverables include some code.
• By week 6, you need enough done at this point for your mentor to evaluate your progress and pass you. Usually, you want to be a bit more than halfway done.
• By week 11, you may want to "code freeze" and focus on completing any tests and/or documentation.
• During the final week, you'll be submitting your project.

Related issues

22

Checklist

• [X] I have read and understood the Code of Conduct.
• [X] I have read and understood the application materials found in this repository.
• [X] I understand that plagiarism will not be tolerated, and I have authored this application in my own words.
• [X] I have read and understood the patch requirement which is necessary for my application to be considered for acceptance.
• [X] The issue name begins with [RFC]: and succinctly describes your proposal.
• [X] I understand that, in order to apply to be a GSoC contributor, I must submit my final application to https://summerofcode.withgoogle.com/ before the submission deadline.