906943 - Implement Translation Bar

Status: RESOLVED FIXED

(Websites :: Tabzilla, enhancement, P3)

Description

[Kohei Yoshino [:kohei]]

+++ This bug was initially created as a clone of Bug #773371 +++

So, Bug 903886 will expose the available locales of each page, and Bug 773371 will implement a simple language switcher.

In order to further improve user experience, I'd like to show the "translation bar" at the top of the page. You might know some similar features if you've used Google Toolbar or Chrome:

https://support.google.com/toolbar/answer/146786
https://support.google.com/chrome/answer/173424

How it works:

1. A French person, for example, visits http://www.mozilla.org/en-US/contribute/
2. The page detects the browser locale: fr
3. The page shows the translation bar, say "Would you like to see the this page in your language (French)? [Yes] [No thanks]"
4a. If Yes, the visitor is redirected to http://www.mozilla.org/fr/contribute/
4b. If No, the translation bar is hidden

Our visitors may not notice the lang switcher at the bottom of the page. This translation bar will make it much easier for them to access our localized content. Thoughts?

Comment 1

[Chris More [:cmore]]

This is pretty interesting and it solves the issue I have with people not seeing it in the footer. When a user clicks "No", will it set a cookie for future session where it won't have to be shown again?

Comment 2

[Kohei Yoshino [:kohei]]

(In reply to Chris More [:cmore] from comment #1)
> When a user clicks "No", will it set a cookie for future session
> where it won't have to be shown again?

For some visitors such bar is just unsolicited, so yes for a cookie.

Comment 3

[arky [:arky]]

This is great! Is there a staging site where I can test this functionality?

Comment 4

[Kohei Yoshino [:kohei]]

Actually I'm about to code for this. I'll send a pull request once Bug 773371 and Bug 903886 are fixed :)

Comment 5

[Pascal Chevrel:pascalc (PTO until April 26)]

I like this idea :)

Comment 6

[Jennifer Bertsch [:jbertsch]]

Thanks for pursuing this, Kohei.

I'd love to have Holly consult on the UI of the translation bar once you have something up on a dev or staging server that we could review.

Comment 7

[Kohei Yoshino [:kohei]]

I think the translation bar can be a part of Tabzilla:

1. Other Mozilla sites that have a lang switcher, like AMO or Firefox Flicks, can also benefit from it
2. Inserts a content bit dynamically in the same way
3. Easy to localize the strings as we already have tabzilla.lang

Comment 8

[Kohei Yoshino [:kohei]]

WIP https://github.com/kyoshino/bedrock/commit/9d80cab

We may want to have GA tracking code, of course.

Comment 9

[Alex Gibson [:agibson]]

Attachment: Screenshot of transbar

Added a screenshot of the transbar WIP so people can see how it looks.

Comment 10

[Jennifer Bertsch [:jbertsch]]

Thanks, Alex. 

Kohei - I like it.  Do you think we could make it any thinner?  Thanks for your work on this.

Habber - Any feedback?

Comment 11

[Kohei Yoshino [:kohei]]

Attachment: Updated screenshot of transbar

(In reply to Jennifer Bertsch [:jbertsch] from comment #10)
> Kohei - I like it.  Do you think we could make it any thinner?

I made it thinner. See the attached screenshot :)

Sent pull request: https://github.com/mozilla/bedrock/pull/1258

Comment 12

[Paul [:pmac] McLanahan]

This is indeed a super great idea. Thanks again Kohei!

Comment 13

[Kohei Yoshino [:kohei]]

Comment on attachment 807802 [details]
Screenshot of transbar

Thanks to pmac, now we can test the Translation Bar on a demo server. Give it a try: http://bedrock.dev.pmac.io/

Comment 14

[Chris More [:cmore]]

What is the next steps on this feature? This could be a nice win for language mismatches.

Comment 15

[hhabstritt]

Hi Chris. I need to look at the UI for this and provide feedback. 

Kohei, I have checked out this link [http://bedrock.dev.pmac.io/] but do not see anything here regarding translation besides the dropdown menu in the footer. 

Is this attachment the latest? https://bug906943.bugzilla.mozilla.org/attachment.cgi?id=808240

Comment 16

[Kohei Yoshino [:kohei]]

(In reply to Chris More [:cmore] from comment #14)
> What is the next steps on this feature?

Probably l10n, if the English strings are OK. :pascalc could you help?

(In reply to hhabstritt from comment #15)
> Kohei, I have checked out this link [http://bedrock.dev.pmac.io/] but do not
> see anything here regarding translation besides the dropdown menu in the
> footer. 
> 
> Is this attachment the latest?
> https://bug906943.bugzilla.mozilla.org/attachment.cgi?id=808240

Yes, the Translation Bar should appear on localized pages like http://bedrock.dev.pmac.io/fr/ but it looks like the site has not been updated with my pull request. :pmac could you update your dev site?

Comment 17

[Paul [:pmac] McLanahan]

Demo site updated.

Comment 18

[Paul [:pmac] McLanahan]

http://bedrock.dev.pmac.io/fr/

Comment 19

[Pascal Chevrel:pascalc (PTO until April 26)]

(In reply to Kohei Yoshino [:kohei] from comment #16)
> (In reply to Chris More [:cmore] from comment #14)
> > What is the next steps on this feature?
> 
> Probably l10n, if the English strings are OK. :pascalc could you help?
> 

Would the feature load a lang file depending on the detected locale code in http headers and the availability of a localized page? In that case we could add those strings to main.lang which contains most of out UI strings. Do you get the language name from product-details? I would prefer that we don't use a variable here because the language name we store are meant to be used as a single word (in download boxes and language select) not as a compound in a sentence. /example for my language, the sentence that popped up was "Would you like to see this page in Français?" and in a sentence français should not have a capital letter, other languages like Polish or Czech have nouns with a varying ending depending on their position in the sentence. I would prefer that we store the full string with a l10n comment:

/ex:
# Replace LANGUAGE_NAME by the name of your language
;Would you like to see this page in LANGUAGE_NAME?
Désirez-vous consulter cette page en français ?

Also, I see that there is a comma after Yes but not after No
Yes, please
No thanks

It may be better for consistency in English to add or remove a comma?

Comment 20

[Kohei Yoshino [:kohei]]

(In reply to Paul McLanahan [:pmac] from comment #18)
> http://bedrock.dev.pmac.io/fr/

Thanks, the transbar is working now :)

(In reply to Pascal Chevrel:pascalc from comment #19)
> Would the feature load a lang file depending on the detected locale code in
> http headers and the availability of a localized page?

The code looks at navigator.language.

> In that case we could add those strings to main.lang which contains most of
> out UI strings. 

Adding the strings to main.lang sounds reasonable.

> Do you get the language name from product-details?

Yes.

> I would prefer that we don't use a variable here because the language name
> we store are meant to be used as a single word (in download boxes and 
> language select) not as a compound in a sentence.

> I would prefer that we store the full string with a l10n comment:

> /ex:
> # Replace LANGUAGE_NAME by the name of your language
> ;Would you like to see this page in LANGUAGE_NAME?
> Désirez-vous consulter cette page en français ?

Sure, localizers can hardcode their language names in the string. For unlocalized locales, the replacement method may work temporarily. I'll add a note on it.

> Also, I see that there is a comma after Yes but not after No
> Yes, please
> No thanks
> 
> It may be better for consistency in English to add or remove a comma?

I'll remove the comma after Yes.

Comment 21

[hhabstritt]

I have a couple of questions and a suggestion about the user flow. 

1. Once the user switches to an /en-US/ URL, will all links that they click within mozilla.org continue to be /en-US/ until, for instance, they open another tab or window or switch languages in the footer?

2. What if the user wants to switch back to their language? The only way to do so is in the footer, correct? Perhaps, we have a follow up message in the translation bar (after redirect) that tells the user where to switch back to their language. "To switch languages, see the Language menu in our footer." Accompanied by [ok] link to acknowledge and hide translation bar.

Comment 22

[Kohei Yoshino [:kohei]]

(In reply to hhabstritt from comment #21)
> 1. Once the user switches to an /en-US/ URL, will all links that they click
> within mozilla.org continue to be /en-US/ until, for instance, they open
> another tab or window or switch languages in the footer?

Yes. Also, if a page is not localized yet, users will be redirected to en-US as a fallback.

Example: Click "Partenariats" on the footer of http://www.mozilla.org/fr/

> 2. What if the user wants to switch back to their language? The only way to
> do so is in the footer, correct? Perhaps, we have a follow up message in the
> translation bar (after redirect) that tells the user where to switch back to
> their language. "To switch languages, see the Language menu in our footer."
> Accompanied by [ok] link to acknowledge and hide translation bar.

This Translation Bar enables users to switch to their language, not the other way around. We can show such a post-translation message, but it may usually unnecessary as they want to see pages in their own language.

Comment 23

[Chris More [:cmore]]

My thoughts are that we should keep the translation bar at the top of the screen from going from some language to the visitor's language only. It is to help with language mismatches specifically. The language options bar at the bottom can be used to switching to any other language and we should keep the goals of those two bars unique.

Comment 24

[Chris More [:cmore]]

(In reply to Paul McLanahan [:pmac] from comment #18)
> http://bedrock.dev.pmac.io/fr/

Can we get your demo server updated with the latest code? We want to see it working. Thanks!

Comment 25

[Chris More [:cmore]]

Kohei pmac: We shouldn't merge the PR until it is up on a demo server where :habber can review and provide additional feedback. I don't want this to get merged and pushed without more eyeballs on the working code. Thanks!

Comment 26

[Paul [:pmac] McLanahan]

cmore: done.

Comment 27

[Holly Habstritt Gaal [:Habber]]

It looks and functions good to me. I just talked with Matej, Mozilla's copywriter, and this is what he recommends for the yes/no copy. 

Yes, please!  No, thanks.


After a copy update, I believe we are good to go. Do you agree, Chris?

Also, will we have tracking set up for this?

Comment 28

[Holly Habstritt Gaal [:Habber]]

I thought of one additional question. What URLs will this be limited to? Will it also show up on MDN, for instance? On MDN we also currently use the banner convention to display messages for things like inviting users to our beta design. I want to make sure we won't have problems with multiple/stacked banners if this is used elsewhere.

Comment 29

[Chris More [:cmore]]

Kohei: Can we add a GA even to fire off if people click one of the two links?

Gareth: What do you want the events to be? You can see the two links up here: http://bedrock.dev.pmac.io/fr/. I assume the values would be yes or no for the GA event.

Comment 30

[Chris More [:cmore]]

Kohei: If users click "no" and you set a cookie, what is the timeout/lifespan of that cookie?

Comment 31

[Kohei Yoshino [:kohei]]

(In reply to Holly Habstritt [:Habber] from comment #27)
> Also, will we have tracking set up for this?

Of course.

(In reply to Holly Habstritt [:Habber] from comment #28)
> What URLs will this be limited to?
> Will it also show up on MDN, for instance?

Each site using Tabzilla can opt-in to this feature by adding an additional attribute to HTML. The Translation Bar won't appear unless they do so.

(In reply to Chris More [:cmore] from comment #29)
> Kohei: Can we add a GA even to fire off if people click one of the two links?

I have set event tracking to those links. GA tracking was discussed first in Bug 773371 Comment 34 and Comment 35. The tracking in the current code looks like this:

When the bar appears:
['_trackEvent', 'Tabzilla Infobar - Transbar', 'show', {user's locale}]

When the Yes link is clicked:
['_trackEvent', 'Tabzilla Infobar - Transbar', 'change', {user's locale}]

When the No link is clicked:
['_trackEvent', 'Tabzilla Infobar - Transbar', 'hide', {user's locale}]

(In reply to Chris More [:cmore] from comment #30)
> Kohei: If users click "no" and you set a cookie, what is the
> timeout/lifespan of that cookie?

The preference is saved in sessionStorage, so it will be cleared when the user exits the browser.

Comment 32

[Chris More [:cmore]]

Kohei: can you change the copy to be exactly what is in comment 27? It is just a change in the punctuation.

Comment 33

[Kohei Yoshino [:kohei]]

(In reply to Chris More [:cmore] from comment #32)
> Kohei: can you change the copy to be exactly what is in comment 27? It is
> just a change in the punctuation.

Updated the copy: Yes, please! / No, thanks.

Modified the event tracking category name from my Comment 31:

['_trackEvent', 'Tabzilla - Translation Bar', 'change', {user's locale}]
['_trackEvent', 'Tabzilla - Translation Bar', 'change', {user's locale}]
['_trackEvent', 'Tabzilla - Translation Bar', 'hide', {user's locale}]

Comment 34

[Kohei Yoshino [:kohei]]

(In reply to Kohei Yoshino [:kohei] from comment #33)
> ['_trackEvent', 'Tabzilla - Translation Bar', 'change', {user's locale}]
> ['_trackEvent', 'Tabzilla - Translation Bar', 'change', {user's locale}]
> ['_trackEvent', 'Tabzilla - Translation Bar', 'hide', {user's locale}]

Oops, I mean 'show', 'change' and 'hide'.

Comment 35

[Paul [:pmac] McLanahan]

(In reply to Chris More [:cmore] from comment #32)
> Kohei: can you change the copy to be exactly what is in comment 27? It is
> just a change in the punctuation.

Didn't we already have some l10n work done on this?

Comment 36

[Kohei Yoshino [:kohei]]

(In reply to Paul McLanahan [:pmac] from comment #35)
> Didn't we already have some l10n work done on this?

The l10n work has not yet started. Now we are ready :)

Comment 37

[Pascal Chevrel:pascalc (PTO until April 26)]

We will start the translation of the strings this week

Comment 38

[Pascal Chevrel:pascalc (PTO until April 26)]

We are at 65% coverage of our l10n user base, let's wait a few days t o reach a higher number
http://l10n.mozilla-community.org/~pascalc/langchecker/?locale=all&website=0&file=tabzilla/tabzilla.lang

Comment 39

[Mike Alexis [:malexis]]

(In reply to Pascal Chevrel:pascalc from comment #38)
> We are at 65% coverage of our l10n user base, let's wait a few days t o
> reach a higher number
> http://l10n.mozilla-community.org/~pascalc/langchecker/
> ?locale=all&website=0&file=tabzilla/tabzilla.lang

Awesome! How are we looking now?

Comment 40

[Pascal Chevrel:pascalc (PTO until April 26)]

(In reply to Mike Alexis [:malexis] from comment #39)
> (In reply to Pascal Chevrel:pascalc from comment #38)
> > We are at 65% coverage of our l10n user base, let's wait a few days t o
> > reach a higher number
> > http://l10n.mozilla-community.org/~pascalc/langchecker/
> > ?locale=all&website=0&file=tabzilla/tabzilla.lang
> 
> Awesome! How are we looking now?

78.50%, I think it's enough to push the feature live.

Comment 41

[Chris More [:cmore]]

(In reply to Pascal Chevrel:pascalc from comment #40)
> (In reply to Mike Alexis [:malexis] from comment #39)
> > (In reply to Pascal Chevrel:pascalc from comment #38)
> > > We are at 65% coverage of our l10n user base, let's wait a few days t o
> > > reach a higher number
> > > http://l10n.mozilla-community.org/~pascalc/langchecker/
> > > ?locale=all&website=0&file=tabzilla/tabzilla.lang
> > 
> > Awesome! How are we looking now?
> 
> 78.50%, I think it's enough to push the feature live.

Very good! :) I will annotate GA when it is live.

Comment 42

[Kohei Yoshino [:kohei]]

Can't wait to see that!

Comment 43

[Gareth Cull [:garethc]]

+1

Comment 44

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/b80d456614c095a420ff4d29dd8f038446e9e7fe
Bug 906943 - Show the translation bar at the top of the page if it's localized into visitor's language

https://github.com/mozilla/bedrock/commit/bde4a00a9af6604cc2af5c9c783ff9108701bdcc
Merge pull request #1258 from kyoshino/bug-906943-transbar

Bug 906943 - Implement Translation Bar

Comment 45

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/28a6da42bcab2fdc8ebfbea31f74e83f4cd01a1a
Bug 906943: Update transbar string to avoid substitution.

Many (most) localizers prefer to include their language name
in their translation for gramatical and style reasons.

https://github.com/mozilla/bedrock/commit/9eba0bf133ff9c94197da8e3155e7b0d94011e6a
Merge pull request #1515 from pmclanahan/update-transbar-string-906943

Bug 906943: Update transbar string to avoid substitution.

Comment 46

[raymond [:retornam] (inactive)]

fixed on  stage https://www.allizom.org/en-US/

Comment 47

[raymond [:retornam] (inactive)]

http://www.mozilla.org/fr/ fixed on prod

Comment 48

[Chris More [:cmore]]

I denoted GA. Nice job everyone!!

Comment 49

[Jennifer Bertsch [:jbertsch]]

Well done!  This is great.

Comment 50

[Gareth Cull [:garethc]]

Hi Kohei,

Can we modify the 'show' event to include an additional value that sets the event as a non-interaction event? The reason for this change is that triggering the event on load and not declaring it as a non-interaction event will impact our bounce rate calculation. It will look like someone has interacted with the page when they haven't as the event is auto-triggered. Please append true to the end like so:

['_trackEvent', 'Tabzilla - Translation Bar', 'show', {user's locale},true]

Thanks.

Gareth

Comment 51

[Kohei Yoshino [:kohei]]

(In reply to Gareth Cull [:garethc] from comment #50)
> ['_trackEvent', 'Tabzilla - Translation Bar', 'show', {user's locale},true]

Sent a pull request to make this change :)
https://github.com/mozilla/bedrock/pull/1544

Comment 52

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/e0ada16efcdda90dbd0b4f195c6a7371383c14f9
Fix bug 906943, make the transbar 'show' GA event non-interaction

https://github.com/mozilla/bedrock/commit/1bbe7cddbe53752e44a04ea7ac50c5894141ff8a
Merge pull request #1544 from kyoshino/bug-906943-transbar-ga-tweak

Fix bug 906943, make the Translation Bar 'show' GA event non-interaction

Comment 53

[Chris More [:cmore]]

Kohei: We are finding a problem now with the PR in comment 52. It loos like the "show" event is being triggered not that often. The "change" event is only being triggered 3900% more often than "show" now and it stopped on Dec 1st. Regardless of the magnitude, "show" should be more than the sum of "change" and "hide" events. Can you look into the code to see why the show event is not being traffic that often and why change/hide seem to be working fine?

Comment 54

[Kohei Yoshino [:kohei]]

Hmm, I'll take a look.

Comment 55

[Kohei Yoshino [:kohei]]

Debugging on Firefox and Chrome shows proper event fires on page load, but I can see the following error in Console:

> The _trackEvent API expects a number value for argument 3.
> The argument given (true) was a boolean. 

Looks like this is the culprit. As described in the document, the optional value should be a number (integer) instead of a boolean.

https://developers.google.com/analytics/devguides/collection/analyticsjs/events#overview

Gareth: can we change the current tracking code from

> ['_trackEvent', 'Tabzilla - Translation Bar', 'show', {user's locale}, true]

to

> ['_trackEvent', 'Tabzilla - Translation Bar', 'show', {user's locale}, 1]

or something, assuming 0 = a real user interaction and 1 = auto-triggered?

Comment 56

[Gareth Cull [:garethc]]

Hey Kohei,

We can use the optional value param if we want to assign a numerical value to the event. For example, if we wanted to say that every download was worth X. Let's set this to 0 in this case. 

The optional_non-interaction event should be after that (my bad), which is a boolean value. Please set it like this.

['_trackEvent', 'Tabzilla - Translation Bar', 'show', {user's locale},0,true]

Here's a Google blog post on it:
http://analytics.blogspot.ca/2011/10/non-interaction-events-wait-what.html

GA Support: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide?csw=1

Let me know when this is up and I'll test it to make sure its coming into GA ok. Thanks!

Comment 57

[Kohei Yoshino [:kohei]]

Ah, gotcha. The boolean non-interaction event is the *6th* argument. Will send a PR soon to fix it.

Comment 58

[Kohei Yoshino [:kohei]]

Attachment: Pull request to fix GA non-interaction event parameter

This should fix the GA issue.

Comment 59

[Gareth Cull [:garethc]]

Awesome! Thanks Kohei!

Comment 60

[Alex Gibson [:agibson]]

I've put this change up on demo1 for confirmation that it is working ok in GA:

https://www-demo1.allizom.org/en-US/

Gareth, can you please test?

Comment 61

[Chris More [:cmore]]

(In reply to Alex Gibson [:agibson] from comment #60)
> I've put this change up on demo1 for confirmation that it is working ok in
> GA:
> 
> https://www-demo1.allizom.org/en-US/
> 
> Gareth, can you please test?

Thanks! Gareth, let us know if demo1 is better so we can get this shipped.

Comment 62

[Gareth Cull [:garethc]]

Looks like its working now. I tested the /pl/firefox/new and can see the 'show' en-US event coming in now. I'll have to wait to measure bounce when it goes into prod, but it should be ok.

Here's the realtime screencap of the data i saw: http://cl.ly/image/2y2l3z0H1W1y

Thanks Kohei and Alex!

Gareth

Comment 63

[Kohei Yoshino [:kohei]]

Attachment: Pull request to improve RTL layout

Comment 64

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/7dc32efae4fff738ae42e55ff4dac7d0014d2856
Bug 906943, Fix GA non-interaction event parameter on Translation Bar

https://github.com/mozilla/bedrock/commit/0fb8b354e6b0bc21b57f11b2ca696e581a6bc29c
Merge pull request #1611 from kyoshino/bug-906943-transbar-noninteraction

Bug 906943, Fix GA non-interaction event parameter on Translation Bar

Comment 65

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/b6c08fc0fb34e004852d6b548461842a4d83edbb
Bug 906943, Improve RTL layout on Translation Bar

https://github.com/mozilla/bedrock/commit/8e1f719e561e94f3cad3f4391ca9a754e85d29dd
Merge pull request #1626 from kyoshino/bug-906943-transbar-rtl

Bug 906943, Improve RTL layout on Translation Bar

Comment 66

[Kohei Yoshino [:kohei]]

All set!