Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Step 1: Create the containing elements. -->
- <section id="auth-button"></section>
- <section id="view-selector"></section>
- <section id="events-table"></section>
- <section id="ad-table"></section>
- <section id="goal-chart"></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 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 chart.
- // ga:eventCategory
- // ga:eventAction
- // ga:eventLabel
- //
- // ga:totalEvents
- // ga:uniqueEvents
- // ga:sessionsWithEvent
- // ga:eventValue
- var eventsTable = new gapi.analytics.googleCharts.DataChart({
- reportType: 'ga',
- query: {
- 'dimensions': 'ga:eventCategory,ga:eventAction',
- 'metrics': 'ga:totalEvents,ga:uniqueEvents',
- 'start-date': '30daysAgo',
- 'end-date': 'yesterday',
- },
- chart: {
- type: 'TABLE',
- container: 'events-table'
- }
- });
- var adTable = new gapi.analytics.googleCharts.DataChart({
- reportType: 'ga',
- query: {
- 'dimensions': 'ga:adGroup',
- 'metrics': 'ga:impressions',
- 'start-date': '30daysAgo',
- 'end-date': 'yesterday',
- },
- chart: {
- type: 'TABLE',
- container: 'ad-table'
- }
- });
- var goalChart = new gapi.analytics.googleCharts.DataChart({
- reportType: 'ga',
- query: {
- 'dimensions': 'ga:date',
- 'metrics': 'ga:goalCompletionsAll',
- 'start-date': '30daysAgo',
- 'end-date': 'yesterday',
- },
- chart: {
- type: 'LINE',
- container: 'goal-chart'
- }
- });
- // 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
- }
- }
- eventsTable.set(newIds).execute();
- adTable.set(newIds).execute();
- goalChart.set(newIds).execute();
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement