SC-326 [SCO-Brochure] Header with Request a Catalogue

1.specification.md

Specifications

• Add a header above the existing header that is the full width of the page

• Please see design in sketch: https://sketch.cloud/s/zb17y/a/5qa82x

• Copy is "TRAVEL WITH US - HUNDREDS OF TRIPS ARE WAITING!"

• Copy of CTA is "REQUEST A FREE CATALOG"

• Copy is white

• CTA in design is missing word "FREE"

https://content.sierraclub.org/outings/request-catalog

please see sketch file for actual blue color https://sketch.cloud/s/zb17y/a/M5bAym

catalogue.html

<div id="req-catalogue" class="sticky-block">
  <p>
    TRAVEL WITH US - HUNDREDS OF TRIPS ARE WAITING!
    <a href="https://content.sierraclub.org/outings/request-catalog"
      >Request a free catalog</a
    >
  </p>
</div>

SC-326.README.md

Hello Sierra Club Devs,

We ran this experiment in Optimizely, and found that it produced higher conversions.

Hypothesis

Adding a requesst a catalogue for users who aren't willing to book now will increase user signups down the road

Target Audience

Desktop

Winning variation

V1

Current State

The test is currently being shown to 100% of traffic on the following pages:

• Sitewide - Outings

In order to see the original, you need to add ?optimizely_disable=true to the url, like this:
https://content.sierraclub.org/outings/?optimizely_disable=true This package contains all of the information that we used to create this experiment in Optimizely.

We've included the original specification that was generated by the product manager and handed off to an engineer. This demonstrates the general format, details, and workflow that we use to generate new experiments.

You will also find the code that we've written to accomplish the task. Notice: We typically use a build system that compiles our ECMAScript 2015 code into ES5 compatible code in order to support older browsers, we also use the SASS css compiler, and PostCSS autoprefixer.

Our compilation also generates this SHARED variable which we use to pass values between shared code and variation code. This primarily helps reduce redundancy, minimizing snippet size. The SCSS file recieves a $TAG string variable which relates to the experiment name (in this case sc326). The same value is provided to JS as SHARED.tag.

We are happy to answer whatever questions you might have regarding any of this.

shared.js

// eslint-disable-next-line no-unused-vars
import { utils, log, error, init } from "cromedics/base";
import bar from "./catalogue.html";
log("v0.1");

const { waitForElement } = utils;

SHARED.init = (variation, page) => {
  init(variation, page);

  switch (variation) {
    case "v1":
      applyChanges();
      break;

    case "v2":
      applyChanges();
      break;

    default:
      break;
  }
};

// ----------- Hoisted functions @andrew -----------------

function applyChanges() {
  waitForElement("header")
    .then(header => {
      header.insertAdjacentHTML("beforebegin", bar);

      addStickyJS();
    })
    .catch(error);
}

function addStickyJS() {
  // Sticky header
  var $stickyBlock = document.querySelector(".sticky-block");

  $stickyBlock.addEventListener("click", () => {
    window["optimizely"].push({
      type: "event",
      eventName: "sc-326_request_catalogue"
    });
  });

  function onScroll() {
    window.scrollY > 0
      ? $stickyBlock.classList.add("sticky")
      : $stickyBlock.classList.remove("sticky");
  }

  document.addEventListener("scroll", onScroll);
}

shared.scss

$blue: #00478a;
$orange: #ff5c3b;
$green: #009942;

.#{$TAG} {
  .sticky {
    position: fixed;
    top: 15px;
  }

  &.nav-sticky #navbar {
    // The height of our bar
    top: 40px;
  }

  #req-catalogue {
    height: 40px;
    // position: sticky;
    text-align: center;
    top: 0;
    width: 100vw;
    z-index: 1111;

    p {
      color: white;
      font-family: "proxima-nova", helvetica, arial, sans-serif;
      font-size: 14px;
      font-weight: lighter;
      height: 40px;
      letter-spacing: 3px;
      line-height: 40px;
      text-transform: uppercase;

      a {
        color: white;

        text-decoration: underline;
        font-weight: 600;
      }
    }
  }
}

.sc326v1 {
  #req-catalogue {
    background-color: $blue;
  }
}
.sc326v2 {
  #req-catalogue {
    background-color: $green;
  }
}