Currently, Google One Tap prompt is only rendered in English. Is there a way we can pass the locale to the javascript API so that the prompt gets rendered in that specific language?
window.google.accounts.id.initialize({
client_id: CLIENT_ID,
cancel_on_tap_outside: false,
callback,
});
window.google.accounts.id.prompt();
Related
I have a button, that triggers JS and return different modals depending on random logic.
In order to maintain seamless flow, I can't reload page, but I need to track what modal is opened and what button is clicked in it.
I can change URLs by utilising JS window.location to track what is shown and clicked.
window.location.hash = 'clicked1'
which will alter my URL to this www.site.com/#clicked1 or www.site.com/#clicked2
Question is, how I can track it in Google Analytics?
Can someone guid me through this jungle so I can better understand the process. Should I use event tracking instead? Or I can track URLs without reloading the page.
Here is a great article about tracking a single page application with Google Analytics.
To track dynamically loaded content as distinct pageviews you can send a pageview hit to Google Analytics and specify the Document Path by setting the page field.
ga('send', 'pageview', '/#clicked1);
it's usually best to update the tracker object with any new page information prior to sending hits. This will ensure that all hits are associated with the correct page data.
To update the tracker object, use the set method:
ga('set', 'page', '/#clicked1);
If you want to update more than just the page field, you can pass an object of key/value pairs to the set method.
ga('set', {
page: '/#clicked2',
title: 'Clicked 2'
});
Once the tracker has been updated with the proper data for the new page, you can send a hit without overriding page related parameters. For example:
ga('send', 'pageview');
If you’re using analytics.js:
ga('set', 'page', '/your-own-path');
ga('set', 'title', 'Your custom title');
ga('send', 'pageview');
If you’re using gtag.js:
gtag('config', 'UA-0000000-1', {
'page_title' : 'Your custom title',
'page_path': '/your-own-path'
});
If you’re using GTM, you can use whatever dataLayer keys you wish; here’s an example:
dataLayer.push({
event: 'pageview',
page: {
path: '/your-own-path',
title: 'Your custom title'
}
});
A great article explaining those different techniques (examples quoted directly from it) : https://www.bounteous.com/insights/2018/03/30/single-page-applications-google-analytics/
I would like to capture the id of an element that is clicked on and then pass that id to the controller, all without showing the id in either the link or the url param, and without having to write custom ajax loading. Anything like that available in rails out of the box?
What are you trying to achieve (what's the end goal)? It sounds like you want to communicate between the client and server without using ajax or encoding params in the user's url.
The usual ways of doing that, with those constraints, would be:
1) Wrap the click target in a form, and set the id to a hidden value. On click, just post the form. This will require a page refresh, but since it's a POST, won't muck up the url.
2) Set the id in a cookie, force a page refresh, read the id on the server and unset it. This will obviously also require a page refresh, but won't encode anything in the url.
3) Use an invisible iFrame to load a url with the param of interest. This won't require a refresh and the url can be anything, since the user will never see it.
If a page refresh/change is fine, the form route is probably best. If you don't want the page to refresh though, an xhr request is clearly the best solution. It's really simple to do, but an iFrame solution would be a hack that probably meets your needs too.
I am assuming you don't want to show the ID to the user but you need the element ID to hit the server.
You could use a custom request header, but that would require an AJAX approach. Here's a sketch with JQuery
$("a.sends_element_id").click(function(e){
e.preventDefault();
$.ajax({
url: $(e.target).attr("href"),
type: "GET",
beforeSend: function(xhr){xhr.setRequestHeader('X-Element-ID', $(e.target).attr("id");},
success: function(result) {
// Do something here to display the page
// Eg. http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page
}
});
I'm developing an application using jQuery mobile, that will be using HTML5 offline capabilities (cache manifest, etc).
Basic program is for on-field technicians to view/modify their orders on a tablet with no internet connection. I'm using a local browser database to store the orders.
I have an orders.html page which can view any order - but to pass a parameter to it, I can't use GET parameters, because the program is offline and I can't list every single order in the manifest.
So I have to use hash parameters - eg orders.html#o4572. But jQuery mobile doesn't play nice with this scheme - it uses hash parameters for it's own schemes. When I'm on list.html and there's a link to orders.html#o4572 - it turns the link into list.html#o4752 and stays on the same page.
I can turn off jQuery mobile's link handling by setting $.mobile.linkBindingEnabled = false; but this prevents all ajax navigation - you lose the nice transitions, and pop-up dialogs don't 'just work' anymore, you have to do them manually. And there may be other issues.
Is this the only way of getting this to work properly? I'm just starting to use jQuery mobile, so I feel like I'm missing something.
I have done something similar using the jquery-mobile-router plugin with a single page app that has a offline mode, however it should work the same for a multipage app since with a multi-page app the default behavior (ajax-enabled set to true) of JQM is that it pulls in the second page and attaches it to the DOM of the current page.
Using the JQM router you should be able to do something like this
var router;
var orderHandlerRoute = function (eventType, matchObj, ui, page, evt) {
var params = router.getParams(matchObj[1]);
//use your params to pull data from localStorage
};
router = new $.mobile.Router({
'orders.html(?:[?/](.*))?' : {handler: "orderHandler", events: 'bs'}
, {orderHandler: orderHandlerRoute }
});
You should indeed not use hash parameters for anything else than selecting pages when using jquery mobile.
The standard way to proceed is to pass your parameter with file.html?parameter=value and to retrieve the value through javascript.
You can then process this value with a js function that can for instance retrieve the data with an ajax call if you are online, or read it from local storage if you are offline.
This can be done either by binding the changepage event if you want to generate your pages dynamically based on the data associated to the parameter, or by binding the pageinit event if you want to alter the page after it has been displayed (for instance fill in form elements)
Alternatively, if the use of the cache manifest prevents you from usingthe ?parameter=value syntax, you can use the following approach:
- write your target link as file.html#pagename_itemvalue
- bind the pagechange event in order to override the default behaviour, and instead parse the target value, retrieve pagename and itemvalue, and generate/access the content you want to display. You can see an example of that on this page
I am working on a jQuery Mobile app that needs to show content based on a reference in the URL location hash, e.g.
http://theapp/page.html#key1234
Obviously, jQuery Mobile will search through the page looking for an internal page with id "key1234". It will fail and then show a blank page. What I'd like to do is capture an event when a URL with an unknown hash is entered, and then dynamically generate a matching page for it.
I'd like to do it this was so that users can have short memorable URLs.
Is this possible?
$( document ).bind( "pageloadfailed", function( event, data ){
});
I'm developing a web app. In it I have a section called categories that every time a user clicks one of the categories an update panel loads the appropriate content.
After the user clicked the category I want to change the browser's address bar url from
www.mysite.com/products
to something like
www.mysite.com/products/{selectedCat}
without refreshing the page.
Is there some kind of JavaScript API I can use to achieve this?
With HTML5 you can modify the url without reloading:
If you want to make a new post in the browser's history (i.e. back button will work)
window.history.pushState('Object', 'Title', '/new-url');
If you just want to change the url without being able to go back
window.history.replaceState('Object', 'Title', '/another-new-url');
The object can be used for ajax navigation:
window.history.pushState({ id: 35 }, 'Viewing item #35', '/item/35');
window.onpopstate = function (e) {
var id = e.state.id;
load_item(id);
};
Read more here: http://www.w3.org/TR/html5-author/history.html
A fallback sollution: https://github.com/browserstate/history.js
To add to what the guys have already said edit the window.location.hash property to match the URL you want in your onclick function.
window.location.hash = 'category-name'; // address bar would become http://example.com/#category-name
I believe directly manipulating the address bar to a completely different url without moving to that url isn't allowed for security reasons, if you are happy with it being
www.mysite.com/products/#{selectedCat}
i.e. an anchor style link within the same page then look into the various history/"back button" scripts that are now present in most javascript libraries.
The mention of update panel leads me to guess you are using asp.net, in that case the asp.net ajax history control is a good place to start
I don't think this is possible (at least changing to a totally different address), as it would be an unintuitive misuse of the address bar, and could promote phishing attacks.
This cannot be done the way you're saying it. The method suggested by somej.net is the closest you can get. It's actually very common practice in the AJAX age. Even Gmail uses this.
"window.location.hash"
as suggested by sanchothefat should be the one and only way of doing it. Because all the places that I have seen this feature, it's all the time after the # in URL.