feat: give each registration form a unique ID (#1953)

* feat: give each registration form a unique ID * feat: handle dynamic AMP Analytics form field placeholders * fix: guard against nonexistent selectors * docs: explain usage for the form ID
Automattic · Sep 6, 2022 · 29fb515 · 29fb515
1 parent f3f54e1
commit 29fb515
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/assets/blocks/reader-registration/index.php b/assets/blocks/reader-registration/index.php
@@ -78,6 +78,20 @@ function enqueue_scripts() {
 }
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\enqueue_scripts' );
 
+/**
+ * Generate a unique ID for each registration form.
+ *
+ * The ID for each form instance is unique only for each page render.
+ * The main intent is to be able to pass this ID to analytics so we
+ * can identify what type of form it is, so the ID doesn't need to be
+ * predictable nor consistent across page renders.
+ *
+ * @return string A unique ID string to identify the form.
+ */
+function get_form_id() {
+	return \wp_unique_id( 'newspack-register-' );
+}
+
 /**
  * Render Registration Block.
  *
@@ -159,7 +173,7 @@ function render_block( $attrs, $content ) {
 				<?php echo $success_registration_markup; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
 			</div>
 		<?php else : ?>
-			<form>
+			<form id="<?php echo esc_attr( get_form_id() ); ?>">
 				<div class="newspack-registration__header">
 					<?php if ( ! empty( $attrs['title'] ) ) : ?>
 						<h2 class="newspack-registration__title"><?php echo \wp_kses_post( $attrs['title'] ); ?></h2>

diff --git a/includes/class-analytics.php b/includes/class-analytics.php
@@ -724,16 +724,41 @@ protected static function output_js_submit_event( $event ) {
 				var elements        = Array.prototype.slice.call( document.querySelectorAll( elementSelector ) );
 
 				for ( var i = 0; i < elements.length; ++i ) {
-					elements[i].addEventListener( 'submit', function() {
+					elements[i].addEventListener( 'submit', function(e) {
+						var eventInfo = {
+								event_category: '<?php echo esc_attr( $event['event_category'] ); ?>'
+						};
+						<?php if ( isset( $event['event_label'] ) ) : ?>
+							var form = e.currentTarget;
+							var eventLabel = '<?php echo isset( $event['event_label'] ) ? esc_attr( $event['event_label'] ) : ''; ?>';
+							<?php if ( preg_match( '/(\${formId}|\${formFields\[(.*?)\]})/', $event['event_label'] ) ) : ?>
+								eventLabel = eventLabel.replace( '${formId}', form.id );
+								var fields = eventLabel.match( /\${formFields\[(.*?)\]}/g )
+								fields.forEach( function( field ) {
+									var fieldName = field.match( /\${formFields\[(.*?)\]}/ )[1];
+									if ( form[ fieldName ] ) {
+										var fieldValues = [];
+										if ( form[ fieldName ].length ) {
+											for ( var j = 0; j < form[ fieldName ].length; j++ ) {
+												if ( form[ fieldName ][ j ].checked ) {
+													fieldValues.push( form[ fieldName ][ j ].value );
+												}
+											}
+										} else {
+											fieldValues.push( form[ fieldName ].value );
+										}
+
+										eventLabel = eventLabel.replace( field, fieldValues.join( ',' ) );
+									}
+								} );
+							<?php endif; ?>
+							eventInfo.event_label = eventLabel;
+						<?php endif; ?>
+
 						gtag(
 							'event',
 							'<?php echo esc_attr( $event['event_name'] ); ?>',
-							{
-								event_category: '<?php echo esc_attr( $event['event_category'] ); ?>',
-								<?php if ( isset( $event['event_label'] ) ) : ?>
-									event_label: '<?php echo esc_attr( $event['event_label'] ); ?>',
-								<?php endif; ?>
-							}
+							eventInfo
 						);
 					} );
 				}