I have seen those Google Translate options appear at many websites I visit, allowing to select the language and then the pages are automatically translated to that language.
[Screenshot]
Question in short:
How can I disable or choose languages from browser's in-built Google Tanslation tool?
Detailed Problem:
The Google Translate option selection dialog on mobile phones, it blocks some portion of my content from viewing to end user, . I have a web app (Next.js) project and I have some important buttons fixed at bottom of the screen. But whenever by site is visited, those button are getting covered with Google Translate leaving no clue that some content lies beneath it.
It's cool to allow selecting languages, but what if, instead of showing the Google Translate dialog box overlaying my content, I can add those language option on the navbar or somewhere in my web app itself, which can let users select the preferred language and translate my entire site accordingly?
I'm wondering if this is possible, via accessing any browser API or something? For example, my site is mainly based in India, so I need to have only 3 main languages as Marathi, Hindi and English. I can prompt users to select the language and then continue with same language on the entire website by telling the browser programmatically to select that language and translate all the pages, just like how Google Translate works but implicitly.
What I have looked for:
I have seen many questions on stackoverflow like these , which were asked almost 8 - 9 years ago, where in that period of time, there was a official tool provided by Google itself to translate sites. But, now it's discontinued because Google says:
We encourage users looking to translate webpages to use browsers that support translation natively.
But no additional information if a browser has Google Translation, we could access the translation tools via Browsers API or other methods.
you can add to your HTML code to disable that the browser translates automatically your application content:
If you want to suggest to your users different languages translation using buttons on your web app, then you can consider using google API Cloud Translation which will be triggered by a Cloud Function embedded with every button on your UI.
Related
I'm building a website where users can create new pages with dynamic URLs. I would like to add traffic analytics for each of these pages individually and allow users to view a dashboard of the data collected for the page they have created (just view, they shouldn't be able to edit the dashboard they are given). This should also be automated so that when a new user registers and creates their own page, this is tracked automatically.
If possible, this should work in Vue.js, but anything that works with vanilla JS should be fine too.
Is this possible with a tool like Google Analytics or a similar alternative? Is this expensive?
Most of the Web applications now a days are single page apps or Client side web applications. This means most of the analytics platforms like GA etc will work with your web application.
However, You will need to implement the analytics in a specific way for you to capture the required metrics. I think using Google Tag manager and creating a DataLayer will make it easier in the long run. Once the datalayer is available you can use this data with any analytics tool.
In order to track a screenview change, you can use any custom trigger available with your application that notifies of the screen view change or you can use the History change as mentioned here: Google Tag Manager and Single Page apps.
You can also use the App Rote changes as mentioned here on simple routing to populate the datalayer and use the values from the datalayer in any analytics including the GA.
Other option is using vue-analytics . There is Easy to follow documentation from the author and the branch is here
This way any new pages added etc will be tracked automatically.
Hope this helps.
Legal context
Well... What is the targeted audience? If your main targets are privacy advocates or European people covered by the General Data Protection Regulation (GDPR), it would be a terrible idea to select Google Analytics as the solution. In France, for instance, we have a National Commission on Informatics and Liberty ("CNIL" in French). It is:
an independent French administrative regulatory body whose mission is
to ensure that data privacy law is applied to the collection, storage,
and use of personal data. (Source: Wikipedia)
The CNIL tends to strongly discourage the use of Google Analytics (see Q&A on the CNIL's formal notices concerning the use of Google Analytics). Therefore, be very careful about that, especially if you are targeting an international audience.
Recommended tool
When it comes to web analytics, you have a wide range of technical solutions. For obvious reasons, I will not put the complete list here, but I can give you a tool that I know and use: Matomo.
This one is recommended by the CNIL, it is open source (see GitHub) and GDPR-compliant. You can self-host Matomo (On-Premise), which is completely free. You only pay if you use Matomo Cloud.
Matomo has a technical website dedicated to developers and exposes an API which should allow you to do what you want. Doing some research, I even found a thread on the official forum where the OP seems to have a similar problem to yours. Since it is a requirement in your question, you can also find information about user permissions.
On this page, you can read that Matomo developers use Vue for the front-end code. There is also a plugin called vue-matomo, which may be useful in your project.
Finally, to track single-page applications (SPAs), read on: Single-Page Application/Progressive Web App Tracking: Integrate - Matomo Analytics (formerly Piwik Analytics) - Developer Docs - v5
As I read from this source-
If you have a website that has dynamic content or multiple pages
and steps under one URL (or an all-flash website), you have to do a
little more work to get Google Analytics to effectively track your
pages.
Here are some more references you can check upon-
Here you can read, how Google Analytics works.
Here you can find its pricing plans which are free for small businesses.
Here you can read how Google Analytics performs for dynamic links.
Here is another answer given by #Ruslan Konygin on a similar problem.
Here is a complete guide on Tracking Dynamic Sites and Pages with Google Analytics.
I want an embedded PDF on my HTML 5 web page. I was looking at different viewers like PDFObject 2.0. This works well for viewing, but I have a requirement where the user must read the entire document (scroll or page to the end), and then I can enable a button for them to click on. This is for a legal compliance situation.
What types of code hooks are there when doing an embed of a PDF document using PDFObject 2.0 for finding out when the user has reached the end of the document (scroll to end or last page).
I believe PDFObject is like a wrapper that helps render the PDF under different browser conditions including mobile, tablets and desktop scenarios, and this request may not be possible without using PDF.js and customizing the code and then dealing with all the browser scenarios myself.
PDFObject only embeds the PDF within the HTML page, it does not provide any additional functionality. Currently, most built-in PDF rendering engines do not even provide a JavaScript API.
As far as I know, there is no way to prove someone has read (or navigated) through an entire PDF; that's why compliance web sites typically just present the user with a checkbox, something along the lines of "Check here to indicate you have read and agree with this document".
If you absolutely must find a way to ensure someone has navigated to the final page of the document -- which, let me remind you, does not imply they read anything -- you might be able to put something together with PDF.js. The PDF.js utility is a JavaScript-based PDF rendering engine. You can force the PDF to be rendered via PDF.js (PDFObject.com has examples for this); since PDF.js is JavaScript-based and open-source, you might be able to hack something together using the PDF.js API.
I want to create a website which will be optimized to be used from TV. The main thing that concerns me at the moment is that I want the user to be able to control the website with the remote control. So for example when the user press the up arrow(usually used to change the channel), I want to take this as an input and take action(for example switching image). Is there any way I can accomplish this? I think this should be done on the front-end since the server won't have such kind of access on the client. Also I don't want to use plugins such as Java Applet and Adobe Flash or Microsoft Silverlight or anything similar
I've created a chrome extension for my company using i18n with multiple languages inside the /_locales/ folder. It works great, but since the language system is based on what language is set on the user chrome browser, there're people having one problem.
The extension loads a list of URLs to help moderators answer questions on the company forum. Moderators in the US will load English interface with US URLs (with &lg=en), moderators in Russia will load Russian interface with Russian URLs (with &lg=ru) and so on. The problem is that since the company is global, there are people outside of their countries using notebooks in english, but would require the extension if self to load on German or japanese for instance.
If I create a dropdown menu on the popup window, is it possible to switch extensions language from there? Everything that I read about is always based changing chrome browser settings, and I'm sure a lot of people will have problem doing that, or even people that won't have permission to change the settings.
Hope to have some ideas to achieve that.
To my knowledge, i18n for extensions depends on Google Chrome's locale and extension's default_locale, while extension itself can't modify Chrome settings.
One workaround would be maintaining the display language by yourself, I mean, something like:
{
'en-us': {},
'en-es': {},
...
}
Or read the specific messages.json through XMLHttpRequest.
When user selects an option, you could change your display language based on above data structure, not depending on extension's existing i18n framework.
I am planning to make a responsive+mobile first web design. So here is my plan:
Making a mobile first website.
Using Javascript to load desktop or big screen HTML
However, I have a problem here. From my knowledge, the HTML content which I will load using javascript will not be readable by search engines? I have searched a lot on internet but I could not find a reasonable answer to this problem.
Can anybody tell me if it is possible to do SEO friendly conditional loading using Javascript? Or do I have to look into server side language i.e PHP/ASP to load content using device detection?
If the content is the same for the mobile and desktop sites, and you are just formatting it different for each screen, then that should just involve CSS, Media Queries, and a little JS to help with backwards compatibility. This method should not hurt your SEO.
Here is a good tutorial: http://www.html5rocks.com/en/mobile/responsivedesign/
It's the hiding of content on the initial page load (so you show it later via JS or you pull it in via AJAX) that is not good for SEO.
To have google crawl AJAX content you would need to follow the steps here: http://developers.google.com/webmasters/ajax-crawling
Here is a good blog post by Google about responsive design: http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-building-smartphone.html
Have a read about Hashbangs which allow for dynamically loading content into web pages.
I won't comment on whether you should use server side, Javascript or simply a responsive design as you've specifically mentioned Javascript.
From Google
This document describes an agreement between web servers and search engine crawlers that allows for dynamically created content to be visible to crawlers. Google currently supports this agreement. The hope is that other search engines will also adopt this proposal.