Polymer-Google Analyticsクエリ

Google Analyticsは、Google Analytics Core Reporting APIのクエリに使用されるGoogle Webコンポーネントの要素です。

次のコマンドを実行してプロジェクトディレクトリにインストールすることにより、アプリケーションでこの要素を使用できます。

bower install --save GoogleWebComponents/google-analytics

例

次の例では、Polymer.jsでgoogle-analytics要素の使用を指定しています。 indexlファイルを作成し、その中に次のコードを追加します。

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

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

出力

アプリケーションを実行するには、作成されたプロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

ポリマーGoogleアナリティクス

Polymer-google-analytics-query

Polymer-Google Analyticsクエリ

例

出力