DOCSLIB.ORG

Interactive Web Analytics Reporting Dashboard for Enterprise Businesses

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Interactive Web Analytics Reporting Dashboard for Enterprise Businesses Interactive Web Analytics Reporting Dashboard for Enterprise Businesses. Integrating Google’s Web tools for a one-stop reporting interface Apostolos Gouvalas SID: 3306160002 SCHOOL OF SCIENCE & TECHNOLOGY A thesis submitted for the degree of Master of Science (MSc) in Mobile and Web Computing DECEMBER 2017 THESSALONIKI – GREECE Interactive Web Analytics Reporting Dashboard for Enterprise Businesses. Integrating Google’s Web tools for a one-stop reporting interface Apostolos Gouvalas SID: 3306160002 Supervisor: Dr. Christos Berberidis SCHOOL OF SCIENCE & TECHNOLOGY A thesis submitted for the degree of Master of Science (MSc) in Mobile and Web Computing DECEMBER 2017 THESSALONIKI – GREECE Abstract The aim of this dissertation was to develop, using cutting-edge technologies, a visual analytics dashboard for enterprise businesses, utilizing the Analytics and Real Time Re- porting APIs from Google APIs. Moreover, we had to present the data from all web prop- erties of a user’s Google Analytics account in order to give them a better overview across all their tracking properties, while maintaining a user-friendly environment. Apostolos Gouvalas 18 Dec 2017 -i- Acknowledgements I would like first to thank my dissertation supervisor Dr. Christos Berberidis of School of Science at International Hellenic University for providing guidance when needed. I would also like to thank the collaborative company, iTrust, for providing the thesis subject and specially their lead developer Mpampis Sykovaridis for guiding me regard- ing the technologies I utilized in the development process and for giving me constructive feedback when I present them the final product. Next, I would like to thank my parents for supporting me both financially and emo- tionally with my decision to study at this master and throughout my life in general. Last but not least, I would not have achieved any of this without my girlfriend Chrysa, who was supporting and encouraging me from the very beginning and throughout the year in order to overcome any obstacles. -ii- Contents ABSTRACT .......................................................................................................................................... I ACKNOWLEDGEMENTS .................................................................................................................. II CONTENTS ........................................................................................................................................ III 1 INTRODUCTION ........................................................................................................................ 1 1.1 THE PROBLEM ............................................................................................................................... 2 1.2 SOLUTION ...................................................................................................................................... 2 1.3 OVERVIEW OF NEXT CHAPTERS ................................................................................................... 3 2 LITERATURE REVIEW ............................................................................................................. 5 3 UTILIZED TECHNOLOGIES .................................................................................................... 9 3.1 BACK-END .................................................................................................................................... 10 3.1.1 Node.js .............................................................................................................................. 10 3.1.2 npm & Yarn ...................................................................................................................... 11 3.1.3 Express.js ......................................................................................................................... 12 3.1.4 Passport.js ........................................................................................................................ 12 3.1.5 Mongoose.js ..................................................................................................................... 12 3.1.6 Socket.io ........................................................................................................................... 13 3.1.7 Googleapis ....................................................................................................................... 13 3.1.8 Request ............................................................................................................................. 13 3.1.9 Express-session .............................................................................................................. 13 3.1.10 Lodash .......................................................................................................................... 13 3.1.11 Morgan ......................................................................................................................... 13 3.1.12 Concurrently ................................................................................................................ 14 3.2 FRONT-END ................................................................................................................................. 14 3.2.1 React ................................................................................................................................. 14 3.2.2 React Router .................................................................................................................... 15 3.2.3 Redux ................................................................................................................................ 15 3.2.4 React-sparklines .............................................................................................................. 15 3.2.5 Redux-form ....................................................................................................................... 15 3.2.6 Moment.js ......................................................................................................................... 15 3.2.7 React-widgets .................................................................................................................. 15 -iii- 3.2.8 MaterializeCSS ................................................................................................................ 16 3.2.9 Font Awesome ................................................................................................................. 16 3.2.10 Particle.js – React Component ................................................................................. 16 4 IMPLEMENTATION ................................................................................................................ 17 4.1 ARCHITECTURE HIGH-LEVEL OVERVIEW ..................................................................................... 17 4.2 ITRALYTICS BACK-END ................................................................................................................ 18 4.2.1 Authentication Related Route Handlers ....................................................................... 18 4.2.2 Google Analytics Related Route Handlers .................................................................. 22 4.2.2.1 requireLogin Middleware ..................................................................................................... 23 4.2.2.2 validateAccessToken Middleware ...................................................................................... 23 4.2.2.3 refreshAccessToken Middleware ....................................................................................... 24 4.2.2.4 GET /api/analytics/accountSummary ................................................................................. 25 4.2.2.5 GET /api/analytics/reportsBatchGet ................................................................................... 27 4.2.3 Socket.io & Google Analytics Real Time Reporting API ............................................ 28 4.3 ITRALYTICS FRONT-END ............................................................................................................. 30 4.3.1 Initial crate-react-app setup ........................................................................................... 31 4.3.2 Single Page Application .................................................................................................. 34 4.3.3 Connection to our API & displays .................................................................................. 36 4.3.3.1 Log-in ...................................................................................................................................... 36 4.3.3.2 Fetching User’s Google Analytics Web Properties .......................................................... 37 4.3.3.3 Initialize ChartsList Component .......................................................................................... 40 4.3.3.4 Display Analytics for All User’s Web Properties ............................................................... 40 4.3.3.5 Get Real-time Analytics data ............................................................................................... 41 5 FUTURE WORK ...................................................................................................................... 45 6 CONCLUSIONS ....................................................................................................................... 47 BIBLIOGRAPHY ..............................................................................................................................
Load more

Recommended publications
  • Third Party Software Component List: Targeted Use: Briefcam® Fulfillment of License Obligation for All Open Sources: Yes
    Third Party Software Component List: Targeted use: BriefCam® Fulfillment of license obligation for all open sources: Yes Name Link and Copyright Notices Where Available License Type OpenCV https://opencv.org/license.html 3-Clause Copyright (C) 2000-2019, Intel Corporation, all BSD rights reserved. Copyright (C) 2009-2011, Willow Garage Inc., all rights reserved. Copyright (C) 2009-2016, NVIDIA Corporation, all rights reserved. Copyright (C) 2010-2013, Advanced Micro Devices, Inc., all rights reserved. Copyright (C) 2015-2016, OpenCV Foundation, all rights reserved. Copyright (C) 2015-2016, Itseez Inc., all rights reserved. Apache Logging http://logging.apache.org/log4cxx/license.html Apache Copyright © 1999-2012 Apache Software Foundation License V2 Google Test https://github.com/abseil/googletest/blob/master/google BSD* test/LICENSE Copyright 2008, Google Inc. SAML 2.0 component for https://github.com/jitbit/AspNetSaml/blob/master/LICEN MIT ASP.NET SE Copyright 2018 Jitbit LP Nvidia Video Codec https://github.com/lu-zero/nvidia-video- MIT codec/blob/master/LICENSE Copyright (c) 2016 NVIDIA Corporation FFMpeg 4 https://www.ffmpeg.org/legal.html LesserGPL FFmpeg is a trademark of Fabrice Bellard, originator v2.1 of the FFmpeg project 7zip.exe https://www.7-zip.org/license.txt LesserGPL 7-Zip Copyright (C) 1999-2019 Igor Pavlov v2.1/3- Clause BSD Infralution.Localization.Wp http://www.codeproject.com/info/cpol10.aspx CPOL f Copyright (C) 2018 Infralution Pty Ltd directShowlib .net https://github.com/pauldotknopf/DirectShow.NET/blob/ LesserGPL
    [Show full text]
  • Social Media Analytics
    MEDIA DEVELOPMENT Social media analytics A practical guidebook for journalists and other media professionals Imprint PUBLISHER EDITORS Deutsche Welle Dr. Dennis Reineck 53110 Bonn Anne-Sophie Suntrop Germany SCREENSHOTS RESPONSIBLE Timo Lüge Carsten von Nahmen Helge Schroers Petra Berner PUBLISHED AUTHOR June 2019 Timo Lüge © DW Akademie MEDIA DEVELOPMENT Social media analytics A practical guidebook for journalists and other media professionals INTRODUCTION Introduction Having a successful online presence is becoming more and In part 2, we will look at some of the basics of social media more important for media outlets all around the world. In analysis. We’ll explore what different social media metrics 2018, 435 million people in Africa had access to the Internet mean and which are the most important. and 191 million of them were using social media.1 Today, Africa is one of the fastest growing regions for Internet access and Part 3 looks briefly at the resources you should have in place social media use. to effectively analyze your online communication. For journalists, this means new and exciting opportunities to Part 4 is the main part of the guide. In this section, we are connect with their › audiences. Passive readers, viewers and looking at Facebook, Twitter, YouTube and WhatsApp and will listeners are increasingly becoming active participants in a show you how to use free analytics tools to find out more dialogue that includes journalists and other community mem- about your communication and your audience. Instagram is bers. At the same time, social media is consuming people’s not covered in this guide because, at the time of writing, only attention: Time that used to be spent listening to the radio very few DW Akademie partners in Africa were active on the is now spent scrolling through Facebook, Twitter, Instagram, platform.
    [Show full text]
  • Add a Captcha to a Contact Form
    Add A Captcha To A Contact Form Colin is swishing: she sectionalizing aphoristically and netts her wherefore. Carroll hogtying opportunely while unresolved Tre retell uncontrollably or trekking point-device. Contractible Howard cravatted her merrymakers so afire that Hugo stabilised very microscopically. Please provide this works just create customized contact form module that you can add a captcha to contact form element options can process Are seldom sure you want to excuse that? It was looking at minimum form now it to both nithin and service will be used by my front end. Or two parameters but without much! Bleeding edge testing system that controls the add a captcha contact form to. Allows you ever want to disable any spam form script that you to add and choose themes that have a contact form or badge or six letters! Even for contact template tab we work fine, add a plugin. Captcha your print perfectly clear explanation was more traditional captcha as a mix of images with no clue how do exactly what is a contact your website? Collect information and is not backward compatible with a captcha to form orders and legally hide it? Is there a way to gauge my Mac from sleeping during a file copy? Drop the Contact Form element on your desired area. Captcha widget areas in your site. How can never change the production method my products use? Honeypots are essential for our ads for us understand what you have a template is now has a weird of great option only use? This full stack overflow! The mail is sent, email and a message field.
    [Show full text]
  • Marketing Cloud Published: August 12, 2021
    Marketing Cloud Published: August 12, 2021 The following are notices required by licensors related to distributed components (mobile applications, desktop applications, or other offline components) applicable to the services branded as ExactTarget or Salesforce Marketing Cloud, but excluding those services currently branded as “Radian6,” “Buddy Media,” “Social.com,” “Social Studio,”“iGoDigital,” “Predictive Intelligence,” “Predictive Email,” “Predictive Web,” “Web & Mobile Analytics,” “Web Personalization,” or successor branding, (the “ET Services”), which are provided by salesforce.com, inc. or its affiliate ExactTarget, Inc. (“salesforce.com”): @formatjs/intl-pluralrules Copyright (c) 2019 FormatJS Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
    [Show full text]
  • Privacy Policy Interpretation and Definitions
    Privacy Policy This Privacy Policy describes Our policies and procedures on the collection, use and disclosure of Your information when You use the Service and tells You about Your privacy rights and how the law protects You. We use Your Personal data to provide and improve the Service. By using the Service, You agree to the collection and use of information in accordance with this Privacy Policy. Interpretation and Definitions Interpretation The words of which the initial letter is capitalized have meanings defined under the following conditions. The following definitions shall have the same meaning regardless of whether they appear in singular or in plural. Definitions For the purposes of this Privacy Policy: • You means the individual accessing or using the Service, or the company, or other legal entity on behalf of which such individual is accessing or using the Service, as applicable. Under GDPR (General Data Protection Regulation), You can be referred to as the Data Subject or as the User as you are the individual using the Service. • Company (referred to as either "the Company", "We", "Us" or "Our" in this Agreement) refers to Adventure City Inc., 1238 S. BEACH BLVD., SUITE E. For the purpose of the GDPR, the Company is the Data Controller. • Affiliate means an entity that controls, is controlled by or is under common control with a party, where "control" means ownership of 50% or more of the shares, equity interest or other securities entitled to vote for election of directors or other managing authority. • Account means a unique account created for You to access our Service or parts of our Service.
    [Show full text]
  • Tests Deploys Uppy Is a Sleek, Modular Javascript File Uploader
    Uppy npm v1.27.0 Tests Tests passing Companion passing End-to-end tests failing Deploys CDN passing Companion Deploy failing Deploy uppy.io passing Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly with any application. It’s fast, easy to use and lets you worry about more important problems than building a file uploader. Fetch files from local disk, remote URLs, Google Drive, Dropbox, Box, Instagram or snap and record selfies with a camera Preview and edit metadata with a nice interface Upload to the final destination, optionally process/encode Read the docs | Try Uppy Uppy is being developed by the folks at Transloadit, a versatile file encoding service. Example Code used in the above example: const Uppy = require('@uppy/core') const Dashboard = require('@uppy/dashboard') const GoogleDrive = require('@uppy/google-drive') const Instagram = require('@uppy/instagram') const Webcam = require('@uppy/webcam') const Tus = require('@uppy/tus') const uppy = new Uppy({ autoProceed: false }) .use(Dashboard, { trigger: '#select-files' }) .use(GoogleDrive, { target: Dashboard, companionUrl: 'https://companion.uppy.io .use(Instagram, { target: Dashboard, companionUrl: 'https://companion.uppy.io' .use(Webcam, { target: Dashboard }) .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) .on('complete', (result) => { console.log('Upload result:', result) }) Try it online or read the docs for more details on how to use Uppy and its plugins. Features Lightweight, modular plugin-based architecture, easy on dependencies :zap:
    [Show full text]
  • Quickly Documentation Release 0.1
    Quickly Documentation Release 0.1 Michael Spencer March 28, 2016 Contents 1 Offline Reading 3 1.1 Tutorial..................................................3 1.2 QMLify Transpiler............................................5 1.3 Core JS Modules.............................................5 1.4 Distributing your Module........................................8 2 Indices and tables 11 i ii Quickly Documentation, Release 0.1 Quickly is a build tool and QML module with provides an NodeJS-like ES6 environment for Javascript used in QML. The goal of the project is to allow you to write awesome modern ES6 Javascript taking advantage of classes, decorators, arrow functions, and best of all, many of the vast array of NPM packages available using the standard ES6 module imports. You can then take that code and use in directly from QML, just as you would with plain, old, QML-specific Javascript. You can even build a library using ES6 and NPM packages, and then distribute that as a standard QML module or QPM package for other developers to use in regular QML or QML-specific Javascript. For those who would prefer to stick with standard QML-specific Javascript, you can also do that and still use the Quickly library, which gives you promises, the fetch API, and many polyfills. This is great for longtime QML devel- opers or existing projects that just want to drop in some easy-to-use features from modern JS core libraries. Tutorial A quick guide to get you up and running with Quickly. QMLify Transpiler How to use qmlify, the Quickly transpiler. Core JS Modules How to use the core JS modules. Distributing your Module Distributing your awesome new module for other developers to use.
    [Show full text]
  • ** OPEN SOURCE LIBRARIES USED in Tv.Verizon.Com/Watch
    ** OPEN SOURCE LIBRARIES USED IN tv.verizon.com/watch ------------------------------------------------------------ 02/27/2019 tv.verizon.com/watch uses Node.js 6.4 on the server side and React.js on the client- side. Both are Javascript frameworks. Below are the licenses and a list of the JS libraries being used. ** NODE.JS 6.4 ------------------------------------------------------------ https://github.com/nodejs/node/blob/master/LICENSE Node.js is licensed for use as follows: """ Copyright Node.js contributors. All rights reserved. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. """ This license applies to parts of Node.js originating from the https://github.com/joyent/node repository: """ Copyright Joyent, Inc. and other Node contributors.
    [Show full text]
  • Global Compliance of Cookie-Bassed Web Analytics Activities
    Global compliance of GLOBALcookie-bassed COMPLIANCEweb analytics oactivitiesf cookie-based web analytics activities Finding a cross-border compliance solution [Version 3.0 (April 2012). for cookie-based web analytics activities should be on the agenda of every company doing business online, as well as web analytics software vendors, online content publishers and online advertisers. This paper focuses on EU cookie regulations, US-based Do Not Track initiatives and other worldwide privacy initiatives, in search of a series of steps to aid us in achieving global compliance. INDEX 1 The technical and business need for 5 cookies A world built on cookies 5 Cookie types and threats 6 2 The social dilemma 9 3 A short history of worldwide cookie- 11 related privacy protection 4 The EU regulatory challenge 15 Opt-out vs. Opt-in 15 Yes I do, Don´t I? 16 Calling a spade a spade: national 17 implementations Which law applies to you? 19 5 Technical and legal solutions for 21 cross-border compliance of web analytics activities A proposed approach to the new 21 A document by legal framework Divisadero. All rights reserved. 21 www.divisadero.eu Building a minimum common denominator Author Technical and practical solutions 23 Sergio Maldonado Design by ANNEX: Cookie inventory and 25 Alexia Méndez 6 classification audit form Global compliance of cookie-based web analytics activities 3 1. THE TECHNICAL AND BUSINESS NEED FOR COOKIES sessions, registrations and logins, online banking sessions, electronic government applications… and virtually every online action that goes beyond user-dissociated displays of information. But cookies are also used for other purposes: by allowing us to tie multiple page visualizations to the same anonymous browser, they enable online audience measurement concepts such as “visit” and “visitor”.
    [Show full text]
  • E Cost of Ad Blocking Pagefair and Adobe 2015 Ad Blocking Report
    !e cost of ad blocking PageFair and Adobe 2015 Ad Blocking Report Introduction In the third annual ad blocking report, PageFair, with the help of Adobe, provides updated data on the scale and growth of ad blocking so"ware usage and highlights the global and regional economic impact associated with it. Additionally, this report explores the early indications surrounding the impact of ad blocking within the mobile advertising space and how mobile will change the ad blocking landscape. Table of Contents 3. Key insights 8. Effect of ad blocking by industry 13. A"erword 4. Global ad blocking growth 9. Google Chrome still the main driver of ad 14. Background 5. Usage of ad blocking so"ware in the United block growth 15. Methodology States 10. Mobile is yet to be a factor in ad blocking 16. Tables 6. Usage of ad blocking so"ware in Europe growth 17. Tables 7. !e cost of blocking ads 11. Mobile will facilitate future ad blocking growth 12. Reasons to start using an ad blocker PAGEFAIR AND ADOBE | 2015 Ad Blocking Report 2 Key Insights More consumers block ads, continuing the strong growth rates seen during 2013 and 2014. 41% YoY global growth Q2 2014 - Q2 2015 !e "ndings • Globally, the number of people using ad blocking so"ware grew by 41% year over year. • 16% of the US online population blocked ads during Q2 2015. • Ad block usage in the United States grew 48% during the past year, increasing to 45 million monthly active 45 million users (MAUs) during Q2 2015. Average MAUs in the United • Ad block usage in Europe grew by 35% during the past year, increasing to 77 million monthly active users States Q2 2015 during Q2 2015.
    [Show full text]
  • Cookie Swap Party: Abusing First-Party Cookies for Web Tracking
    Cookie Swap Party: Abusing First-Party Cookies for Web Tracking Quan Chen Panagiotis Ilia [email protected] [email protected] North Carolina State University University of Illinois at Chicago Raleigh, USA Chicago, USA Michalis Polychronakis Alexandros Kapravelos [email protected] [email protected] Stony Brook University North Carolina State University Stony Brook, USA Raleigh, USA ABSTRACT 1 INTRODUCTION As a step towards protecting user privacy, most web browsers perform Most of the JavaScript (JS) [8] code on modern websites is provided some form of third-party HTTP cookie blocking or periodic deletion by external, third-party sources [18, 26, 31, 38]. Third-party JS li- by default, while users typically have the option to select even stricter braries execute in the context of the page that includes them and have blocking policies. As a result, web trackers have shifted their efforts access to the DOM interface of that page. In many scenarios it is to work around these restrictions and retain or even improve the extent preferable to allow third-party JS code to run in the context of the of their tracking capability. parent page. For example, in the case of analytics libraries, certain In this paper, we shed light into the increasingly used practice of re- user interaction metrics (e.g., mouse movements and clicks) cannot lying on first-party cookies that are set by third-party JavaScript code be obtained if JS code executes in a separate iframe. to implement user tracking and other potentially unwanted capabil- This cross-domain inclusion of third-party JS code poses security ities.
    [Show full text]
  • Node Js Require All Files in Directory
    Node Js Require All Files In Directory Is Meryl undiscording or dormant when utter some scabbard transistorizing festively? Sometimes microbial Jess upraise her Northumbrians dynamically, but vitreous Rudolfo acidified unmercifully or overweens ethnologically. Rickie often pollute unconscionably when helmless Torry depredates wishfully and bluffs her exostosis. Cjs libraries like i pasted into modules in this wrapper for files in node all directory in the biggest challenge for This js processing units of all the require all files of an http servers, shahbaz badisha and mobile app? Mocha runs in the browser. It locally in the node js modules do its ecosystem is a post message to process for weekdays and grabbing them all files in node js files and dev bootcamps focus on. Importing a module in Node. The version number of Cypress. Or as some reason say accessing the file is relatively the simplest of all FS-related processes. Let me on unix that directory in here is required into the require some files with the exports object, you were implemented a js on. How to confirm your package or exists, so for loop above logging module once after the module name structure to work with ones that. The storefront for example using promise framework, or checkout with. This array of that are immediately detect errors back to maintain, and screen recorder web development also learn to. Files in node? Prepping for older versions manually when your project management and js file. Node js modules would their fake implementations removed mocha allows you. Follow their respective harmony flag, node js require all files in directory all code should be your directory will know which pieces of awareness, require some advice to.
    [Show full text]