I migrated from https://apis.google.com/js/client:platform.js to https://accounts.google.com/gsi/client. I need to use a my custom google login button in order to have similar UX with other buttons.
How can I do it?
Google button works but it is rendered using google style.
window.onload = function () {
google.accounts.id.initialize({
client_id: "xxxxxxxxxxxxxxxx",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("glogin"),
{ type: "icon", size: "medium" } // customization attributes
);
//google.accounts.id.prompt(); // also display the One Tap dialog
}
My custom html button is:
<li id="glogin"><img src="assets/images/land_login/auth_google.png" alt=""></li>
Please help me. I can't found solution on google official documentation.
I faced same issue and it seems we cannot use custom button with gsi.
However, you can modify iframe render button by using given options.
It was not enough to me btw.
If you go with html api, you can generate Html code.
If you go with javascript api, you can check the options here.
I am trying this node package now. I will let you know if it works.
Related
We're using AddThis Social Share functionality with our Sitecore/MVC application. The problem we're facing is that the LinkedIn share always opens in new window. On Inspect, we can see the target=_blank in code, which is not being added in our code.
Any help?
Thanks,
Chandana
The behavior of each share button is as per the website to which the page is being shared. If you test each button (say Facebook, G+, Twitter, LinkedIn, etc.) you will notice that they all work differently. It's not AddThis choice. This is because each website has its own API and that's the way that website decided it would work with their system. LinkedIn happens to open a separate window... Pinterest first opens a popup within your page and then another window after you selected the image you wanted to share. G+ and Facebook open a new tab. And the popups/windows all look quite different, but the users should recognize each respective brand as a result...
I suspect that this is a problem with the AddThis Social Share functionality. To share on LinkedIn, all you need is the following URL format...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Then you can setup your <a href="..."> element however you like, with target="_blank" or not.
Source: Official LinkedIn Sharing Documentation.
Can try out below JavaScript code, which will overwrite addthis functionality, and make linkedIn as popup,
setInterval make sure click event attached to dynamically generated anchor tag
$(document).ready(function () {
var clickinterval = setInterval(setclickevent, 500);
function setclickevent() {
if ($('.at-svc-linkedin').length > 0) {
$('.at-svc-linkedin').on('click', function () {
window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + fixedEncodeURIComponent(window.location.href), 'popup', 'width=600,height=600');
e.preventDefault();
return false;
});
clearInterval(clickinterval);
}
}
function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
return '%' + c.charCodeAt(0).toString(16);
});
}
});
I have a banner on my sites home page, It has multiple links and the html code is written within tag and does not contains any anchor links, instead it has a href link only.
My IT heads says its not possible to embedd a onclick event tracking code to track all the links.
Please let me know how will i track this?
A pure unobtrusive javascript solution (derived from Googles example, working but not necessarily the most complete or beatiful code) :
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
links = document.getElementsByTagName('a');
for(i=0,cnt=links.length;i<cnt;i++) {
addListener(links[i], 'click', function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});
}
If you put that in an external js file or an inline script it will "decorate" all links in the page (you would need a more specific selector instead of "all links") with a click event that fire google event tracking when somebody clicks the link. No embedded click code in the link tags necessary (that's bad practice in any case).
If you are already using jQuery (since that's probably the most popular javascript library) you can simply do
$( "a" ).click(function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});
(again, choose a more specific selecor).
Both examples assume Universal Analytics, for classic you'd need to change the event tracking code (see DalmTos answer for examples).
The following examples will depend on if you are running classic VS universal analytics.
For Classic Analtyics look for ga.js in your tracking code:
Play
For Universal Analytics look for Analtyics.js in your tracking code:
Play
I don't see any reason why you wouldn't be able to track it in your banner.
Yet another question about the angular calendar directive. I need to display multiple calendars on one page and am using the jquery tabs widget. However, only one calendar will render properly. In normal jquery fullCalendar, you use the 'render' method to ensure that the calendar shows when the tab is selected. However, this doesn't seem to be working with the angular-ui calendar directive.
Here is a plunker showing what I mean. Delete the $().tabs() and the three angular calendars display just fine. Wrap them in tabs, and it no longer works:
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Any ideas on why this is not working and how to fix it?
Thanks!
PS. I will cross-post this question in Google Groups. Thanks.
It appears that despite the fullCalendar documentation, "show" is not the place to trigger a fullcalendar('render'). I should say, at least not when working with Angular. I don't know if that is correct under normal jQuery usage. Use the "Activate" event instead:
$("#tabs").tabs({
activate: function(){
("#calendar").fullCalendar('render');
}
});
http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM
Use timeout while rendering.
<tab heading="{{tabs[0].title}}" active="tabs[0].active" select="renderCalendar()" disabled="tabs[0].disabled">
$scope.renderCalendar = function() {
$timeout(function(){
$('.calendar').fullCalendar('render');
}, 0);
};
I need menu tabs that link to separate HTML files on my server, with unique URLs. I know this by itself doesn't require anything but CSS, but I would also like to retain the "instant load" effect of Javascript-enable menus, as well as loading only the relevant section of the page. (a CSS-only menu, I think, would reload the entire page). Is this possible?
It's possible with the help of Knockout.js and/or JQuery.
You could do it all with JQuery using the Tabs plugin provided by JQuery UI. You would have to write all of your own CSS so that you don't get the default "tabbed" look but something that resemble a menu.
Or, you could use Knockout.js to create a client-side view model with a set of commands that are bound to your menu items. Each command would then trigger a page update, most likely using JQuery.
Here's a very high-level example of how this might work starting with a basic menu:
<ul>
<li data-bind="menuOption1">
...
</li>
</li>
A Knockout.js view model
var MenuViewModel = function ()
{
this.menuOption1 = function () {
// TODO: show the discreet HTML page
}
}
ko.applyBindings(new MenuViewModel());
How you actually show the page is up to you. It's probably easiest to use a JQuery AJAX call to load the page contents.
How you make/style the menu does not have any effect on how the pages linked in the menu are loaded once clicked. In order to avoid a page reload upon click, you'll need to make an ajax request to that page and load it into your current page.
I suggest using jQuery's AJAX so as to avoid cross-browser issues.
Example:
$('#menu a').click(function(ev){
$.ajax({
url: "test.html",
cache: false
}).done(function( html ) {
$("#results").append(html);
});
ev.preventDefalt();
});
I am looking for some clues on where to add Google Analytics Event Tracking to a page that has AnythingSlider installed. I have a slider that does not autoscroll and you have to click the navigation buttons for the slides to move. I wish to track these clicks. I would also like to track if a visitor clicks on a link within a slide.
I am wishing to use Google's InPage Analytics to track visitor click behavior and workout what items (images & phrases) catch the attention of the visitor in order to make better lead funnels.
I did try the Event tracking guide from Google before posting here, but I was unsure of where to pickup the navigation clicks from the slider.
add this to any a href in your html
onClick="_gaq.push(['_trackEvent', 'Slider','Panelno:x', 'blah']);"
Untested (I'm about to do this myself) but the API suggests to me that I should use the onSlideComplete callback, e.g. (assuming you've set up the names of your panels in an array called pages).
onSlideComplete : function(foo) {
_gaq.push(['_trackEvent', 'Slider','Panelno:'+slider.currentPage, pages[index - 1]]);
}
EDIT: Be careful with onSlideComplete, it seems to fire off too often. Set a var to tell it not to refire, and reset the var with onSlideBegin.
onSlideBegin : function(e, slider) {
refire = 1;
},
onSlideComplete : function(slider) {
if (refire) {
_gaq.push(['_trackEvent', 'Slider','Panelno:'+slider.currentPage, pages[slider.currentPage - 1]]);
refire=0;
}
}