Intro:
Got a website and wonder about traffic statistics on it? Feel like doing a little bit of footwork and employing Google to do the data analysis? Here's the blog for you! (No humanoid creatures were used in this blog, methinks they'll make another appearance after next week's blog).Code:
The coding section really isn't that terrible, it breaks down to 6 steps which are basically copy and paste. Step 1 creates the container elements you'll use to display the data. Step 2 loads the library Google is graciously hosting for you. Step 3 authorizes the user to actually use the info (yeah they charge for the service but the demo should be well the 50k free limit they offer). Notice there's a Client_ID in use. I got the pleasure of generating that through their dev site, it's a specific id used for my particular URL hooked to my google user account (yeah, they really want their money). Step 4 creates the view selector (fairly straight forward). Step 5 will create the timeline chart based on the data you wish to see. Step 6 runs the query based on the info in steps 2-5.
And the code:
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<!-- Step 2: Load the library. -->
<script>
(function (w, d, s, g, js, fjs) {
g = w.gapi || (w.gapi = {}); g.analytics = { q: [], ready: function (cb) { this.q.push(cb) } };
js = d.createElement(s); fjs = d.getElementsByTagName(s)[0];
js.src = 'https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js, fjs); js.onload = function () { g.load('analytics') };
}(window, document, 'script'));
</script>
<script>
gapi.analytics.ready(function () {
// Step 3: Authorize the user.
var CLIENT_ID = '201188138677-fq93f6i42il8b06pnhchhpj2tu2urjfr.apps.googleusercontent.com'; // you need to generate your own, source link #2 below shows you how
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function (response) {
viewSelector.execute();
});
viewSelector.on('change', function (ids) {
var newIds = {
query: {
ids: ids
}
}
timeline.set(newIds).execute();
});
});
</script>
This means something.
</body>
</html>
Output:
What does the last screenshot mean? It means I generated a quick and dirty website to show off Google Analytics and as the site has no prior data to pull from it obviously won't generate a darn thing. For those of you that have your own websites hosted in the wild, hook up some Google Analytics and bask in the glory of the traffic info!
Tune in next week when I do a write-up of Microsoft Analytics.
No comments:
Post a Comment