Merge pull request #3728 from Automattic/add/domain-search-placeholde…

…r-test Domain Search: A/B test for the placeholder text and examples for the domains search field
Automattic · Mar 4, 2016 · ecad150 · ecad150
2 parents 99183b7 + e19014d
commit ecad150
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 3 deletions.
diff --git a/client/components/domains/register-domain-step/index.jsx b/client/components/domains/register-domain-step/index.jsx
@@ -166,6 +166,19 @@ var RegisterDomainStep = React.createClass( {
 	},
 
 	searchForm: function() {
+		var placeholderText = this.translate( 'Enter a domain or keyword' ),
+			exampleDomains = '';
+
+		if ( ! this.props.isInSigup && abtest( 'domainSearchPlaceholderText' ) === 'searchForADomain' ) {
+			placeholderText = 'Search for a domain';
+
+			exampleDomains = (
+				<div className="register-domain-step__search-examples">
+					e.g. example.com, example.net
+				</div>
+			);
+		}
+
 		return (
 			<div className="register-domain-step__search">
 				<SearchCard
@@ -175,11 +188,12 @@ var RegisterDomainStep = React.createClass( {
 					onSearch={ this.onSearch }
 					onSearchChange={ this.onSearchChange }
 					onBlur={ this.save }
-					placeholder={ this.translate( 'Enter a domain or keyword', { textOnly: true } ) }
+					placeholder={ placeholderText }
 					autoFocus={ true }
 					delaySearch={ true }
 					delayTimeout={ 2000 }
 				/>
+				{ exampleDomains }
 			</div>
 		);
 	},

diff --git a/client/components/domains/register-domain-step/style.scss b/client/components/domains/register-domain-step/style.scss
@@ -26,6 +26,13 @@
 	}
 }
 
+.register-domain-step__search-examples {
+	color: $gray;
+	font-size: 13px;
+	font-style: italic;
+	margin: 8px 0 0 0;
+}
+
 @keyframes shake {
 	0%, 100% {
 	    transform: translate3d( 0, 0, 0 );

diff --git a/client/lib/abtest/active-tests.js b/client/lib/abtest/active-tests.js
@@ -79,5 +79,12 @@ module.exports = {
 		defaultVariation: 'original',
 		excludeSitesWithPaidPlan: true
 	},
-
+	domainSearchPlaceholderText: {
+		datestamp: '20160304',
+		variations: {
+			original: 50,
+			searchForADomain: 50
+		},
+		defaultVariation: 'original'
+	},
 };
diff --git a/client/signup/steps/domains/index.jsx b/client/signup/steps/domains/index.jsx
@@ -163,7 +163,8 @@ module.exports = React.createClass( {
 				offerMappingOption
 				analyticsSection="signup"
 				includeWordPressDotCom
-				showExampleSuggestions />
+				showExampleSuggestions
+				isInSigup />
 		);
 	},