Google analytics tracks pageviews.
I would like to use JavaScript to fetch the number of views that a specific page URL has.
How can I do this?
P.S. Google documentation is a mess, all I can find out from it is how to setup tracking.
Doing this purly in javascript is going to be tricky. Due to the fact that you will need authorization to access your data.
Now normaly for a case like this I would say use a service account but in order to use a service account to connect to google analytics, you will need to download a key file. This file must be kept save and secure.
Javascript is client side scripting how can you send a file that no one else should be allowed to access? As far as I know there are no javascript examples for using a service account to access google analtyics i have also been unable to come up with a safe and secure way of doing this myself. If any one has any ideas please comment i would love to hear how you got this working.
The only other option is to go with normal autentication the problem with this is that you will need to autenticate the script. Thats not hard you could then save the RefreshToken some place and pass it to the page. Again this is a problem anyone that then looks at your source code will have the RefreshToken and the ability to access your data.
My recomendation: Use some server sided scripting language like php for example.
If you want to look at the code for doing this in javascript Hello-analytics-api
Related
I have created an opensource project that I have been working on slowly for a couple of weeks. I started looking into APIs that could be used and was interested in using WikiArt Api but was not sure how to go about using the API keys which are supposed to remain secret.
My initial thought was to create a config file and have the keys in there but then they would still be publicly available.
These two questions:
how to opensource a project that uses API keys
How to protect Google API Keys in an open source project github
suggested creating Secret ENV Variables and storing the keys in an encrypted format.
My question is how do I then access or include that hidden key within my HTML and also in my JavaScript code. It needs to be included here:
<link rel="prefetch" href="https://www.wikiart.org/en/Api/2/login?accessCode=[]&secretCode=[]"/>
and possibly a few other places in my HTML or JavaScript.
I'm not 100% sure a prefetch link was the right place to include this, but since the API will be grabbing image data, that was my first thought of where to initialize it. Is this the wrong approach?
As a secondary question, the documentation for the wikiart API isn't very good and it doesn't give any example code.
Can anyone explain a little bit better by what it means in the following
Create session when your application starts:
https://www.wikiart.org/en/Api/2/login?accessCode=[accessCode]&secretCode=[secretcode]
Add session key to your request url, e.g. &authSessionKey=sessionKey
How does it mean to create a session? I'm only familiar with php sessions, not API sessions. Is this done in the HTML or JavaScript?
This is the first time I've ever tried to use any APIs, after watching a few of Traversy Medias Tutorial so if anyone could give some code examples it would be greatly appreciated, his tutorial on fetch() API only grabs a text file, not an external url.
If you're using GitHub Pages, then that provides hosting for static sites only. In other words, a GitHub Pages site hosts only HTML and JavaScript and doesn't provide any backend (server-side) support.
As for how to securely use secrets in a static site, you cannot. Since all of the content in a static site is sent to the browser with no server-side components, there is no place you can put a secret that isn't sent to the client. In order to securely use secrets, you need some sort of backend server to hold them so that clients cannot see them.
If you need to hold secret API keys or other secrets, you need to create a non-static site and therefore to host it somewhere other than GitHub Pages.
I have an html page that has a form and is communicating to a server via JSON requests, when loading (e.g. in order to remember user's previous answers) and when submit button is pressed (e.g. in order to save his new answers). Every user has a specific user_id that is located as an attribute in the url of the website. I have only HTML pages, CSS and Javascript that makes some simple functions, as well as received and sends the requests.
The problem is that the server needs an api-key for the request to happen, that I need to be kept hidden, but instead is easily discovered when the user sees the source code. I want this specific line to be hidden, but I guess this is not possible without any backend in the game.
I would like to know the easiest and fastest way to get from this state (just frontend, where every piece of information in the source code is totally insecure) to another where the api-key (at least) is not on the open.
I guess the solution is to use a server for that part but I need suggestion on the easiest transition from my code to another. I tried to use GWT, as I am a bit more familiar with JAVA backend application (but not with GWT), but seems like a big trouble, where I need to change my HTML, my Javascript and also the CSS that I have may not be useful, as well as I face a lot of problems when trying to read my parameters.
I know that it is not the best way but I do not have a lot of time to make it work, so sorry if it seems lazy (I am new to this type of programming), but I haven't found anything helpful and I cannot study for 2 weeks in order to be able to begin implementing it.
Is node.js (which is Javascript and I already have implemented the request sending/receiving in this language) easier than GWT for that matter? Will my sensitive data be secure in that way? I would be grateful if there was a similar sample, that I could start using for my implementation, as I haven't find anything that is specifically helpful for my situation.
Thanks in advance!
NodeJs is not javascript, NodeJs is specific javascript "interpreter" whose is purpose is mainly to be executed server-side. If you have an HTML page, it is likely to be loaded in a web browser (client-side), so not in a NodeJs environnement.
Everything that is hard-coded in the javascript of you web page is visible from the client, there is no way around that. So yes, you need some server-ish thing somewhere.
If you are not to manage a server by yourself or via PaaS, you can go for a serverless architecture. For instance, If you consider AWS which I know the most, you can easilly add some user management to your web page using Aws Cognito User Pool. Once a user is connected and have the good permission, he can be granted access to some other resources via a JWT token that you send along with your request.
I am making a small payment system, basically it's just a point system, you pay say 1 USD and you get 100 points which is used later on in a game project to get bonuses. It's a script for game servers, something like a user panel.
Now, the script system is ready, but I'm afraid to give it away, since than someone will share it and it will spread all over the gaming area. What would be the solution keeping it working only if I give them a permission?
I thought about re-making whole code and make it work on my website but I don't think that people will want to put their SQL data to website that located NOT on their host. Please help me out, at least with some clues, maybe its possible to make some widgets? or maybe some license system?
I'm really lost.
You should implement the logic on the server side as an api REST call and include in the script only an ajax call to the api. You can limit the use of the api through an api key that you'll provide only to qualified sites.
You'd need to implement some sort or serverside authentication/api so that only varified users can use the script. Much like how software checks a licence.
On script load your javascript could make a ajax call to a server passing through the users IP, auth key, username etc etc.
This can then be varified on the server, maybe returning a dynamically generated url containing a javascript file which contains your business logic
(so that urls are dynamically generated for that users session only)
That way people cant hot link the script, and the script you give out is solely the ajax call
(With the business logic script injected on auth)
I have a static blog using Jekyll hosted on GitHub. I have set up Google Analytics for it and works well enough.
Now I want to show how many people viewed each post in my blog. I found Google Analytics JavaScript API to get the information. But it seems that this API uses OAuth for data access. So I think this might not be the API I needed.
Is it possible to do so with Google Analytics? I don't have any server since it's hosted on GitHub.
I finally solved this problem by Google Analytics superProxy as suggested in the comment of #EikePierstorff.
I wrote a blog on it.
Here's the main idea.
I first build a project on Google App Engile, with which I authenticate for the access of my Google Analytics. Then a URL of query (which can be pageview of certain pages) is generated in JSON format. I can set the refresh rate on this GAE project so that the JSON file can be updated from Google Analytic.
Sounds almost perfect to me. Thank you all guys for help!
You can't query the Google Analytics API without authorization by someone, that's the most important thing to remember.
It's certainly possible to display Google Analytics data on your website to users who don't have access to your account, but in order to do that, someone with access to the account needs to authorize and get an access token in order to run queries.
Normally this is done server side, and once you have a valid access token you can query the API client side (to display charts and graph, etc.). Access tokens are typically valid for 1 hour, so if you want to have your website up all the time, you'll also have to deal with refreshing the access token once it expires.
Now, since you're using Github Pages and don't have a back end, which means all the authorization will need to happen client side. While it's technically possible to do the same thing client side as server side, it's generally not a good idea because private data like your client secret, refresh token, etc. will be visible in the source code.
Applications that do auth client side typically don't authorize on behalf of a user. They require the users themselves to go through an auth flow for security reasons (as I just explained), but that would mean those users 1) have to log in, and 2) can only see the analytics data they have access to, which probably isn't what you want.
--
What you can do is run reports periodically yourself and export that data to a Google Spreadsheet. Google Spreadsheets allow you to embed charts and graphs of data as an <iframe> in external pages, so that might be an option.
At the end of the day, if you can't authorize server side you'll have to come up with some kind of workaround to make this happen.
Here are a few possibly helpful links that might point you in the right direction:
https://developers.google.com/analytics/solutions/google-analytics-spreadsheet-add-on
https://developers.google.com/analytics/devguides/reporting/embed
https://developers.google.com/analytics/solutions/report-automation-magic
I want to display the number of times a video has been viewed using the core reporting API via Javascript. However, the API is designed with OAuth, for building applications and not just logging into my account to get the event count.
Is there a way to login for just my account via Javascript?
Thanks,
Matthew.
I think what you are looking for is a Service account. To my knowledge you cant use a Service account with JavaScript due to security issues with the key file.
What you could try and do is to authenticate the script once using normal Oauth2 then save the refresh token to the file and hard code that into your script and send that. But I wouldn't recommend it as then anyone that checks your script will also be able to access it. So basically you have the same security issues you had with using a Service account.
As you can see doing what you are trying to do with JavaScript isn't really going to work. As you can see this is something I have also tried unsuccessfully in the past to do. I recommend you try and do this with some kind of server sided scripting language, like PHP.