@automattic/newspack-blocks 1.0.0-hotfix-cap-count-user-posts-dedup.1

package/src/modal-checkout/analytics/ga4/opened.js

@@ -0,0 +1,37 @@
+import { getEventPayload, sendEvent } from './utils';
+
+/**
+ * Execute a callback function to send a GA event when a prompt is dismissed.
+ *
+ * @param {Object} data Information about the purchase being made.
+ */
+export const manageOpened = data => {
+	if ( 'function' !== typeof window.gtag ) {
+		return;
+	}
+
+	let action = 'opened';
+
+	const { amount = '', is_variable = '', is_grouped = '', price = '', variation_id = '' } = data;
+
+	const params = {
+		...data,
+	};
+
+	// On the first variable screen, there may not be a price so we want to check for it.
+	if ( amount || price ) {
+		params.amount = amount ? amount : price;
+	}
+
+	// Change the action when opening the initial variation modal.
+	if ( is_variable && ! variation_id ) {
+		action = 'opened_variations';
+	}
+	if ( is_grouped ) {
+		action = 'opened_grouped';
+	}
+
+	const payload = getEventPayload( action, params );
+
+	sendEvent( payload );
+};

package/src/modal-checkout/analytics/ga4/pagination.js

@@ -0,0 +1,59 @@
+import { getEventPayload, sendEvent } from './utils';
+import { getCheckoutData } from '../../utils';
+
+/**
+ * Event fired when switching between steps of the multi-step checkout flow.
+ *
+ * @param {string} action Action name for the event: 'continue' or 'back'.
+ */
+
+export const managePagination = ( action = 'continue' ) => {
+	if ( 'function' !== typeof window.gtag ) {
+		return;
+	}
+
+	const {
+		action_type,
+		amount,
+		currency,
+		product_id,
+		product_type,
+		recurrence,
+		referrer,
+		variation_id = '',
+		gate_post_id = '',
+		newspack_popup_id = '',
+		prompt_title = '',
+	} = getCheckoutData( 'modal-checkout-product-details' );
+
+	const params = {
+		action_type,
+		amount,
+		currency,
+		product_id,
+		product_type,
+		recurrence,
+		referrer,
+	};
+
+	// There's only a variation ID for variable products, after you've selected one.
+	if ( variation_id ) {
+		params.variation_id = variation_id;
+	}
+
+	// If this checkout started from a content gate, add the gate ID to the payload.
+	if ( gate_post_id ) {
+		params.gate_post_id = gate_post_id;
+	}
+
+	// If this checkout started from a campaign prompt, add the popup ID and title to the payload.
+	if ( newspack_popup_id ) {
+		params.newspack_popup_id = newspack_popup_id;
+	}
+	if ( prompt_title ) {
+		params.prompt_title = prompt_title;
+	}
+
+	const payload = getEventPayload( action, params );
+	sendEvent( payload );
+};

package/src/modal-checkout/analytics/ga4/utils/index.js

@@ -0,0 +1,64 @@
+/**
+ * Get a GA4 event payload for a given prompt.
+ *
+ * @param {string} action      Action name for the event.
+ * @param {number} promptId    ID of the prompt
+ * @param {Object} extraParams Additional key/value pairs to add as params to the event payload.
+ *
+ * @return {Object} Event payload.
+ */
+
+export const getEventPayload = ( action, extraParams = {} ) => {
+	return { ...extraParams, action };
+};
+
+/**
+ * Checkout data keys that can be included in the event payload.
+ *
+ * @type {string[]}
+ */
+const eventKeys = [
+	'action',
+	'action_type',
+	'amount',
+	'currency',
+	'product_id',
+	'product_type',
+	'variation_id',
+	'variation_ids',
+	'is_variable',
+	'is_grouped',
+	'child_ids',
+	'price_summary',
+	'newspack_popup_id',
+	'prompt_title',
+	'gate_post_id',
+	'recurrence',
+	'referrer',
+];
+
+/**
+ * Send an event to GA4.
+ *
+ * @param {Object} payload   Event payload.
+ * @param {string} eventName Name of the event. Defaults to `np_modal_checkout_interaction` but can be overriden if necessary.
+ */
+export const sendEvent = ( payload, eventName = 'np_modal_checkout_interaction' ) => {
+	if ( 'function' === typeof window.gtag && payload ) {
+		const filteredPayload = {};
+		for ( const key of eventKeys ) {
+			if ( payload[ key ] ) {
+				// Normalize boolean values to 'yes' or 'no'.
+				if ( typeof payload[ key ] === 'boolean' ) {
+					payload[ key ] = payload[ key ] ? 'yes' : 'no';
+				} else if ( payload[ key ] === 'true' ) {
+					payload[ key ] = 'yes';
+				} else if ( payload[ key ] === 'false' ) {
+					payload[ key ] = 'no';
+				}
+				filteredPayload[ key ] = payload[ key ].toString();
+			}
+		}
+		window.gtag( 'event', eventName, filteredPayload );
+	}
+};

package/src/modal-checkout/analytics/index.js

@@ -0,0 +1,6 @@
+export { manageCheckoutAttempt } from './ga4/checkout-attempt';
+export { manageCheckoutSuccess } from './ga4/checkout-success';
+export { manageDismissed } from './ga4/dismissed';
+export { manageLoaded } from './ga4/loaded';
+export { manageOpened } from './ga4/opened';
+export { managePagination } from './ga4/pagination';