Polymer Google Analytics Query

Google Analytics is an element of Google Web components which is used to query the Google Analytics Core Reporting API.

Run the following command to install google-analytics element in your project directory. After that you can use this element in your application:

Example

Create an index.html file and add the following code in it to see the usage of google-analytics element in Polymer.js.

<!doctype html>
<html>
<head>
<title>Polymer Example</title>
<script src = "bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel = "import" href = "bower_components/polymer/polymer.html">
<link rel = "import" href = "bower_components/paper-styles/demo-pages.html">
<link rel = "import" href = "bower_components/google-signin/google-signin.html">
<link rel = "import" href = "bower_components/google-analytics/google-analytics.html">

<style>
google-analytics-dashboard {
display: block;
padding: 2em;
transition: opacity .2s ease;
         }
google-analytics-dashboard:not([authorized]) {
opacity: .3;
pointer-events: none;
         }
google-analytics-chart {
box-shadow: 0 0 .5em rgba(0,0,0,.1);
background: #fff;
float: left;
margin: 0 2em 2em 0;
padding: 2em 2em 1em;
transition: opacity .2s ease;
max-width: 100%;
         }
google-analytics-view-selector, google-analytics-date-selector {
box-shadow: 0 0 .5em rgba(0,0,0,.1);
background: #fff;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
flex-direction: column;
margin: 0 0 2em 0;
max-width: 600px;
padding: 2em .5em 1em 2em;
         }
google-analytics-date-selector {
max-width: 500px;
         }
google-analytics-view-selector {
max-width: 750px;
         }
:root {
            --google-analytics-control: {
display: block;
               -webkit-flex: 1 1 0%;
               -ms-flex: 1 1 0%;
flex: 1 1 0%;
margin: 0 1.5em 1em 0;
min-width: 0;
            };
            --google-analytics-label: {
display: block;
font-weight: bold;
padding: 0 0 .4em 2px;
            };
            --google-analytics-field: {
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
height: 34px;
line-height: 20px;
padding: 6px 12px;
transition: border-color .2s;
width: 100%;
            };
            --google-analytics-field-focus: {
border-color: #4d90fe;
outline: 0;
            };
         }
google-analytics-view-selector {
            --google-analytics-view-selector-control:
var(--google-analytics-control);

            --google-analytics-view-selector-label:
var(--google-analytics-label);

            --google-analytics-view-selector-select:
var(--google-analytics-field);

            --google-analytics-view-selector-select-focus:
var(--google-analytics-field-focus);
         }
google-analytics-date-selector {
            --google-analytics-date-selector-control:
var(--google-analytics-control);

            --google-analytics-date-selector-label:
var(--google-analytics-label);

            --google-analytics-date-selector-input:
var(--google-analytics-field);

            --google-analytics-date-selector-input-focus:
var(--google-analytics-field-focus);
         }
</style>
</head>

<body>
<h2>Google Analytics Example</h2>
<google-signin></google-signin>

<google-analytics-dashboard>
<google-analytics-view-selector></google-analytics-view-selector>
<google-analytics-date-selector></google-analytics-date-selector>

<google-analytics-chart
type = "pie"
metrics = "ga:pageviews"
dimensions = "ga:browser"
sort = "-ga:pageviews"
max-results = "5">
<h3>Pageviews by Browser</h3>
</google-analytics-chart>
</google-analytics-dashboard>
</body>
</html>

Output: