Newsletters: Enhance Subscription Modal Display Logic (#38079)

Automattic · Jul 10, 2024 · 6aeaff7 · 6aeaff7
1 parent f8917d4
commit 6aeaff7
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 13 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-subscribe-modal-behaviour b/projects/plugins/jetpack/changelog/update-subscribe-modal-behaviour
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Implemented a more dynamic approach to displaying the subscription modal
diff --git a/...s/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php b/...s/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php
@@ -64,17 +64,35 @@ public function enqueue_assets() {
 			wp_enqueue_script( 'subscribe-modal-js', plugins_url( 'subscribe-modal.js', __FILE__ ), array( 'wp-dom-ready' ), JETPACK__VERSION, true );
 
 			/**
-			 * Filter how many milliseconds a user must scroll for until the Subscribe Modal appears.
+			 * Filter how many milliseconds until the Subscribe Modal appears.
 			 *
 			 * @module subscriptions
 			 *
 			 * @since 13.4
 			 *
-			 * @param int 300 Time in milliseconds for the Subscribe Modal to appear upon scrolling.
+			 * @param int 60000 Time in milliseconds for the Subscribe Modal to appear.
 			 */
-			$load_time = absint( apply_filters( 'jetpack_subscribe_modal_load_time', 300 ) );
+			$load_time = absint( apply_filters( 'jetpack_subscribe_modal_load_time', 60000 ) );
 
-			wp_localize_script( 'subscribe-modal-js', 'Jetpack_Subscriptions', array( 'modalLoadTime' => $load_time ) );
+			/**
+			 * Filter how many percentage of the page should be scrolled before the Subscribe Modal appears.
+			 *
+			 * @module subscriptions
+			 *
+			 * @since 13.6
+			 *
+			 * @param int Percentage of the page scrolled before the Subscribe Modal appears.
+			 */
+			$scroll_threshold = absint( apply_filters( 'jetpack_subscribe_modal_scroll_threshold', 50 ) );
+
+			wp_localize_script(
+				'subscribe-modal-js',
+				'Jetpack_Subscriptions',
+				array(
+					'modalLoadTime'        => $load_time,
+					'modalScrollThreshold' => $scroll_threshold,
+				)
+			);
 		}
 	}
 

diff --git a/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-modal.js b/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-modal.js
@@ -12,17 +12,35 @@ domReady( function () {
 	}
 
 	let hasLoaded = false;
-	let isScrolling;
+	const targetElement = (
+		document.querySelector( '.entry-content' ) || document.documentElement
+	).getBoundingClientRect();
 
-	window.onscroll = function () {
-		window.clearTimeout( isScrolling );
+	function hasPassedScrollThreshold() {
+		const scrollPosition = window.scrollY + window.innerHeight / 2;
+		const scrollPositionThreshold =
+			targetElement.top +
+			( targetElement.height * Jetpack_Subscriptions.modalScrollThreshold ) / 100;
+		return scrollPosition > scrollPositionThreshold;
+	}
 
-		isScrolling = setTimeout( function () {
-			if ( ! hasLoaded ) {
-				openModal();
-			}
-		}, Jetpack_Subscriptions.modalLoadTime );
-	};
+	function onScroll() {
+		if ( ! hasLoaded ) {
+			requestAnimationFrame( () => {
+				if ( hasPassedScrollThreshold() ) {
+					openModal();
+				}
+			} );
+		}
+	}
+
+	window.addEventListener( 'scroll', onScroll, { passive: true } );
+
+	setTimeout( () => {
+		if ( ! hasLoaded ) {
+			openModal();
+		}
+	}, Jetpack_Subscriptions.modalLoadTime );
 
 	// When the form is submitted, and next modal loads, it'll fire "subscription-modal-loaded" signalling that this form can be hidden.
 	const form = modal.querySelector( 'form' );
@@ -57,6 +75,7 @@ domReady( function () {
 		hasLoaded = true;
 		setModalDismissedCookie();
 		window.addEventListener( 'keydown', closeModalOnEscapeKeydown );
+		window.removeEventListener( 'scroll', onScroll );
 	}
 
 	function closeModal() {