Polymer - Query di Google Analytics
Google Analytics è un elemento dei componenti Web di Google utilizzato per eseguire query sull'API di reporting principale di Google Analytics.
Puoi utilizzare questo elemento nella tua applicazione, eseguendo il seguente comando per installarlo nella directory del tuo progetto.
bower install --save GoogleWebComponents/google-analyticsEsempio
L'esempio seguente specifica l'utilizzo dell'elemento google-analytics in Polymer.js. Crea un file index.html e aggiungi il seguente codice al suo interno.
<!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>Produzione
Per eseguire l'applicazione, accedere alla directory del progetto creato ed eseguire il comando seguente.
polymer serveOra apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.
