Closed Bug 906943 Opened 6 years ago Closed 6 years ago

Implement Translation Bar

Categories

(Websites :: Tabzilla, enhancement, P3)

enhancement

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: kohei, Assigned: kohei)

References

(Blocks 1 open bug)

Details

(Whiteboard: [kb=1086753] )

Attachments

(3 files, 1 obsolete file)

+++ 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?
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?
(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.
This is great! Is there a staging site where I can test this functionality?
Actually I'm about to code for this. I'll send a pull request once Bug 773371 and Bug 903886 are fixed :)
Assignee: nobody → kohei.yoshino.bugs
Status: NEW → ASSIGNED
Blocks: bedrock-l10n
I like this idea :)
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.
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
WIP https://github.com/kyoshino/bedrock/commit/9d80cab

We may want to have GA tracking code, of course.
Priority: -- → P3
Whiteboard: [kb=1086753]
Attached image Screenshot of transbar (obsolete) —
Added a screenshot of the transbar WIP so people can see how it looks.
Thanks, Alex. 

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

Habber - Any feedback?
Flags: needinfo?(hhabstritt.bugzilla)
(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
This is indeed a super great idea. Thanks again 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/
Attachment #807802 - Attachment is obsolete: true
What is the next steps on this feature? This could be a nice win for language mismatches.
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
(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?
Flags: needinfo?(pmac)
Flags: needinfo?(pascalc)
Demo site updated.
Flags: needinfo?(pmac)
(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?
Flags: needinfo?(pascalc)
(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.
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.
Flags: needinfo?(hhabstritt.bugzilla)
(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.
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.
Blocks: 935719
Component: Information Architecture & UX → Tabzilla
Product: www.mozilla.org → Websites
Summary: Show the translation bar at the top of the page if it's localized into visitor's language → Implement Translation Bar
(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!
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!
cmore: done.
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?
Flags: needinfo?(chrismore.bugzilla)
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.
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.
Flags: needinfo?(chrismore.bugzilla) → needinfo?(garethcull.bugs)
Kohei: If users click "no" and you set a cookie, what is the timeout/lifespan of that cookie?
(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.
Kohei: can you change the copy to be exactly what is in comment 27? It is just a change in the punctuation.
Flags: needinfo?(kohei.yoshino)
(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}]
Flags: needinfo?(kohei.yoshino)
(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'.
(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?
Flags: needinfo?(pascalc)
(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 :)
We will start the translation of the strings this week
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
Flags: needinfo?(pascalc)
(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?
(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.
(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.
Can't wait to see that!
+1
Flags: needinfo?(garethcull.bugs)
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
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.
fixed on  stage https://www.allizom.org/en-US/
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
http://www.mozilla.org/fr/ fixed on prod
Status: RESOLVED → VERIFIED
I denoted GA. Nice job everyone!!
Well done!  This is great.
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
Status: VERIFIED → REOPENED
Resolution: FIXED → ---
(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
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
Status: REOPENED → RESOLVED
Closed: 6 years ago6 years ago
Resolution: --- → FIXED
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?
Status: RESOLVED → REOPENED
Flags: needinfo?(kohei.yoshino)
Resolution: FIXED → ---
Hmm, I'll take a look.
Status: REOPENED → ASSIGNED
Flags: needinfo?(kohei.yoshino)
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?
Flags: needinfo?(garethcull.bugs)
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!
Flags: needinfo?(garethcull.bugs)
Ah, gotcha. The boolean non-interaction event is the *6th* argument. Will send a PR soon to fix it.
This should fix the GA issue.
Awesome! Thanks Kohei!
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?
Flags: needinfo?(garethcull.bugs)
(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.
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
Flags: needinfo?(garethcull.bugs)
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
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
All set!
Status: ASSIGNED → RESOLVED
Closed: 6 years ago6 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.