load google analytics embed api script asynchronously in Reactjs

Question

First of all I'd like to say that I'm fairly new to react. My goal is to build a third party custom Google analytics dashboard, however I'm facing some problems where I have trouble finding a fitting answer on google.

Im following this tutorial Embed API third party visualizations

I obviously want to write the demo code in react. While doing this I already ran into trouble at step one. While trying to run this code in react I keep getting the message "gapi is not defined". This is (after much of googling) because the script in step one is never loaded, meaning the library is never loaded which is why the rest of the code has no clue what gapi is.

I think this is because I have to load the script asynchronously..I just don't know how and where to do it. Do I do it in componentDidMount? Or is there a special way to do this?

The only google results I get uses examples of the google maps api which is different than what I try to accomplish.

Once I have this library loaded I can continue building the rest.

Thank you in advance for your help!

Answer 1

I know this is a year old, but hopefully this helps others. If you're loading the google api library outside of the react application you need to access it via the window.

Example: window.gapi.analytics.auth.authorize({ container: 'auth-button', clientid: CLIENT_ID, });