nikjft

GA Embed API Dashboard

Mar 23rd, 2016
245
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- Step 1: Create the containing elements. -->
  2.  
  3. <section id="auth-button"></section>
  4. <section id="view-selector"></section>
  5. <section id="events-table"></section>
  6. <section id="ad-table"></section>
  7. <section id="goal-chart"></section>
  8.  
  9. <!-- Step 2: Load the library. -->
  10.  
  11. <script>
  12. (function(w,d,s,g,js,fjs){
  13.   g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  14.   js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  15.   js.src='https://apis.google.com/js/platform.js';
  16.   fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
  17. }(window,document,'script'));
  18. </script>
  19.  
  20. <script>
  21. gapi.analytics.ready(function() {
  22.  
  23.   // Step 3: Authorize the user.
  24.  
  25.   var CLIENT_ID = 'YOUR CLIENT ID HERE';
  26.  
  27.   gapi.analytics.auth.authorize({
  28.     container: 'auth-button',
  29.     clientid: CLIENT_ID,
  30.   });
  31.  
  32.   // Step 4: Create the view selector.
  33.  
  34.   var viewSelector = new gapi.analytics.ViewSelector({
  35.     container: 'view-selector'
  36.   });
  37.  
  38.   // Step 5: Create the chart.
  39.  
  40. // ga:eventCategory
  41. // ga:eventAction
  42. // ga:eventLabel
  43. //
  44. // ga:totalEvents
  45. // ga:uniqueEvents
  46. // ga:sessionsWithEvent
  47. // ga:eventValue
  48.  
  49.   var eventsTable = new gapi.analytics.googleCharts.DataChart({
  50.     reportType: 'ga',
  51.     query: {
  52.       'dimensions': 'ga:eventCategory,ga:eventAction',
  53.       'metrics': 'ga:totalEvents,ga:uniqueEvents',
  54.       'start-date': '30daysAgo',
  55.       'end-date': 'yesterday',
  56.     },
  57.     chart: {
  58.       type: 'TABLE',
  59.       container: 'events-table'
  60.     }
  61.   });
  62.  
  63.    var adTable = new gapi.analytics.googleCharts.DataChart({
  64.     reportType: 'ga',
  65.     query: {
  66.       'dimensions': 'ga:adGroup',
  67.       'metrics': 'ga:impressions',
  68.       'start-date': '30daysAgo',
  69.       'end-date': 'yesterday',
  70.     },
  71.     chart: {
  72.       type: 'TABLE',
  73.       container: 'ad-table'
  74.     }
  75.   });
  76.  
  77.    var goalChart = new gapi.analytics.googleCharts.DataChart({
  78.     reportType: 'ga',
  79.     query: {
  80.       'dimensions': 'ga:date',
  81.       'metrics': 'ga:goalCompletionsAll',
  82.       'start-date': '30daysAgo',
  83.       'end-date': 'yesterday',
  84.     },
  85.     chart: {
  86.       type: 'LINE',
  87.       container: 'goal-chart'
  88.     }
  89.   });
  90.  
  91.  
  92.   // Step 6: Hook up the components to work together.
  93.  
  94.   gapi.analytics.auth.on('success', function(response) {
  95.     viewSelector.execute();
  96.   });
  97.  
  98.   viewSelector.on('change', function(ids) {
  99.     var newIds = {
  100.       query: {
  101.         ids: ids
  102.       }
  103.     }
  104.     eventsTable.set(newIds).execute();
  105.     adTable.set(newIds).execute();
  106.     goalChart.set(newIds).execute();
  107.   });
  108. });
  109. </script>
RAW Paste Data