HelloAnalytics.html

﻿<!DOCTYPE html>
<html>
<head>
    <title>Embed API Demo</title>
</head>
<body>

    <!-- Step 1: Create the containing elements. -->

    <section id="auth-button"></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 = '818125206534-g1r0datdtu9serq2pf9cp5vkuih3h8pv.apps.googleusercontent.com';
            var CLIENT_ID = '885448106821-69spc9p1s566it00vio9vaaat21hl4ru.apps.googleusercontent.com';
            gapi.analytics.auth.authorize({
                container: 'auth-button',
                clientid: CLIENT_ID,
                userInfoLabel: ""
            });

            // 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',
                    'ids': "ga:31405"
                },
                chart: {
                    type: 'LINE',
                    container: 'timeline'
                }
            });

            gapi.analytics.auth.on('success', function (response) {
                //hide the auth-button
                document.querySelector("#auth-button").style.display = 'none';

                timeline.execute();

            });

        });
    </script>
</body>
</html>