Readmode

purple analytics readmode is a comprehensive javascript library that provides analytics tracking capabilities for readmode features in purple publishing applications it includes timer tracking functionality and seamless integration with the purple analytics platform table of contents /#overview /#classes /#timetracker /#purpleanalyticsreadmode /#features /#quick start /#api reference /#events /#configuration /#browser support overview this library consists of two main classes timetracker a utility class for tracking time spent reading articles purpleanalyticsreadmode the main class that integrates with purple analytics and manages readmode tracking classes timetracker a lightweight utility class for measuring elapsed time between start and stop events constructor const timetracker = new timetracker(); creates a new timetracker instance with initial state properties starttime timestamp when tracking started (null if not started) stoptime timestamp when tracking stopped (null if not stopped) methods start() starts the time tracking by recording the current timestamp timetracker start(); stop() stops the time tracking by recording the current timestamp timetracker stop(); getelapsedtime() returns the elapsed time in milliseconds between start and stop const elapsed = timetracker getelapsedtime(); // returns number in milliseconds throws error if start() and stop() haven't both been called getformattedelapsedtime() returns the elapsed time formatted as "mm\ ss min" const formatted = timetracker getformattedelapsedtime(); // returns "02 30 min" throws error if start() and stop() haven't both been called formatonedigittime(time) helper method that pads single digit numbers with leading zero const formatted = timetracker formatonedigittime(5); // returns "05" purpleanalyticsreadmode the main class that provides comprehensive readmode analytics tracking and ui management constructor const readmode = new purpleanalyticsreadmode(options); parameters options (object, optional) configuration options articlemergefields (array) fields to merge for article information articlemergeseparator (string) separator used when merging article fields static properties version purpleanalyticsreadmode version current version of the library ("3 0 0") action constants action read mode opened "read mode opened" action read mode closed "read mode closed" action article opened "read mode article opened" action article time spent "read mode article time spent" action tts toggled "read mode tts toggled" action tts on "read mode tts on" action tts off "read mode tts off" action night mode toggled "read mode night mode toggled" action night mode on "read mode night mode on" action night mode off "read mode night mode off" action read mode voice changed "read mode voice changed" action font size changed "read mode font size changed" action external link clicked "read mode external link clicked" view constants view read mode "read mode" view read mode article "read mode article" html selectors selectors rubrikentitel 'p rubrikentitel' selectors headline 'h1 headline' selectors kurzueberschrift 'p kurzueberschrift 2z' selectors swiperactiveslide 'div swiper slide active' selectors rangeslider '#range slider' selectors ttsbutton '#purple tts player button open' selectors nightmodebutton '#night mode btn' selectors closebutton '#close btn' selectors speechcontainer ' speech container' selectors externallinks 'a\[href^="http"]' methods async init() initializes the readmode instance by setting up ui and tracking components await readmode init(); destroy() cleans up all event listeners and resets the instance state readmode destroy(); async handlepagechange(articles, newindex) handles page changes in the swiper, tracking time spent and updating metadata await readmode handlepagechange(articles, 2); parameters articles (array) array of article objects newindex (number) index of the new active article hooks oninitialized() override this method to add custom behavior when readmode initializes readmode oninitialized = function() { console log('readmode is ready!'); // custom initialization logic }; onpagechanged(article, index) override this method to add custom behavior when pages change readmode onpagechanged = function(article, index) { console log('changed to article ', article title); // custom page change logic }; features time tracking automatic time tracking per article formatted time display (mm\ ss format) precise millisecond accuracy analytics integration seamless purple analytics integration automatic event tracking for user interactions custom metadata support user interaction tracking text to speech (tts) toggle tracking night mode toggle tracking font size changes external link clicks voice selection changes ui management swiper integration for article navigation automatic metadata extraction from dom clean event listener management article data extraction automatic extraction of article titles, sections, and content configurable field merging dom based content parsing quick start // create and configure the readmode instance const purpleanalyticsreadmode = new purpleanalyticsreadmode({ articlemergefields \['articlesection', 'headline', 'kurzueberschrift'], articlemergeseparator ' | ' }); // set up hooks purpleanalyticsreadmode oninitialized = function() { console log('readmode initialized'); }; purpleanalyticsreadmode onpagechanged = function(article, index) { console log('page changed ', article title); }; // initialize when dom is ready document addeventlistener('domcontentloaded', () => { purpleanalyticsreadmode init(); }); api reference metadata fields the library automatically extracts and tracks the following metadata context metadata publication id id of the publication publication name name of the publication issue id id of the current issue issue name name of the current issue page id id of the current page page alias alias of the current page page index index of the current page article metadata article id id of the current article article title title of the current article article section section of the current article article full information merged article information page number page number within the article time tracking metadata time spent ms time spent in milliseconds time spent formatted formatted time string (mm\ ss min) interaction metadata url url for external link clicks selected voice selected tts voice events automatic events the library automatically tracks the following events read mode opened when readmode is opened read mode closed when readmode is closed read mode article opened when a new article is viewed read mode article time spent when switching articles or closing read mode tts toggled when tts is toggled read mode tts on when tts is turned on read mode tts off when tts is turned off read mode night mode toggled when night mode is toggled read mode night mode on when night mode is enabled read mode night mode off when night mode is disabled read mode voice changed when tts voice is changed read mode font size changed when font size is adjusted read mode external link clicked when external link is clicked view events read mode readmode view tracking read mode article individual article view tracking configuration article merge fields configure which fields to include when creating the article full information metadata const readmode = new purpleanalyticsreadmode({ articlemergefields \['articlesection', 'rubrikentitel', 'headline', 'kurzueberschrift'], articlemergeseparator ' ' }); available fields articlesection article section from metadata rubrikentitel section title from dom headline article headline from dom kurzueberschrift short description from dom default configuration // default article merge fields articlemergefields \['articlesection', 'rubrikentitel', 'headline', 'kurzueberschrift'] // default separator articlemergeseparator ' ' browser support modern browsers with es6+ support requires promise support requires dom api support compatible with mobile browsers dependencies purple analytics platform readmode ui components swiper js for article navigation license this library is part of the purple analytics ecosystem and follows the same licensing terms