Merge pull request #20678 from Yoast/add-hiive-html-attributes-to-ftc

Add hiive html attributes to ftc

packages/js/src/first-time-configuration/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/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 "./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={ url ? "clicked_replace_image" : "clicked_select_image" }
 				>
 					{ url ? __( "Replace image", "wordpress-seo" ) : __( "Select image", "wordpress-seo" ) }
 				</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", "wordpress-seo" ) }
 					</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 "../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,
@@ -86,18 +93,21 @@ EditButton.defaultProps = {
  *
  * @returns {WPElement} The BackButton, that always goes to the previous step.
  */
-export function BackButton( { beforeGo, children, additionalClasses, ...restProps } ) {
+export function BackButton( { stepId, beforeGo, children, additionalClasses, ...restProps } ) {
 	return ( <Step.GoButton
+		id={ `button-${ stepId }-back` }
 		className={ `yst-button yst-button--secondary ${ additionalClasses }` }
 		destination={ -1 }
 		beforeGo={ beforeGo }
+		data-hiive-event-name={ `clicked_go_back | ${ HIIVE_STEPS_NAMES[ stepId ] }` }
 		{ ...restProps }
 	>
 		{ children }
 	</Step.GoButton> );
 }
 
 BackButton.propTypes = {
+	stepId: PropTypes.string.isRequired,
 	additionalClasses: PropTypes.string,
 	beforeGo: PropTypes.func,
 	children: PropTypes.node,
@@ -123,8 +133,19 @@ 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
+			stepId={ stepId }
+			beforeGo={ beforeContinue }
+		>
+			{ continueLabel }
+		</ContinueButton>
+		<BackButton
+			stepId={ stepId }
+			additionalClasses="yst-ml-3"
+			beforeGo={ beforeBack }
+		>
+			{ backLabel }
+		</BackButton>
 	</div>;
 }
 
@@ -162,10 +183,16 @@ export function ConfigurationStepButtons( { stepId, stepperFinishedOnce, saveFun
 		// If save is not succesful: we are still editing
 		setEditState( ! saveSuccesful );
 		return saveSuccesful;
-	} );
+	}, [ saveFunction ] );
 
 	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/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,7 @@ 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

@@ -66,6 +66,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" ), " »" )