[fixmystreet.com] Homepage button step A/B test.

2 files changed, 68 insertions, 0 deletions

diff --git a/templates/web/fixmystreet.com/around/postcode_form.html b/templates/web/fixmystreet.com/around/postcode_form.html
new file mode 100644
index 000000000..afb3b66fb
--- /dev/null
+++ b/templates/web/fixmystreet.com/around/postcode_form.html
@@ -0,0 +1,48 @@
+[%# Identical to parent, but with an extra div and javascript for our homepage A/B test %]
+
+<div id="front-main">
+    <div id="front-main-container">
+        [% INCLUDE 'around/intro.html' %]
+
+        <div id="homepage-ab-test">
+            <p><a id="cta-report">Report a problem</a></p>
+            <p><a id="cta-view">Or view problems in an area you know</a></p>
+        </div>
+
+        [%
+            question = c.cobrand.enter_postcode_text || loc('Enter a nearby street name and area');
+        %]
+        <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm">
+            <label for="pc">[% question %]:</label>
+            <div>
+                <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
+                <input type="submit" value="[% loc('Go') %]" id="sub">
+            </div>
+            [% IF partial_token %]
+                <input type="hidden" name="partial" value="[% partial_token.token %]">
+            [% END %]
+        </form>
+    </div>
+</div>
+
+<script type="text/javascript">
+$(function(){
+  $('#homepage-ab-test a').on('click', function(e){
+      e.preventDefault();
+      $('#homepage-ab-test').fadeOut(250, function(){
+
+        /* fadeIn() normal form, and focus input */
+        $('#postcodeForm').fadeIn(250, function(){
+          $('#pc').focus();
+        });
+
+        /* Can't just fadeIn() because #geolocate_link
+           should have { display: inline-block } */
+        $('#geolocate_link').css({
+          opacity: 0,
+          display: 'inline-block'
+        }).animate({ opacity: 1 }, 250);
+      });
+  });
+});
+</script>
diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html
index 27ffc12a1..17cb822b7 100644
--- a/templates/web/fixmystreet.com/header_extra.html
+++ b/templates/web/fixmystreet.com/header_extra.html
@@ -1,3 +1,23 @@
 <script src="[% start %][% version('/js/jquery.cookie.min.js') %]" type="text/javascript" charset="utf-8"></script>
 
+[%# We are conducting an A/B experiment on the homepage %]
+[% IF c.req.uri.path == '/' %]
+<script src="//www.google-analytics.com/cx/api.js?experiment=cX9Tbz_VRl-cZDM5WVRgTQ"></script>
+<script>
+var variation = cxApi.chooseVariation(),
+    docElement = document.documentElement,
+    className = docElement.className;
+docElement.className = className + ' ' + 'variant' + variation;
+</script>
+<style>
+html.variant1 #homepage-ab-test {
+    display: block;
+}
+html.variant1 #postcodeForm,
+html.variant1 #front-main a#geolocate_link {
+    display: none;
+}
+</style>
+[% END %]
+
 [% INCLUDE 'tracking_code.html' %]