Created
January 28, 2016 15:44
-
-
Save stomita/93c975cc0619196ccd9d to your computer and use it in GitHub Desktop.
Google Analytics Embed APIのサンプルをVF Pageにしたサンプル
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page showHeader="false" applyBodyTag="false" applyHtmlTag="false" docType="html-5.0"> | |
| <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 = 'Your Client ID is HERE'; | |
| 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> | |
| </body> | |
| </html> | |
| </apex:page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment