Polymer - Google Analytics Query

Google Analytics is an element of Google Web components used for querying the Google Analytics Core Reporting API.

You can use this element in your application, by running the following command to install it in your project directory.

bower install --save GoogleWebComponents/google-analytics

Example

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

<!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

To run the application, navigate to the created project directory and run the following command.

polymer serve

Now open the browser and navigate to http://127.0.0.1:8081/. Following will be the output.

polymer_elements.htm