CODEWITHSUNDEEP
javascriptgoogle-analyticsgoogle-visualizationgoogle-analytics-api
balintpekker
balintpekker

Reputation: 1844

Changing The "Access Google Analytics" Button Text

I have an admin page in my site where I implemented Google Analytics Embed. Everything works fine, but I want to translate the login button text:

enter image description here

This button is called by gapi.analytics.auth.authorize()

My function looks like this atm:

gapi.analytics.auth.authorize({
    userInfoLabel: 'Logged in as: ',
    container: 'embed-api-auth-container',
    clientid: 'CLIENTID'
  });

I have checked the Developers Guide where I've found userInfoLabel: which is replacing the text "You are logged in as:", but I haven't found anything about how to replace the text on the login button.

I was working with Chart.js and Third party visualizations Demo.

My page looks like this if logged in:

enter image description here

And looks like this if not logged in:

enter image description here

Questions are:

  1. How can I replace the "Access Google Analytics" text?
  2. How can I set the value of the container to display:none; when the user is not logged in. (container id: 'container')

EDIT:

I tried to check for gapi.analytics.auth.isAuthorized() for the part where I want to check if a user is logged-in or not, but it always gives false.

Upvotes: 1

Views: 561

Answers (2)

WhiteHat
WhiteHat

Reputation: 61230

1) haven't found an option that allows the button text to be changed

regardless, changing with css or even javascript should be fine

so long as it gives the desired result

2) rather than hiding the container when the user is not logged in...

--> hide the container by default

then un-hide when the user logs in, using the signIn event

e.g. 

<style>
  .hidden {
    display: none;
    visibility: hidden;
  }
</style>

<div class="hidden" id="container"></div>

<script>
  gapi.analytics.auth.authorize({
    userInfoLabel: 'Logged in as: ',
    container: 'embed-api-auth-container',
    clientid: 'CLIENTID'
  });

  gapi.analytics.auth.on('signIn', function() {
    // un-hide container
    document.getElementById('container').className = '';
  });
</script>

Upvotes: 1

balintpekker
balintpekker

Reputation: 1844

Actually I've found an another way to replace the text on that button, but I won't accept my answer, hopefully someone could find the real answer to the question.

What I did is actually a hack that I use in some situations (like when you have a third party library that is not Open Source as DalmTo said).

I have found, that the button is in a <span> element with a class defined:

<span class="gapi-analytics-auth-styles-signinbutton-buttonText">Access Google Analytics</span>

So I decided to use CSS to replace the text:

span.gapi-analytics-auth-styles-signinbutton-buttonText {
    visibility: hidden;
}
span.gapi-analytics-auth-styles-signinbutton-buttonText:after {
    content: 'Bejelentkezés a Google Analyticsbe';
    display: block;
    visibility: visible;
    padding: 5px;
    margin-top: -18px;
    margin-left: -13px;
}

And now, ta'da:

enter image description here

Upvotes: 1

Related Questions