Polymer - Google Analytics 查询

上一个
下一个

Google Analytics 是一项 Google 网络组件，用于查询 Google Analytics Core Reporting API。

您可在自己的应用程序中使用此元素，通过运行以下命令将其安装到您的项目目录中安装。

bower install --save GoogleWebComponents/google-analytics

示例

以下示例指定了 Polymer.js 中 google-analytics 元素的使用方式。创建一个名为 index.html 的文件并在其中添加以下代码。

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

输出

若要运行应用程序，请导航到已创建的项目目录中并运行以下命令。

polymer serve

现在打开浏览器并导航到以下网址：**http://127.0.0.1:8081/**。以下将会输出。

Polymer Google Analytics
polymer_elements.htm
打印页面
上一个
下一个
广告