1270141 - Add brand perception survey links to mozilla.org web pages via Optimizely

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect)

Description

[Holly Habstritt Gaal [:Habber]]

A brand perception survey will be distributed to gather feedback from our users pre-mozilla.org redesign. 

4 experiment drafts are created in Optimizely that add a link to a survey in a banner at top of page:

1. - www.mozilla.org, Firefox users
https://app.optimizely.com/edit?experiment_id=5798691178

2. - www.mozilla.org, non-Firefox users
https://app.optimizely.com/edit?experiment_id=5802560476

3. - /about, Firefox users
https://app.optimizely.com/edit?experiment_id=5807360342

4. - /about, non-Fx users
https://app.optimizely.com/edit?experiment_id=5797451923


Banner code used in above links is reused from this past experiment - https://app.optimizely.com/edit?experiment_id=2957840569


Known outstanding tasks:
- At the time of posting this bug, survey links in code are the same for each experiment. I will update the Survey Gizmo survey URL in the code for each experiment once I have approval of the survey contents.

- Before starting the Optimizely experiments, update the traffic allocation

Comment 1

[Jonathan Petto [:jpetto]]

Audience targeting looks good. Just out of curiosity, what will the traffic allocation be updated to?

I've refactored the code to remove redundancies and improve readability and performance. You should be able to copy/paste the below into the <edit code> box in the Optimizely editor view.

$("#wrapper").css({"top":"28px"});

$("body").prepend('<div class="message"><span class="inviteMsg">Hello! Would you be willing to take a minute to answer a few questions for Mozilla?</span><a class="surveyBtn" href="http://www.surveygizmo.com/s3/2166354/what-does-mozilla-mean-to-you-mission">Sure. I\'ll help.</a></div>');

$("body > .message").css({
  "background-color":"#fff0b3",
  "height":"30px",
  "line-height":"30px",
  "top":"-1px",
  "position":"absolute",
  "z-index":"10",
  "width": "100%",
  "text-align": "center",
  "font-size":"12px"
}).prepend("<img id=\"optimizely_478392850\" src=\"//cdn.optimizely.com/img/25134714/3a0b1ca638374dab845e6326f3849091.png\" />");

$("#optimizely_478392850").css({"position":"relative", "left":"20px", "top":"4px"});

$(".inviteMsg").css({
  "position":"relative",
  "top":"1px",
  "left":"27px"
});

$(".surveyBtn").css({
  "position":"relative",
  "left":"40px",
  "top":"1px",
  "background-color":"#00b6e0",
  "color":"#ffffff",
  "height":"20px",
  "padding": "2px 5px",
  "border-radius":"2px"
});

Comment 2

[Jonathan Petto [:jpetto]]

Experiments have been updated with the code above, though existing survey URLs have been retained.

Comment 3

[Holly Habstritt Gaal [:Habber]]

Thanks, Jon. Everything looks good when previewed via Optimizely. I've started the experiments.