Add hiive html attributes to ftc

packages/js/src/first-time-configuration/first-time-configuration-steps.js

@@ -14,13 +14,7 @@ import IndexationStep from "./tailwind-components/steps/indexation/indexation-st
 import SiteRepresentationStep from "./tailwind-components/steps/site-representation/site-representation-step";
 import PersonalPreferencesStep from "./tailwind-components/steps/personal-preferences/personal-preferences-step";
 import FinishStep from "./tailwind-components/steps/finish/finish-step";
-
-const STEPS = {
-	optimizeSeoData: "optimizeSeoData",
-	siteRepresentation: "siteRepresentation",
-	socialProfiles: "socialProfiles",
-	personalPreferences: "personalPreferences",
-};
+import { STEPS } from "./tailwind-components/steps/constants";
 
 /* eslint-disable complexity */
 
@@ -501,7 +495,7 @@ export default function FirstTimeConfigurationSteps() {
 							isFinished={ isIndexationStepFinished }
 						>
 							<EditButton
-								id={ `button-${ STEPS.optimizeSeoData }-edit` }
+								stepId={ STEPS.optimizeSeoData }
 								beforeGo={ beforeEditing }
 								isVisible={ showEditButton }
 								additionalClasses={ "yst-ml-auto" }
@@ -512,7 +506,7 @@ export default function FirstTimeConfigurationSteps() {
 						<Step.Content>
 							<IndexationStep setIndexingState={ setIndexingState } indexingState={ indexingState } showRunIndexationAlert={ showRunIndexationAlert } isStepperFinished={ isStepperFinished } />
 							<ContinueButton
-								id={ `button-${ STEPS.optimizeSeoData }-continue` }
+								stepId={ STEPS.optimizeSeoData }
 								additionalClasses="yst-mt-12"
 								beforeGo={ beforeContinueIndexationStep }
 								destination={ stepperFinishedOnce ? "last" : 1 }
@@ -527,7 +521,7 @@ export default function FirstTimeConfigurationSteps() {
 							isFinished={ isStep2Finished }
 						>
 							<EditButton
-								id={ `button-${ STEPS.siteRepresentation }-edit` }
+								stepId={ STEPS.siteRepresentation }
 								beforeGo={ beforeEditing }
 								isVisible={ showEditButton }
 								additionalClasses={ "yst-ml-auto" }
@@ -557,7 +551,7 @@ export default function FirstTimeConfigurationSteps() {
 							isFinished={ isStep3Finished }
 						>
 							<EditButton
-								id={ `button-${ STEPS.socialProfiles }-edit` }
+								stepId={ STEPS.socialProfiles }
 								beforeGo={ beforeEditing }
 								isVisible={ showEditButton }
 								additionalClasses={ "yst-ml-auto" }
@@ -582,7 +576,7 @@ export default function FirstTimeConfigurationSteps() {
 							isFinished={ isStep4Finished }
 						>
 							<EditButton
-								id={ `button-${ STEPS.personalPreferences }-edit` }
+								stepId={ STEPS.personalPreferences }
 								beforeGo={ beforeEditing }
 								isVisible={ showEditButton }
 								additionalClasses={ "yst-ml-auto" }

packages/js/src/first-time-configuration/tailwind-components/base/image-select.js

@@ -70,6 +70,7 @@ export default function ImageSelect( {
 				className={ imageClassName }
 				onClick={ onSelectImageClick }
 				type="button"
+				data-hiive-event-name="clicked_select_image"
 			>
 				{ renderPreview() }
 			</button>
@@ -79,6 +80,7 @@ export default function ImageSelect( {
 					id={ url ? id + "__replace-image" : id + "__select-image" }
 					className="yst-button yst-button yst-button--secondary yst-mr-2"
 					onClick={ onSelectImageClick }
+					data-hiive-event-name="clicked_select_image"
 				>
 					{ url ? __( "Replace image", "admin-ui" ) : __( "Select image", "admin-ui" ) }
 				</button>
@@ -88,6 +90,7 @@ export default function ImageSelect( {
 						id={ id + "__remove-image" }
 						className="yst-button--remove"
 						onClick={ onRemoveImageClick }
+						data-hiive-event-name="clicked_remove_image"
 					>
 						{ __( "Remove image", "admin-ui" ) }
 					</button>

packages/js/src/first-time-configuration/tailwind-components/configuration-stepper-buttons.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { Step } from "./stepper";
 import { stepperTimingClasses } from "../stepper-helper";
 import classNames from "classnames";
+import { HIIVE_STEPS_NAMES } from "../tailwind-components/steps/constants";
 
 /**
  * A ContinueButton that always goes to the next step.
@@ -13,18 +14,21 @@ import classNames from "classnames";
  *
  * @returns {WPElement} The ContinueButton, that always goes to the next step.
  */
-export function ContinueButton( { beforeGo, children, additionalClasses, ...restProps } ) {
+export function ContinueButton( { stepId, beforeGo, children, additionalClasses, ...restProps } ) {
 	return ( <Step.GoButton
+		id={ `button-${ stepId }-continue` }
 		className={ `yst-button yst-button--primary ${ additionalClasses }` }
 		destination={ 1 }
 		beforeGo={ beforeGo }
+		data-hiive-event-name={ `clicked_continue | ${ HIIVE_STEPS_NAMES[ stepId ] }` }
 		{ ...restProps }
 	>
 		{ children }
 	</Step.GoButton> );
 }
 
 ContinueButton.propTypes = {
+	stepId: PropTypes.string.isRequired,
 	additionalClasses: PropTypes.string,
 	beforeGo: PropTypes.func,
 	children: PropTypes.node,
@@ -44,27 +48,30 @@ ContinueButton.defaultProps = {
  *
  * @returns {WPElement} The EditButton, that always goes to the step it is placed in.
  */
-export function EditButton( { beforeGo, isVisible, children, additionalClasses, ...restProps } ) {
+export function EditButton( { stepId, beforeGo, isVisible, children, additionalClasses, ...restProps } ) {
 	const transitionClasses = `yst-transition-opacity ${stepperTimingClasses.slideDuration} yst-ease-out ${ isVisible
 		? "yst-opacity-100"
 		: `${stepperTimingClasses.delayBeforeOpening} yst-opacity-0 yst-pointer-events-none yst-hidden` }`;
 
 
 	return ( <Step.GoButton
+		id={ `button-${ stepId }-edit` }
 		className={ classNames(
 			"yst-button yst-button--secondary yst-button--small",
 			transitionClasses,
 			additionalClasses
 		) }
 		destination={ 0 }
 		beforeGo={ beforeGo }
+		data-hiive-event-name={ `clicked_edit | ${ HIIVE_STEPS_NAMES[ stepId ] }` }
 		{ ...restProps }
 	>
 		{ children }
 	</Step.GoButton> );
 }
 
 EditButton.propTypes = {
+	stepId: PropTypes.string.isRequired,
 	additionalClasses: PropTypes.string,
 	isVisible: PropTypes.bool,
 	beforeGo: PropTypes.func,
@@ -123,8 +130,22 @@ BackButton.defaultProps = {
  */
 export function StepButtons( { stepId, beforeContinue, continueLabel, beforeBack, backLabel } ) {
 	return <div className="yst-mt-12">
-		<ContinueButton id={ `button-${ stepId }-continue` } beforeGo={ beforeContinue }>{ continueLabel }</ContinueButton>
-		<BackButton id={ `button-${ stepId }-back` } additionalClasses="yst-ml-3" beforeGo={ beforeBack }>{ backLabel }</BackButton>
+		<ContinueButton
+			id={ `button-${ stepId }-continue` }
+			beforeGo={ beforeContinue }
+			data-hiive-event-name={ `clicked_continue | ${ HIIVE_STEPS_NAMES[ stepId ] }` }
+
+		>
+			{ continueLabel }
+		</ContinueButton>
+		<BackButton
+			id={ `button-${ stepId }-back` }
+			additionalClasses="yst-ml-3"
+			beforeGo={ beforeBack }
+			data-hiive-event-name={ `clicked_back | ${ HIIVE_STEPS_NAMES[ stepId ] }` }
+		>
+			{ backLabel }
+		</BackButton>
 	</div>;
 }
 
@@ -165,7 +186,12 @@ export function ConfigurationStepButtons( { stepId, stepperFinishedOnce, saveFun
 	} );
 
 	if ( stepperFinishedOnce ) {
-		return <Step.GoButton id={ `button-${ stepId }-go` } className="yst-button yst-button--primary yst-mt-12" destination="last" beforeGo={ onSaveClick }>
+		return <Step.GoButton
+			id={ `button-${ stepId }-go` }
+			className="yst-button yst-button--primary yst-mt-12"
+			destination="last"beforeGo={ onSaveClick }
+			data-hiive-event-name={ `clicked_save changes | ${ HIIVE_STEPS_NAMES[ stepId ] }` }
+		>
 			{ __( "Save changes", "wordpress-seo" ) }
 		</Step.GoButton>;
 	}

packages/js/src/first-time-configuration/tailwind-components/steps/constants.js

@@ -0,0 +1,12 @@
+export const STEPS = {
+	optimizeSeoData: "optimizeSeoData",
+	siteRepresentation: "siteRepresentation",
+	socialProfiles: "socialProfiles",
+	personalPreferences: "personalPreferences",
+};
+export const HIIVE_STEPS_NAMES = {
+	[ STEPS.optimizeSeoData ]: "data optimization",
+	[ STEPS.siteRepresentation ]: "site representation",
+	[ STEPS.socialProfiles ]: "social profiles",
+	[ STEPS.personalPreferences ]: "personal preferences",
+};

packages/js/src/first-time-configuration/tailwind-components/steps/finish/finish-step.js

@@ -39,6 +39,7 @@ export default function FinishStep() {
 					id="button-webinar-seo-dashboard"
 					href={ webinarIntroFirstTimeConfigUrl }
 					target="_blank"
+					data-hiive-event-name="clicked_to_onboarding_page"
 				>
 					{ sprintf(
 						/* translators: 1: Yoast SEO. */
@@ -51,6 +52,7 @@ export default function FinishStep() {
 					<Link
 						id="link-webinar-register"
 						onClick={ goToSEODashboard }
+						data-hiive-event-name="clicked_seo_dashboard"
 					>
 						{ __( "Or go to your SEO dashboard", "wordpress-seo" ) }
 					</Link>

packages/js/src/first-time-configuration/tailwind-components/steps/indexation/indexation.js

@@ -284,6 +284,7 @@ class Indexation extends Component {
 			className="yst-button yst-button--secondary"
 			onClick={ this.startIndexing }
 			id="indexation-data-optimization"
+			data-hiive-event-name="clicked_start_data_optimization"
 		>
 			{ __( "Start SEO data optimization", "wordpress-seo" ) }
 		</button>;

packages/js/src/first-time-configuration/tailwind-components/steps/personal-preferences/newsletter-signup.js

@@ -123,6 +123,8 @@ export function NewsletterSignup( { gdprLink } ) {
 					className="yst-button yst-button--primary yst-h-[45px] yst-items-center yst-mt-[27.5px] yst-shrink-0"
 					onClick={ onSignUpClick }
 					disabled={ signUpState === "loading" }
+					data-hiive-event-name="clicked_signup | personal preferences"
+
 				>
 					{ __( "Sign up!", "wordpress-seo" ) }
 				</button>

packages/js/src/first-time-configuration/tailwind-components/steps/social-profiles/social-field-array.js

@@ -61,6 +61,7 @@ const SocialFieldArray = ( { items, onAddProfile, onRemoveProfile, onChangeProfi
 				id="add-profile"
 				className="yst-button yst-button--secondary yst-items-center yst-mt-8"
 				onClick={ onAddProfile }
+				data-hiive-event-name="clicked_add_profile"
 			>
 				<PlusIcon className="yst-w-5 yst-h-5 yst-mr-1 yst-text-slate-400" />
 				{ addButtonChildren }

packages/js/src/first-time-configuration/tailwind-components/steps/social-profiles/social-profiles-step.js

@@ -44,11 +44,12 @@ export default function SocialProfilesStep( { state, dispatch, setErrorFields }
 			"</a>"
 
 		),
-		{   // eslint-disable-next-line jsx-a11y/anchor-has-content
+		{	// eslint-disable-next-line jsx-a11y/anchor-has-content
 			a: <a
 				id="yoast-configuration-person-social-profiles-user-link"
 				href={ window.wpseoScriptData.userEditUrl.replace( "{user_id}", state.personId ) }
 				target="_blank" rel="noopener noreferrer"
+				data-hiive-event-name="clicked_update_or_add_profile | social profiles"
 			/>,
 		} );
 

packages/js/src/installation-success.js

@@ -98,6 +98,7 @@ function InstallationSuccessPage() {
 								id="installation-successful-configuration-link"
 								href={ window.wpseoInstallationSuccess.firstTimeConfigurationUrl }
 								className="yst-inline-flex yst-items-center yst-w-full yst-justify-center yst-no-underline yst-px-6 yst-py-3 yst-border yst-border-transparent yst-text-base yst-font-medium yst-rounded-md yst-shadow-none yst-text-primary-500 yst-bg-white hover:yst-bg-gray-50 focus:yst-outline-none focus:yst-ring-2 focus:yst-ring-offset-2 focus:yst-ring-white yst-ring-offset-2 yst-ring-offset-primary-500"
+								data-hiive-event-name="clicked_start_first_time_configuration"
 							>
 								{ __( "Start first-time configuration!", "wordpress-seo" ) }
 								<svg
@@ -117,7 +118,12 @@ function InstallationSuccessPage() {
 							</a>
 						</div>
 					</div>
-					<a id="installation-success-skip-link" className="yst-bottom-12 yst-right-0 yst-mr-5 yst-self-end yst-text-base md:yst-absolute" href={ "/wp-admin/admin.php?page=wpseo_dashboard" }>
+					<a
+						id="installation-success-skip-link"
+						className="yst-bottom-12 yst-right-0 yst-mr-5 yst-self-end yst-text-base md:yst-absolute"
+						href={ "/wp-admin/admin.php?page=wpseo_dashboard" }
+						data-hiive-event-name="clicked_skip_button | installation successful screen"
+					>
 						{
 							/* translators: %s expands to ' »'. */
 							sprintf( __( "Skip%s", "wordpress-seo" ), " »" )

src/actions/configuration/first-time-configuration-action.php

@@ -58,7 +58,17 @@ public function __construct( Options_Helper $options_helper, Social_Profiles_Hel
 	 * @return object The response object.
 	 */
 	public function set_site_representation( $params ) {
-		$failures = [];
+		$failures   = [];
+		$old_values = $this->get_old_values( self::SITE_REPRESENTATION_FIELDS );
+
+		// This field seems to be not used anymore.
+		$old_values = \array_filter(
+			$old_values,
+			static function( $key ) {
+				return $key !== 'description';
+			},
+			\ARRAY_FILTER_USE_KEY
+		);
 
 		foreach ( self::SITE_REPRESENTATION_FIELDS as $field_name ) {
 			if ( isset( $params[ $field_name ] ) ) {
@@ -81,6 +91,15 @@ public function set_site_representation( $params ) {
 		$this->options_helper->set( 'company_logo_meta', false );
 		$this->options_helper->set( 'person_logo_meta', false );
 
+		/**
+		 * Action: 'wpseo_post_update_site_representation' - Allows for Hiive event tracking.
+		 *
+		 * @api array The options new values.
+		 * @api array The options old values.
+		 * @api array The options that failed to be saved.
+		 */
+		\do_action( 'wpseo_post_update_site_representation', $params, $old_values, $failures );
+
 		if ( \count( $failures ) === 0 ) {
 			return (object) [
 				'success' => true,
@@ -104,7 +123,17 @@ public function set_site_representation( $params ) {
 	 * @return object The response object.
 	 */
 	public function set_social_profiles( $params ) {
-		$failures = $this->social_profiles_helper->set_organization_social_profiles( $params );
+		$failures   = $this->social_profiles_helper->set_organization_social_profiles( $params );
+		$old_values = $this->get_old_values( \array_keys( $this->social_profiles_helper->get_organization_social_profile_fields() ) );
+
+		/**
+		 * Action: 'wpseo_post_update_social_profiles' - Allows for Hiive event tracking.
+		 *
+		 * @api array The options new values.
+		 * @api array The options old values.
+		 * @api array The options that failed to be saved.
+		 */
+		\do_action( 'wpseo_post_update_social_profiles', $params, $old_values, $failures );
 
 		if ( empty( $failures ) ) {
 			return (object) [
@@ -186,6 +215,16 @@ public function set_enable_tracking( $params ) {
 			$success = $this->options_helper->set( 'tracking', $params['tracking'] );
 		}
 
+		/**
+		 * Action: 'wpseo_post_update_enable_tracking' - Allows for Hiive event tracking.
+		 *
+		 * @api array The new value.
+		 * @api array The old value.
+		 * @api bool  Whether the option failed to be stored.
+		 */
+		// $success is negated to be aligned with the other two actions which pass $failures.
+		\do_action( 'wpseo_post_update_enable_tracking', $params['tracking'], $option_value, ! $success );
+
 		if ( $success ) {
 			return (object) [
 				'success' => true,
@@ -295,4 +334,21 @@ public function get_configuration_state() {
 	private function can_edit_profile( $person_id ) {
 		return \current_user_can( 'edit_user', $person_id );
 	}
+
+	/**
+	 * Gets the old values for the given fields.
+	 *
+	 * @param array $fields_names The fields to get the old values for.
+	 *
+	 * @return array The old values.
+	 */
+	private function get_old_values( $fields_names ) : array {
+		$old_values = [];
+
+		foreach ( $fields_names as $field_name ) {
+			$old_values[ $field_name ] = $this->options_helper->get( $field_name );
+		}
+
+		return $old_values;
+	}
 }