Reader: Added tracks event for time spent reading the post. (#97389)

* Reader: Added tracks event for time spent reading the post.

* Track reading time when the current post changes.

client/blocks/reader-full-post/index.jsx

@@ -116,6 +116,7 @@ export class FullPostView extends Component {
 		// Send page view
 		this.hasSentPageView = false;
 		this.hasLoaded = false;
+		this.setReadingStartTime();
 		this.attemptToSendPageView();
 		this.maybeDisableAppBanner();
 
@@ -133,6 +134,8 @@ export class FullPostView extends Component {
 		document.querySelector( 'body' ).classList.add( 'is-reader-full-post' );
 
 		document.addEventListener( 'keydown', this.handleKeydown, true );
+
+		document.addEventListener( 'visibilitychange', this.handleVisibilityChange );
 	}
 	componentDidUpdate( prevProps ) {
 		// Send page view if applicable
@@ -145,6 +148,12 @@ export class FullPostView extends Component {
 			this.hasLoaded = false;
 			this.attemptToSendPageView();
 			this.maybeDisableAppBanner();
+
+			// If the post being viewed changes, track the reading time.
+			if ( get( prevProps, 'post.ID' ) !== get( this.props, 'post.ID' ) ) {
+				this.trackReadingTime( prevProps.post );
+				this.setReadingStartTime();
+			}
 		}
 
 		if ( this.props.shouldShowComments && ! prevProps.shouldShowComments ) {
@@ -172,9 +181,15 @@ export class FullPostView extends Component {
 		this.stopResize?.();
 		this.props.enableAppBanner(); // reset the app banner
 		document.querySelector( 'body' ).classList.remove( 'is-reader-full-post' );
+		this.trackReadingTime();
 		document.removeEventListener( 'keydown', this.handleKeydown, true );
+		document.removeEventListener( 'visibilitychange', this.handleVisibilityChange );
 	}
 
+	setReadingStartTime = () => {
+		this.readingStartTime = new Date().getTime();
+	};
+
 	handleKeydown = ( event ) => {
 		if ( this.props.notificationsOpen ) {
 			return;
@@ -213,6 +228,26 @@ export class FullPostView extends Component {
 		}
 	};
 
+	handleVisibilityChange = () => {
+		if ( document.hidden ) {
+			this.trackReadingTime();
+		}
+	};
+
+	trackReadingTime( post = null ) {
+		if ( ! post ) {
+			post = this.props.post;
+		}
+		if ( this.readingStartTime ) {
+			const endTime = Math.floor( Date.now() );
+			const engagementTime = endTime - this.readingStartTime;
+			recordTrackForPost( 'calypso_reader_article_engaged_time', post, {
+				context: 'full-post',
+				engagement_time: engagementTime / 1000,
+			} );
+		}
+	}
+
 	handleBack = ( event ) => {
 		event.preventDefault();
 		this.props.onClose && this.props.onClose();

client/reader/stats.js

@@ -167,7 +167,8 @@ allowedTracksRailcarEventNames
 	.add( 'calypso_reader_permalink_click' )
 	.add( 'calypso_reader_recommended_post_clicked' )
 	.add( 'calypso_reader_recommended_site_clicked' )
-	.add( 'calypso_reader_recommended_post_dismissed' );
+	.add( 'calypso_reader_recommended_post_dismissed' )
+	.add( 'calypso_reader_article_engaged_time' );
 
 export function recordTracksRailcar( action, eventName, railcar, overrides = {} ) {
 	// flatten the railcar down into the event props