Closed
Bug 906943
Opened 11 years ago
Closed 11 years ago
Implement Translation Bar
Categories
(Websites :: Tabzilla, enhancement, P3)
Websites
Tabzilla
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?
Comment 1•11 years ago
|
||
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?
Assignee | ||
Comment 2•11 years ago
|
||
(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•11 years ago
|
||
This is great! Is there a staging site where I can test this functionality?
Assignee | ||
Comment 4•11 years ago
|
||
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
Assignee | ||
Updated•11 years ago
|
Blocks: bedrock-l10n
Comment 5•11 years ago
|
||
I like this idea :)
Comment 6•11 years ago
|
||
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.
Assignee | ||
Comment 7•11 years ago
|
||
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
Assignee | ||
Comment 8•11 years ago
|
||
WIP https://github.com/kyoshino/bedrock/commit/9d80cab
We may want to have GA tracking code, of course.
Updated•11 years ago
|
Priority: -- → P3
Whiteboard: [kb=1086753]
Comment 9•11 years ago
|
||
Added a screenshot of the transbar WIP so people can see how it looks.
Comment 10•11 years ago
|
||
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)
Assignee | ||
Comment 11•11 years ago
|
||
(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•11 years ago
|
||
This is indeed a super great idea. Thanks again Kohei!
Assignee | ||
Comment 13•11 years ago
|
||
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
Comment 14•11 years ago
|
||
What is the next steps on this feature? This could be a nice win for language mismatches.
Comment 15•11 years ago
|
||
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
Assignee | ||
Comment 16•11 years ago
|
||
(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)
Comment 18•11 years ago
|
||
Comment 19•11 years ago
|
||
(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)
Assignee | ||
Comment 20•11 years ago
|
||
(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•11 years ago
|
||
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)
Assignee | ||
Comment 22•11 years ago
|
||
(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•11 years ago
|
||
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.
Assignee | ||
Updated•11 years ago
|
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
Comment 24•11 years ago
|
||
(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•11 years ago
|
||
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•11 years ago
|
||
cmore: done.
Comment 27•11 years ago
|
||
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)
Comment 28•11 years ago
|
||
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•11 years ago
|
||
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)
Comment 30•11 years ago
|
||
Kohei: If users click "no" and you set a cookie, what is the timeout/lifespan of that cookie?
Assignee | ||
Comment 31•11 years ago
|
||
(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•11 years ago
|
||
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)
Assignee | ||
Comment 33•11 years ago
|
||
(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)
Assignee | ||
Comment 34•11 years ago
|
||
(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•11 years ago
|
||
(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)
Assignee | ||
Comment 36•11 years ago
|
||
(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•11 years ago
|
||
We will start the translation of the strings this week
Comment 38•11 years ago
|
||
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
Updated•11 years ago
|
Flags: needinfo?(pascalc)
Comment 39•11 years ago
|
||
(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•11 years ago
|
||
(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•11 years ago
|
||
(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.
Assignee | ||
Comment 42•11 years ago
|
||
Can't wait to see that!
Comment 44•11 years ago
|
||
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•11 years ago
|
||
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•11 years ago
|
||
fixed on stage https://www.allizom.org/en-US/
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Comment 48•11 years ago
|
||
I denoted GA. Nice job everyone!!
Comment 49•11 years ago
|
||
Well done! This is great.
Comment 50•11 years ago
|
||
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 → ---
Assignee | ||
Comment 51•11 years ago
|
||
(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•11 years ago
|
||
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
Updated•11 years ago
|
Status: REOPENED → RESOLVED
Closed: 11 years ago → 11 years ago
Resolution: --- → FIXED
Comment 53•11 years ago
|
||
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 → ---
Assignee | ||
Comment 54•11 years ago
|
||
Hmm, I'll take a look.
Status: REOPENED → ASSIGNED
Flags: needinfo?(kohei.yoshino)
Assignee | ||
Comment 55•11 years ago
|
||
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)
Comment 56•11 years ago
|
||
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)
Assignee | ||
Comment 57•11 years ago
|
||
Ah, gotcha. The boolean non-interaction event is the *6th* argument. Will send a PR soon to fix it.
Assignee | ||
Comment 58•11 years ago
|
||
This should fix the GA issue.
Comment 59•11 years ago
|
||
Awesome! Thanks Kohei!
Comment 60•11 years ago
|
||
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)
Comment 61•11 years ago
|
||
(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•11 years ago
|
||
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)
Assignee | ||
Comment 63•11 years ago
|
||
Comment 64•11 years ago
|
||
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•11 years ago
|
||
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
Assignee | ||
Comment 66•11 years ago
|
||
All set!
Status: ASSIGNED → RESOLVED
Closed: 11 years ago → 11 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•