feat(ga4): np_newsletter_subscribed event upon front-end signup

includes/reader-revenue/my-account/index.js

@@ -31,6 +31,7 @@ domReady( function () {
 	const cancelButton = document.querySelector( '.subscription_details .button.cancel' );
 	const { labels, nonce, rest_url, should_rate_limit } = newspack_my_account || {};
 
+	// Show a confirmation dialog before cancelling a subscription.
 	if ( cancelButton ) {
 		const confirmCancel = event => {
 			const message =
@@ -45,6 +46,7 @@ domReady( function () {
 		cancelButton.addEventListener( 'click', confirmCancel );
 	}
 
+	// Rate limit the add payment method form.
 	const addPaymentForm = document.getElementById( 'add_payment_method' );
 	if ( addPaymentForm && Boolean( should_rate_limit ) ) {
 		const errorContainer = document.querySelector( '.woocommerce-notices-wrapper' );
@@ -93,4 +95,22 @@ domReady( function () {
 		addPaymentForm.addEventListener( 'submit' , rateLimit, true );
 		submitButton.addEventListener( 'click', rateLimit, true );
 	}
+
+	// Fire a newsletter_signup event when the user subscribes to a newsletter via My Account.
+	window.newspackRAS = window.newspackRAS || [];
+	window.newspackRAS.push( readerActivation => {
+		const reader = readerActivation.getReader();
+		const params = new URLSearchParams( window.location.search );
+		const subscribed = params.get( 'newspack_newsletters_subscription_subscribed' );
+		if ( subscribed && reader?.email && reader?.authenticated ) {
+			readerActivation.dispatchActivity( 'newsletter_signup', {
+				email: reader.email,
+				lists: subscribed.split( ',' ),
+				newsletters_subscription_method: 'my-account',
+			} );
+		}
+		params.delete( 'newspack_newsletters_subscription_subscribed' );
+		const newQueryString = params.toString() ? '?' + params.toString() : '';
+		window.history.replaceState( {}, '', window.location.pathname + newQueryString );
+	} );
 } );

src/blocks/reader-registration/view.js

@@ -35,6 +35,7 @@ window.newspackRAS.push( function( readerActivation ) {
 				return;
 			}
 
+			let body = new FormData( form );
 			const messageElement = container.querySelector( '.newspack-registration__response' );
 			const submitElement = form.querySelector( 'button[type="submit"]' );
 			const spinner = document.createElement( 'span' );
@@ -72,23 +73,28 @@ window.newspackRAS.push( function( readerActivation ) {
 				container.classList.add( `newspack-registration--${ isSuccess ? 'success' : 'error' }` );
 				if ( isSuccess ) {
 					successElement.classList.remove( 'newspack-registration--hidden' );
-					form.remove();
 					if ( data?.email ) {
+						body = new FormData( form );
 						readerActivation.setReaderEmail( data.email );
 						// Set authenticated only if email is set, otherwise an error will be thrown.
 						readerActivation.setAuthenticated( data?.authenticated );
 
 						if ( data.authenticated && ! data.existing_user ) {
-							const activity = { email: data.email, registration_method: data?.metadata?.registration_method || 'registration-block' };
+							const lists = body.getAll( 'lists[]' );
+							const baseActivity = { email: data.email };
 							if ( data?.metadata?.newspack_popup_id ) {
-								activity.newspack_popup_id = data.metadata?.newspack_popup_id;
+								baseActivity.newspack_popup_id = data.metadata.newspack_popup_id;
 							}
 							if ( data?.metadata?.gate_post_id ) {
-								activity.gate_post_id = data.metadata?.gate_post_id;
+								baseActivity.gate_post_id = data.metadata.gate_post_id;
+							}
+							if ( lists?.length ) {
+								readerActivation.dispatchActivity( 'newsletter_signup', { ...baseActivity, newsletters_subscription_method: 'reader-registration', lists } );
 							}
-							readerActivation.dispatchActivity( 'reader_registered', activity );
+							readerActivation.dispatchActivity( 'reader_registered', { ...baseActivity, registration_method: data?.metadata?.registration_method || 'registration-block' } );
 						}
 					}
+					form.remove();
 				} else if ( messageNode ) {
 					messageElement.appendChild( messageNode );
 					messageElement.classList.remove( 'newspack-registration--hidden' );
@@ -108,7 +114,7 @@ window.newspackRAS.push( function( readerActivation ) {
 					return form.endLoginFlow( 'Please enter a vaild email address.', 400 );
 				}
 
-				const body = new FormData( form );
+				body = new FormData( form );
 				if ( ! body.has( 'npe' ) || ! body.get( 'npe' ) ) {
 					return form.endFlow( 'Please enter a vaild email address.', 400 );
 				}

src/memberships-gate/gate.js

@@ -56,10 +56,8 @@ function initReloadHandler() {
 			if ( ev?.detail?.overlays && ev.detail.removed ) {
 				const activities = window?.newspackReaderActivation?.getActivities();
 				const lastActivity = activities?.[ activities.length - 1 ] || {};
-				if (
-					activities.length &&
-					( 'checkout_completed' === lastActivity.action || 'reader_registered' === lastActivity.action || 'reader_logged_in' === lastActivity.action )
-				) {
+				const validActions = [ 'checkout_completed', 'reader_registered', 'reader_logged_in', 'newsletter_signup' ];
+				if ( activities.length && validActions.includes( lastActivity.action ) ) {
 					reload = true;
 				} else {
 					reload = false;

src/reader-activation-auth/auth-form.js

@@ -312,6 +312,7 @@ window.newspackRAS.push( function ( readerActivation ) {
 							openNewslettersSignupModal( {
 								onSuccess: container.authCallback( authMessage, authData ),
 								closeOnSuccess: true,
+								signupMethod: 'reader-registration',
 							} );
 					} else {
 						callback = container.authCallback;

src/reader-activation-newsletters/newsletters-form.js

@@ -82,6 +82,12 @@ window.newspackRAS.push( function ( readerActivation ) {
 				fetch( newspack_reader_activation_newsletters.newspack_ajax_url, {
 					method: 'POST',
 					body: data,
+				} ).then( () => {
+					const lists = data.getAll( 'lists[]' );
+					if ( lists.length ) {
+						const signupMethod = form.getAttribute( 'data-signup-method' ) || 'post-checkout';
+						readerActivation.dispatchActivity( 'newsletter_signup', { email: emailInput.value, lists, newsletters_subscription_method: signupMethod } );
+					}
 				} ).finally( () => {
 					if ( container?.newslettersSignupCallback ) {
 						container.newslettersSignupCallback();

src/reader-activation-newsletters/newsletters-modal.js

@@ -72,6 +72,7 @@ export function openNewslettersSignupModal( config = {} ) {
 		}
 		return;
 	}
+	const form = container.querySelector( 'form' );
 
 	/**
 	 * Close the modal.
@@ -123,10 +124,13 @@ export function openNewslettersSignupModal( config = {} ) {
 		const openerContent = document.createElement( 'div' );
 		openerContent.classList.add( 'opener-content' );
 		openerContent.innerHTML = config.content;
-		const form = container.querySelector( 'form' );
 		form.insertBefore( openerContent, form.firstChild );
 	}
 
+	if ( config?.signupMethod ) {
+		form.setAttribute( 'data-signup-method', config.signupMethod );
+	}
+
 	// Populate email if not already set.
 	const emailInput = modal.querySelector( 'span.email' );
 	if ( emailInput && ! emailInput.innerText ) {

src/reader-activation/analytics.js

@@ -28,6 +28,30 @@ const sendEvent = ( payload, eventName = 'np_reader_activation_interaction' ) =>
 	}
 };
 
+/**
+ * Handle a successful newsletter signup.
+ *
+ * @param {Object} ras Reader Activation Store.
+ */
+const handleNewsletterSignupSuccess = ras => {
+	ras.on( 'activity', function( ev ) {
+		if ( 'newsletter_signup' === ev.detail.action && ev.detail.data?.lists?.length ) {
+			const payload = getEventPayload( {
+				referrer: window.location.pathname,
+				newsletters_subscription_method: ev.detail.data?.newsletters_subscription_method || 'unknown',
+				lists: ev.detail.data.lists,
+			} );
+			if ( ev.detail.data?.newspack_popup_id ) {
+				payload.newspack_popup_id = ev.detail.data.newspack_popup_id;
+			}
+			if ( ev.detail.data?.gate_post_id ) {
+				payload.gate_post_id = ev.detail.data.gate_post_id;
+			}
+			sendEvent( payload, 'np_newsletter_subscribed' );
+		}
+	} );
+};
+
 /**
  * Handle a successful reader registration.
  *
@@ -40,6 +64,7 @@ const handleRegistrationSuccess = ras => {
 			! window?.newspackReaderActivation?.getPendingCheckout()
 		) {
 			const payload = getEventPayload( {
+				referrer: window.location.pathname,
 				registration_method: ev.detail.data?.registration_method || 'unknown',
 			} );
 			if ( ev.detail.data?.newspack_popup_id ) {
@@ -82,6 +107,7 @@ const handleLoginSuccess = ras => {
 export const initAnalytics = () => {
 	window.newspackRAS = window.newspackRAS || [];
 	window.newspackRAS.push( function( ras ) {
+		handleNewsletterSignupSuccess( ras );
 		handleRegistrationSuccess( ras );
 		handleLoginSuccess( ras );
 	} );