Fix #3894, implement A/B test for text-free Download button on shot page

mozilla-services · Dec 8, 2017 · f5759b4 · f5759b4
1 parent 6814bc8
commit f5759b4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/server/src/ab-tests.js b/server/src/ab-tests.js
@@ -15,6 +15,16 @@ let allTests = {
       {name: "newicon", probability: 0.1}
     ],
     exclude: ["*"]
+  },
+  downloadText: {
+    description: "Test the effect of removing the word 'Download' from the download button on the shot page",
+    gaField: "cd9",
+    version: 1,
+    options: [
+      {name: "no-download-text", probability: 0.1}
+    ],
+    exclude: ["*"],
+    appliesToPublic: true
   }
 };
 

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -386,8 +386,13 @@ class Body extends React.Component {
       favicon = <div style={{backgroundImage: `url("${shot.favicon}")`}} className="favicon" />;
     }
 
-    const shotPageDownload = <Localized id="shotPageDownload"><span className="download-text">Download</span></Localized>;
-
+    const noText = this.props.abTests && this.props.abTests.downloadText
+                           && this.props.abTests.downloadText.value === "no-download-text";
+    const downloadText = [<img src={ this.props.staticLink("/static/img/download-white.svg") } width="20" height="20"/>,
+                         '\u00a0',
+                          <Localized id="shotPageDownload"><span className="download-text">Download</span></Localized>];
+    const downloadNoText = [<img src={ this.props.staticLink("/static/img/download-white.svg") } width="20" height="20"/>,
+                    <span className="download-text"></span>];
     return (
       <reactruntime.BodyTemplate {...this.props}>
         { renderGetFirefox ? this.renderFirefoxRequired() : null }
@@ -412,8 +417,7 @@ class Body extends React.Component {
             <Localized id="shotPageDownloadShot">
               <a className="button primary" href={ this.props.downloadUrl } onClick={ this.onClickDownload.bind(this) }
                 title="Download the shot image">
-                <img src={ this.props.staticLink("/static/img/download-white.svg") } width="20" height="20"/>&nbsp;
-                {shotPageDownload}
+                { (noText) ? downloadNoText : downloadText }
               </a>
             </Localized>
           </div>