Статьи

Создание пользовательского дисплея для библиотеки Google Analytics Embed

Август 16, 2017

Я уже несколько раз писал в блоге о библиотеке Google Analytics Embed . Я действительно копаю это, поскольку это делает работу с их API Analytics чертовски простой. Это действительно открывает возможность создавать интересные гибридные приложения и пользовательские панели на ваших сайтах с помощью простого JavaScript. Недавно один читатель задал мне вопрос о том, как он может лучше контролировать данные, отображаемые в библиотеке.

Его вопрос касался форматирования экрана «TABLE», поддерживаемого библиотекой. Этот формат я еще не использовал сам, поэтому я создал небольшую демонстрацию (и поскольку читатель предоставил некоторый код, это немного облегчило его). Давайте посмотрим на код, а затем я покажу результат.

<!DOCTYPE html>
<html>
<head>
  <title>Embed API Demo</title>
</head>
<body>

<!-- Step 1: Create the containing elements. -->

<section id="auth-button"></section>

<h2>RaymondCamden.com</h2>
<section id="timeline"></section>

<!-- Step 2: Load the library. -->

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

<script>
gapi.analytics.ready(function() {

  // Step 3: Authorize the user.

  var CLIENT_ID = '818125206534-g1r0datdtu9serq2pf9cp5vkuih3h8pv.apps.googleusercontent.com';

  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
userInfoLabel:""
  });

  // Step 5: Create the timeline chart.
  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions,ga:avgSessionDuration',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
     'ids': "ga:31405"
    },
    chart: {
      type: 'TABLE',
      container: 'timeline'
    }
  });

  gapi.analytics.auth.on('success', function(response) {
  //hide the auth-button
  document.querySelector("#auth-button").style.display='none';

    timeline.execute();

  });

});
</script>
</body>
</html>

Я предполагаю, что вы немного знакомы с моими старыми постами, но если нет, то основная идея здесь заключается в том, что библиотека Embed будет обрабатывать аутентификацию и обеспечивает возможности рендеринга. Вы можете видеть вызов DataChart, который обрабатывает как запрос (какие данные нужно извлечь), так и способ его обработки (таблица). Вот результат:

Shot1

Хорошо, но что, если вы хотите больше контроля над рендерингом? В частности, пользователь хотел изменить столбец секунд на отчет, в котором вместо этого указывались минуты. К сожалению, вы не можете изменить формат таблицы. К счастью, Google позволяет легко получать данные вручную и делать все, что угодно. Давайте посмотрим на обновленную версию скрипта.

<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="moment.min.js"></script>
</head>
<body>


<div class="container">

<section id="auth-button"></section>

<h2>RaymondCamden.com</h2>
<div id="status"></div>
<table id="dataTable" class="table">
<thead><tr><th>Date</th><th>Sessions</th><th>Avg. Session Duration</th></tr></thread>
<tbody></tbody>
</table>

</div>

<script>
(function(w,d,s,g,js,fjs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
  js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>

<script>
var $tbody;
var $status;
var intl = false;

$(document).ready(function() {

if(window.Intl) intl = true;

$tbody = $("#dataTable tbody");
$status = $("#status");
$status.html("<i>Please stand by - loading data...</i>");

gapi.analytics.ready(function() {


var CLIENT_ID = '818125206534-g1r0datdtu9serq2pf9cp5vkuih3h8pv.apps.googleusercontent.com';

gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
userInfoLabel:""
});

gapi.analytics.auth.on('success', function(response) {
//hide the auth-button
document.querySelector("#auth-button").style.display='none';

gapi.client.analytics.data.ga.get({
'ids': 'ga:31405',
'metrics': 'ga:sessions,ga:avgSessionDuration',
'start-date': '30daysAgo',
'end-date': 'yesterday',
'dimensions':'ga:date'
}).execute(function(results) {
$status.html("");
renderData(results.rows);
});


});

});

});


function formatDate(str) {
var year = str.substring(0,4);
var month = str.substring(4,6);
var day = str.substring(6,8);
if(intl) {
var d = new Date(year,month-1,day); 
return new Intl.DateTimeFormat().format(d);
} 
return month + "/" + day + "/" + year;
}

function formatNumber(str) {
if(intl) return new Intl.NumberFormat().format(str);
return str;
}

function formatTime(str) {
var dur = moment.duration(parseInt(str,10), 'seconds');
var minutes = dur.minutes();
var seconds = dur.seconds();
return minutes + " minutes and " + seconds + " seconds";
}

function renderData(data) {
var s = "";
for(var i=0;i<data.length;i++) {
s += "<tr><td>" + formatDate(data[i][0]) + "</td>";
s += "<td>" + formatNumber(data[i][1]) + "</td>";
s += "<td>" + formatTime(data[i][2]) + "</td></tr>";
}
$tbody.html(s);
}
</script>
</body>
</html>

Самым большим изменением здесь является то, что теперь я запрашиваю данные, чтобы я мог делать с ними все, что захочу. Вы можете увидеть это в gapi.client.analytics.data.ga.getзвонке. Когда у меня есть данные, я могу форматировать их так, как хочу. Я решил немного пофантазировать.

Во-первых, я использовал Intl для удобного форматирования дат и чисел. Это классный веб-стандарт (см. Мою статью здесь — Работа с Intl ), который невероятно прост в использовании. Это еще не работает на iOS, но, к счастью, вы можете сделать «привязку» к CSS в iOS, что гораздо важнее, чем интернационализация.

Для обработки минутного отображения я использовал потрясающую библиотеку MomentJS . У этого есть durationAPI, который делает показ частей очень легким. Я не очень доволен тем, как я это показал — но, очевидно, вы можете изменить это в соответствии с вашими потребностями. Вот результат.

Shot2

Вот и ты. Надеюсь, это поможет. Я бы поделился онлайн-версией, но в настоящее время она привязана к моей веб-собственности, поэтому она не будет работать для вас. Чтобы было понятно, вы можете легко изменить свойство или добавить поддержку, позволяющую пользователю выбирать его свойство.

32
Share: