Growth Experiment #5 - "Join the Party" Share Link #1797

maxxcrawford · 2020-07-23T21:30:58Z

Related issues:

Outstanding issues:

Add GA events for all interactions
Set custom UTM params on traffic that comes from the share links
Add documentation for -exp SemVer tagging

Testing Steps

There are four share elements that show up in the treatment branch. Below describes the steps to test each:

Requirements:

The first language needs to be an English variant.

General / Footer

Enroll in the treatment branch: https://monitor-v2.herokuapp.com/?experimentBranch=vb
Scroll to the bottom of any page and click "Share Monitor" in the Footer

A modal should appear with the link: /share/purple

This URL should redirect the user back to the homepage.

General / Avatar Menu (Must be logged in)

Enroll in the treatment branch: https://monitor-v2.herokuapp.com/?experimentBranch=vb
Sign into Monitor
Once signed in, the avatar menu will be visible in the top right corner, where the Sign In button was. Click it, and then click on "Share Monitor"

It'll open the same modal, except with the link /share/orange
This URL should redirect the user back to the homepage. (Note - if you're logged in, it'll redirect you to the /user/dashboard.)

General / User Dashboard (Must be logged in)

Enroll in the treatment branch: https://monitor-v2.herokuapp.com/?experimentBranch=vb
Sign into Monitor
Once signed in, scroll down below the first email address/set of breaches on the dashboard page. Click the following link:

It'll open the same modal, except with the link /share/blue
This URL should redirect the user back to the homepage. (Note - if you're logged in, it'll redirect you to the /user/dashboard.)

Breach-specific / Breach Details Page

Enroll in the treatment branch: https://monitor-v2.herokuapp.com/?experimentBranch=vb
Go to a breach detail page (Example: https://monitor-v2.herokuapp.com/breach-details/Wattpad)
Click on the following link:

It'll open the same modal, except with the link will include the name of the current breach. /share/Wattpad. Note that it will also have different text in the first paragraph too!
This URL will redirect back to the homepage, but should have that breach set as the featured breach.

Expected behavior about the Modal:

Once open, click anywhere out of the modal to dismiss it
Once open, click the "X" to dismiss it
Once open, click the Escape ("ESC") key to dismiss it
If you focus/click into the input box, it should highlight the URL
Clicking the "Copy" button will copy the URL to the clip board
It has been sized for both mobile and desktop.

maxxcrawford · 2020-07-27T20:58:12Z

views/partials/dashboards/breaches-dash.hbs

@@ -36,9 +36,10 @@
      <h2 class="pref-headline">{{ getString "email-addresses-title" }}</h2>
      {{> dashboards/manage-email-link variableClass="hide-mobile"}}
    </div>
-    <div class="email-cards flx flx-col jst-cntr">
+    <div class="email-cards flx flx-col jst-cntr {{#if experimentFlags.treatmentBranch}}experiment{{/if}}">


Note - I wasn't able / didn't see the value in persisting the experimentFlags data all the way down to each verifiedEmail object. This solution still prints it out, but it is hidden (via CSS) by default.

maxxcrawford · 2020-07-30T15:31:15Z

controllers/breach-details.js

 const { changePWLinks } = require("../lib/changePWLinks");
 const { getAllEmailsAndBreaches } = require("./user");

+const EXPERIMENTS_ENABLED = (AppConstants.EXPERIMENT_ACTIVE === "1");
+const { getExperimentFlags } = require("./utils");


Adding experiment flags to the breach details template to show/hide the Share CTA in page.

maxxcrawford · 2020-07-30T15:33:06Z

controllers/home.js

+  if (req.session.redirectHome) {
+    req.session.redirectHome = false;
+    return res.redirect("/");
+  }


Before this flag, if a user went to /share/{non-breach-identifier}, it would leave that as the URL. This puts them back to the homepage, proper like.

Note that if you share a breach detail link (Ex: share/Zynga), it keeps the /share/ pattern.

maxxcrawford · 2020-07-30T15:33:35Z

controllers/home.js

+    getExperimentBranch(req, false, ["en"], {
+      "va": 50,
+      "vb": 50,
+    });
+  }


Enroll 50% of ALL English variant traffic in this experiment.

This function returns assignedCohort but we're not assigning that to anything here? If this function is mainly to set the experiment for the session, the function should probably be re-named to setExperimentBranch?

Filed Issue #1884

maxxcrawford · 2020-07-30T15:34:33Z

controllers/user.js

@@ -229,7 +229,9 @@ async function getDashboard(req, res) {
  const user = req.user;
  const allBreaches = req.app.locals.breaches;
  const { verifiedEmails, unverifiedEmails } = await getAllEmailsAndBreaches(user, allBreaches);
+  const utmOverrides = getUTMContents(req);


Setting the /share/ link catcher on this page too, in case the person who uses it is already signed into Monitor.

maxxcrawford · 2020-07-30T15:36:43Z

middleware.js

+    const featuredBreach = HIBP.getBreachByName(allBreaches, breachName);
+
+    if (featuredBreach) {
+      req.session.utmOverrides.campaignTerm = featuredBreach.Name;


Verify that user is actually requesting a valid Breach to be featured.

maxxcrawford · 2020-07-30T15:41:38Z

routes/home.js


 const router = express.Router();
 const csrfProtection = csrf();

 router.get("/", csrfProtection, home);
+router.get("/share/orange", csrfProtection, getShareUTMs, home);


Added middleware function to catch /share/ link requests and set the UTMs accordingly

maxxcrawford · 2020-07-30T15:42:51Z

template-helpers/footer.js

@@ -28,6 +33,21 @@ function getFooterLinks(args) {
    },
  ];

+  // Growth Experiment: Only add the footer share line if user is on VB branch
+  const experimentFlags = getExperimentFlags(args.data.root.req, EXPERIMENTS_ENABLED);
+  if (EXPERIMENTS_ENABLED && experimentFlags.treatmentBranch) {


This appends the share link to the footer (same in the header too) without breaking the current loop-build flow to hard-code this entry in.

maxxcrawford · 2020-07-30T15:43:35Z

template-helpers/hbs-helpers.js

-    string.stringId =LocaleUtils.fluentFormat(locales, stringId);
+    // Growth Experiment: Catch EN* Experimnal Strings
+    if (stringId === "share-monitor") {
+      string.stringId = "Share Monitor";


Work-around to not have the L10N team localize this experiment string.

…n on treatment branch

…padding, input height, btn color)

…shboard

…elying on session data

…sistently

…o that users' session

…e Copy button is clicked

…riment. This will keep the share-traffic cohort sepereate from the experiment cohort.

Fixed #1829 - Increase size of modal headline to match comp Fixed #1839 - Revised max-width of input/btn area to match comp Fixed #1826 - Revised paragraph to be left-aligned (while still centered)

…match the comp Fixed #1856 - Adjusted modal headline size on modal to better match the comp Adjusted nbsp/word wrapping issue

- Fixed indentation - Corrected comment typos - Removed unneeded whitespace - Changed order of require statements

…eriment" This reverts commit 978d4e1, reversing changes made to 929381c.

maxxcrawford added the growth-team Growth team label Jul 23, 2020

maxxcrawford changed the title ~~Growth Experiment #5 - Join the Party Share Link~~ Growth Experiment #5 - "Join the Party" Share Link Jul 23, 2020

maxxcrawford temporarily deployed to monitor-v2 July 24, 2020 06:53 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 24, 2020 07:00 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 24, 2020 07:31 Inactive

maxxcrawford added this to In progress in Growth Experiment #5 - Join the Party Jul 24, 2020

maxxcrawford commented Jul 27, 2020

View reviewed changes

lesleyjanenorton temporarily deployed to monitor-v2 July 27, 2020 22:16 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 28, 2020 00:46 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 28, 2020 15:12 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 28, 2020 15:20 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 28, 2020 15:51 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 28, 2020 16:09 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 28, 2020 18:12 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 29, 2020 12:43 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 29, 2020 19:31 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 29, 2020 20:08 Inactive

maxxcrawford temporarily deployed to monitor-v2 July 30, 2020 13:42 Inactive

maxxcrawford force-pushed the 1789-join-the-party-experiment branch from b83272e to b3c0a22 Compare July 30, 2020 15:26

maxxcrawford temporarily deployed to monitor-v2 July 30, 2020 15:26 Inactive

maxxcrawford marked this pull request as ready for review July 30, 2020 15:29

maxxcrawford commented Jul 30, 2020

View reviewed changes

maxxcrawford added 21 commits August 17, 2020 10:52

Fixed #1799 - Added border-radius to modal input/button

29769fe

Fixed #1800 - Added logic to only display the Dashboard Share CTA whe…

775013c

…n on treatment branch

Fixed #1801 - Breach detail CTA only shows for treatmentBranch users

8a92f92

Updated UTM for Experiment

d4c56bc

Fixed #1819 - Adjusted modal styles to better match comp (Font size, …

72bf731

…padding, input height, btn color)

Fixed #1818 - Updated to logic to only show the FIRST Share CTA on Da…

8017868

…shboard

Fixed #1817 - Exposed experiment info to footer helper, rather than r…

680321c

…elying on session data

Fixed #1821 - Added route for "orange" share link

4daaa41

Fixed #1820 - Added GA Events for all the experiment interactions

bfa2e6a

Fixed #1825 - Revised mobile input/button styles to match heights con…

59ba9ee

…sistently

Fixed #1776 - Rewrote share URL redirects to append contextual UTMs t…

bf4964d

…o that users' session

Updated GA Event Action Labels, Removed Input/Focus Listener after th…

bed13d8

…e Copy button is clicked

Additional GA refinements

6549d04

Fixed white space issues and added in-line comments

92455ba

Fixed #1833 - Updated logic to not exclude users who were in the expe…

9fa6666

…riment. This will keep the share-traffic cohort sepereate from the experiment cohort.

Fixed #1835 - Revised modal color to match comp

75f15b4

Fixed #1829 - Increase size of modal headline to match comp Fixed #1839 - Revised max-width of input/btn area to match comp Fixed #1826 - Revised paragraph to be left-aligned (while still centered)

Fixed #1834 - Updated input bg color and h2 color to match comp

e798c4f

Fixed #1859 - Adjusted max-width of the content area of the modal to …

124db91

…match the comp Fixed #1856 - Adjusted modal headline size on modal to better match the comp Adjusted nbsp/word wrapping issue

Revised GA Event Labels for both Modal Actions, Avatar menu toggle

4123420

Added documentation outlining the experiment deployment process

17e84de

Code review updates:

2fd1c68

- Fixed indentation - Corrected comment typos - Removed unneeded whitespace - Changed order of require statements

maxxcrawford force-pushed the 1789-join-the-party-experiment branch from 8b80a88 to 2fd1c68 Compare August 17, 2020 15:55

maxxcrawford temporarily deployed to monitor-v2 August 17, 2020 15:58 Inactive

lesleyjanenorton approved these changes Aug 17, 2020

View reviewed changes

maxxcrawford merged commit 978d4e1 into master Aug 17, 2020

maxxcrawford moved this from In progress to Done in Growth Experiment #5 - Join the Party Aug 18, 2020

maxxcrawford added a commit that referenced this pull request Aug 26, 2020

Revert "Merge pull request #1797 from mozilla/1789-join-the-party-exp…

a20e663

…eriment" This reverts commit 978d4e1, reversing changes made to 929381c.

maxxcrawford added a commit that referenced this pull request Aug 26, 2020

Revert "Merge pull request #1797 from mozilla/1789-join-the-party-exp…

cddbf3d

…eriment" This reverts commit 978d4e1, reversing changes made to 929381c.

groovecoder deleted the 1789-join-the-party-experiment branch September 25, 2020 13:59

maxxcrawford mentioned this pull request Apr 7, 2021

Add VPN Promo Banner #2088

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Growth Experiment #5 - "Join the Party" Share Link #1797

Growth Experiment #5 - "Join the Party" Share Link #1797

maxxcrawford commented Jul 23, 2020 •

edited

Loading

maxxcrawford Jul 27, 2020

maxxcrawford Jul 30, 2020

maxxcrawford Jul 30, 2020

maxxcrawford Jul 30, 2020

groovecoder Jul 30, 2020

maxxcrawford Aug 10, 2020

maxxcrawford Jul 30, 2020

maxxcrawford Jul 30, 2020

maxxcrawford Jul 30, 2020

maxxcrawford Jul 30, 2020

maxxcrawford Jul 30, 2020

Growth Experiment #5 - "Join the Party" Share Link #1797

Growth Experiment #5 - "Join the Party" Share Link #1797

Conversation

maxxcrawford commented Jul 23, 2020 • edited Loading

Testing Steps

General / Footer

General / Avatar Menu (Must be logged in)

General / User Dashboard (Must be logged in)

Breach-specific / Breach Details Page

Expected behavior about the Modal:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maxxcrawford commented Jul 23, 2020 •

edited

Loading