Foundation.mozilla.org: Localize newsletter forms

[gideonthomas]

Ensure that newsletter signups are in the correct locale and country.

Task: Replicate a similar form & features from https://www.mozilla.org/fr/newsletter/mozilla/
(Critical) Select country + language in dropdown lists
(Good to have) Select default language in the list based on the page locale
As things stand, people subscribing from a localized page are being subscribed to the EN list.
Not just from the footer form, but also when checking “Yes, I want to receive email updates about Mozilla’s campaigns.” from localized petitions.

@alanmoo to add more info

[youriwims]

@TheoChevalier based on the proposed form below, am I understanding the necessary updates for this ticket correctly? Also, when we say the default language should be set according to _page locale_, do we mean as selected by the language switcher or something else?

@kristinashu, does the design below look okay for adding localization to the newsletter forms? Or would we like them implemented differently? Note: The dropdown design would be similar to the language switch/pulse home dropdown. cc: @sabrinang since this is slightly, semi-related to language switcher design, _I think_ 🤷‍♀

[TheoChevalier]

Hey @youriwims , many thanks for working on this! And allow me to provide the full picture of this work, as I realize there are multiple parts, and it’s easy to miss one. Sorry in advance if there are redundant explanations!

General context

As part of Advocacy OKR 3.2, we aim to increase the number of non-EN subscribers in H2. Currently, the website subscribes everyone to EN, and the traffic is increasing, driving more and more people away from https://www.mozilla.org/newsletter/mozilla/. This ticket is fixing exactly that

Root issue to fix

We need to always pass a locale + an optional country in here, for all newsletter sign up forms on the website (even in not localized pages): https://github.com/mozilla/foundation.mozilla.org/blob/b9adc3495585cc069ec10c6ebdf8b28f2d8da86d/source/js/basket-signup.js#L5-L10 If I understood correctly, this is the function called to process all newsletter sign up forms.

Scope

Here is how we can populate, or let the user populate those two fields, for all the ways people can subscribe:

1/ From a localized petition: https://foundation.mozilla.org/fr/campaigns/eu-misinformation-facebook/
If I check “Yes, I want to receive email updates about Mozilla’s campaigns.”, we should send the currently selected country in the petition form + the current page locale to basket (here, fr)

2/ For all the other sign up forms, we can do what you’ve done in the screenshots above (unless there are design concerns). This would concern the following:

• The newsletter form in the footer
• The newsletter form in the header
• This page https://foundation.mozilla.org/newsletter/
  (I think there aren’t any other?)

Auto-select default

Also, when we say the default language should be set according to page locale, do we mean as selected by the language switcher or something else?

We should use the language of the page the user has landed in, regardless of the way it happened (auto-detect from browser settings, clicked a link containing the locale or used the language switcher). So if someone lands on this URL https://foundation.mozilla.org/fr/, they should see this by default:

And yes, by definition, that value will match the currently selected value in the language switcher.

On this part specifically (selecting the default language), I think it would be best to do it in a follow-up PR, unless you think it’s super easy. It’s a nice improvement, but I wouldn’t delay the whole thing because of that, and would prefer to land the ability to subscribe to localized newsletters first. Do you have an opinion on this, @alanmoo ?

[youriwims]

Thanks @TheoChevalier for the additional context + information, it really helps and I appreciate it! 😄 @alanmoo can you elaborate more on the role of basket here? Because I know that it's technically imported in join.jsx(_for newsletter signups_), but we're not currently using it there or anywhere else in the codebase.

[alanmoo]

We should auto-suggest a language from the start an an effort to keep form fatigue to a minimum. It shouldn't be that hard to pull it from the context of the page.

Petitions on the Foundation site (and I believe signups) hit the back-end of the site, which then talks to Basket. This is counter to the typical approach of POSTing directly to Basket due to some historical reasons that aren't worth changing right now.

[kristinashu]

Ideally I would like to mock these up first but design won't be able to and I don't want to block you Youri so here are a few notes:

• for our header and footer signups please only show the country and language picker once a user has clicked into the email field (like at the bottom of https://www.mozilla.org/)
• for "snippet" signups like https://foundation.mozilla.org/en/newsletter/ and https://foundation.mozilla.org/en/fellowships/newsletter/ I think it's ok to always have the country and language picker showing
• for petition checkbox (as Theo said) please make the language picker appear only if a users checks the box

Re: two lines vs one

Please have each drop down on a separate line for better usability (like this example you gave):
_(but as Youri said, the dropdown design would be similar to the language switch/pulse home dropdown)_

@youriwims it might be useful if you could summary the task you need to do for this ticket (now that we have more context and to make sure we're all on the same page).

[youriwims]

Feel free to correct me, but from my understanding, the deliverables for this ticket are as follows:

Newsletter signups

• [x] Add _Country_ & _Language_ dropdown fields

  • _Functionality_

  • [x] Auto-detect the language of the page the user lands on

  • [x] Align with language switcher

  • _Design_
  • [x] Header + Footer signup localized dropdowns displays only once user clicks email field
  • [x] Snippet/Page signups always display localized dropdowns [stacked]
    
    
    
    • Dropdowns should ~be similar to Pulse/language switcher~ use the new dropdown-field classes
    
    

Localized Petition

• [x] Add _Language_ functionality

  • _Functionality_
  • [x] Send currently selected country + the current page locale to backend --> basket
  • _Design_
  • [x] Nothing additional

@TheoChevalier can you confirm if a language dropdown needs to be added to petitions? I re-read your comment and it seems like you just want me to get the page locale rather than adding to the form.

[TheoChevalier]

@TheoChevalier can you confirm if a language dropdown needs to be added to petitions? I re-read your comment and it seems like you just want me to get the page locale rather than adding to the form.

Right, I initially suggested we don’t add one indeed, because the email clicks → petition signatures conversion rate is low (around 50%), so we should avoid adding complexity to the form. But doing it as described by Kristina shouldn’t do much harm, so I’m fine with doing it this way (showing up the picker after checking the box).

[kristinashu]

Oh sorry for adding confusion! I thought the petition checkbox thing was your suggested Theo but I must have imagined it lol. @youriwims how about we start with only adding language and country to the newsletter signups and hold off on adding it to petitions.

[TheoChevalier]

Sounds good, so, for petition form only, let’s move back to the initial plan and use the current page locale as the newsletter language.

[Pomax]

Is there a list of known languages supported by the newsletter that we can restrict our "language" picker on?

[TheoChevalier]

Is there a list of known languages supported by the newsletter that we can restrict our "language" picker on?

For now, same list as the current locales supported by the website: en, de, es, fr, pl, pt-BR.
People could technically subscribe to more, but we will want to limit it to the locales we actually send emails to.

[TheoChevalier]

Hey @youriwims , what’s the remaining work that needs to happen in order to merge #3700 and close this one?

[youriwims]

This ticket is complete. Currently, just waiting on the styling dropdown PR
to be approved so these two can be landed at the same time. I'll ping Mavis
to see if we can get that approved today so I can merge them tomorrow
morning.

On Tue., Oct. 8, 2019, 5:52 p.m. Théo Chevalier, [e-mail]
wrote:

Hey @youriwims https://github.com/youriwims , what’s the remaining work
that needs to happen in order to merge #3700
https://github.com/mozilla/foundation.mozilla.org/pull/3700 and close
this one?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mozilla/foundation.mozilla.org/issues/3628?email_source=notifications&email_token=AIWLMAF5U5SVFB5QXUBRW3LQNT6I5A5CNFSM4IU6ZMX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAVXPTA#issuecomment-539719628,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIWLMAHXXDPUU2GS4PY3F7TQNT6I5ANCNFSM4IU6ZMXQ
.

[TheoChevalier]

Awesome, thanks! Since Subscribing is the main CTA for the YouTube page, having this PR live will make quite the difference

[TheoChevalier]

@youriwims Just tested on prod with the following data:

Unfortunately it resulted in this: (Screenshot from the email preferences)

[youriwims]

@Pomax, I'm wondering if this may be related to this comment related to lang support/functionality in basket. If so, can you advise what information I should include when I file a ticket in the basket repo?

[Pomax]

@theo can you help me understand what steps you took, where, and what you expected to see?

[youriwims]

@TheoChevalier ^

[TheoChevalier]

@Pomax Sure, here’s what I’ve done:

STRs:

• Open https://foundation.mozilla.org/fr/
• Click on Newsletter in the header
• Fill out an email address not already subscribed
• Select France as country
• Keep French as language (already selected)
• Hit Je m’inscris
• You’ll receive the double opt-in email in English
• Click confirm, you’ll land on something like https://www.mozilla.org/en-US/newsletter/existing/ef2019b2-aca4-493f-8aec-8285717eb04f?confirm=1

Actual: country + language preferences are set to USA/English
Expected: preferences set to France/French

[Pomax]

Note that https://github.com/mozmeao/basket/issues/344 is currently an open issue, as basket does _not_ have any language passthrough set up for us yet. It's hardcoded to specify en-US right now.

[TheoChevalier]

Note that mozmeao/basket#344 is an open issue, and basket does _not_ have any language passthrough set up for us yet. It's hardcoded to specify en-US right now.

Ok, looks like it’s a dependency of this ticket, then. What about the country field? Would this need a separate basket ticket?

[youriwims]

@TheoChevalier filed a ticket here https://github.com/mozmeao/basket/issues/346 for that as well.