1

Wordpress REST API y Google Charts: reportes a la medida

2017Puntos

hace 7 años

Recientemente Alejandro González nos habló de la API REST de Wordpress que facilita el desarrollo de aplicaciones externas para trabajar con nuestros sitios. Hoy vamos a explorar cómo mostrar las estadísticas generales de nuestro sitio de Wordpress usando la API REST y Google Charts.

Para facilitar el uso de AJAX, vamos a usar la función de jQuery$.get() y el endpoint$site/stats, recuerda que necesitas acceso al sitio para poder acceder a estos datos, en el ejemplo usaremos datos de prueba.

Obtener los datos de la API es muy sencillo, si ejecutamos

 var site = "example.wordpress.com";
$.get( "https://public-api.wordpress.com/rest/v1.1/sites/" + site + "/stats")
.done( function(data) {
    console.log(data);
})
.error( function(error) {
    console.log(error);
});

Obtendremos una respuesta en JSON como esta:

{
    "date": "2015-04-17",
    "stats": {
        "visitors_today": 4756,
        "visitors_yesterday": 9143,
        "views_today": 7360,
        "views_yesterday": 15296,
        "views_best_day": "2011-10-18",
        "views_best_day_total": 109071,
        "views": 43189491,
        "comments": 119467,
        "posts": 1198,
        "followers_blog": 17838541,
        "followers_comments": 7034,
        "comments_per_month": 572,
        "comments_most_active_recent_day": "2015-01-02 23:14:21",
        "comments_most_active_time": "N/A",
        "comments_spam": 15063,
        "categories": 70,
        "tags": 1224,
        "shares": 102790,
        "shares_facebook": 25045,
        "shares_twitter": 20845,
        "shares_press-this": 11402,
        "shares_linkedin": 8266,
        "shares_pinterest": 6661,
        "shares_stumbleupon": 5848,
        "shares_reddit": 5493,
        "shares_tumblr": 5184,
        "shares_pocket": 4628,
        "shares_email": 2683,
        "shares_google-plus-1": 1280,
        "shares_print": 0
    },
    "visits": {
        "unit": "day",
        "fields": [
            "period",
            "views",
            "visitors"
        ],
        "data": [
            [
                "2014-12-08",
                11772,
                8513
            ],
            [
                "2014-12-09",
                16590,
                10737
            ]
        ]
    }
}

Aquí tenemos todo lo necesario para mostrar un reporte personalizado que nos muestre siempre las estadísticas actualizadas de nuestro blog, en nuestro ejemplo vamos a construir dos gráficas, una Column Chart para comparar los shares en redes sociales y un Line Chart para observar el número de visitas y páginas vistas.

Empecemos por armar nuestro template en HTML para definir la estructura de nuestro reporte, en el vamos a seleccionar en donde vamos a mostrar las gráficas y además importamos la API Javascript de Google y jQuery.

index.html
  <!DOCTYPE html>
  <html lang="es">
  <head>
      <meta charset="UTF-8"/>
      <title>WordPress REST API & Google Analytics</title>
  </head>
  <body>
      <section>
          <div id="columnChart"></div>
          <div id="lineChart"></div>
      </section>
      <script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
      <script src="//www.google.com/jsapi"></script>
      <script src="js/app.js"></script>
  </body>
  </html>

Empecemos por definir una función auto ejecutable, el cual se encargará de cargar las librerías que vamos a ocupar de Google Charts y ejecute un callback cuando termine de cargar las librerías necesarias.

app.js

(function(){ google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(getData); })()

Ahora vamos a definir una función a la que llamaremos getData() *que descargue las estadísticas desde la *WordPress REST API y mande a llamar a una función que llamaremos **parseData().

app.js
var siteName        = "www.example.com"; // URL of the target site
var getData = function() {
    var endpoint = "https://public-api.wordpress.com/rest/v1.1/sites/"+siteName+"/stats";
    $.get(endpoint)
    .done(function(data){
        parseData(data);
    })
    .error(function(error){
        console.log(error);
    })
};

Ahora agreguemos la función parseData(), aquí es donde se debe ser más creativo para preparar los datos de la forma adecuada para cada tipo de gráfica, existen muchas formas de definir los datos necesarios para armar un Google Visualization Data Table, personalmente considero la forma mas práctica el armar una tabla en forma de array ordenado de JSON y pasarlo directamente con la función google.visualization.arrayToDataTable().

Vamos a comparar los shares en las distintas redes sociales usando Column Charts, necesitamos una tabla en la que la primera fila sean los nombres de la red social y la segunda las cantidades correspondientes. Esta nos permite ver el impacto total del sitio y su distribución entre las distintas redes sociales.

Para visualizar los visitantes y las páginas vistas usaremos Line Chart, necesitaremos una tabla que en la primer columna tenga la fecha y en la segunda y tercera las visitas y vistas de esa fecha respectivamente. Esta línea nos permite ver el número de visitantes en contraste con el número de páginas vistas en esa fecha, entre más separadas estén ambas líneas, un mayor número de contenidos del sitio fueron vistos en cada visita, generalmente lo óptimo es que estas líneas se vayan separando más con el tiempo.

Una vez que tengamos los datos listos y en Data Table, mandamos a llamar funciones que se encargarán de dibujar las gráficas.

app.js
var parseData        = function(data) {
    // Parse JSON for Table Chart
    var columnChart_rawData = [];
    columnChart_rawData.push(["Facebook","twitter","press-this","Linkedin","Pinterest","Stumbleupon","reddit","tumblr","pocket","email","g+"]);
    columnChart_rawData.push([data.stats["shares_facebook"],data.stats["shares_twitter"],data.stats["shares_press-this"],data.stats["shares_linkedin"],data.stats["shares_pinterest"],data.stats["shares_stumbleupon"],data.stats["shares_reddit"],data.stats["shares_tumblr"],data.stats["shares_pocket"],data.stats["shares_email"],data.stats["shares_google-plus-1"]]);

    // Parse JSON for Line Chart
    var lineChart_rawData = [];
    lineChart_rawData.push(["Fecha","Vistas","Visitantes"]);
    for (var i=0; i<data.visits.data.length; i++) {
        lineChart_rawData.push([new Date(data.visits.data[i][0]),data.visits.data[i][1],data.visits.data[i][2]]);
    };

    // Create Google Visualization Data Tables
    var columnChart_dataTable = google.visualization.arrayToDataTable(columnChart_rawData);
    var lineChart_dataTable = google.visualization.arrayToDataTable(lineChart_rawData);

    // Draw Google Charts
    drawColumnChart(columnChart_dataTable);
    drawLineChart(lineChart_dataTable);
};

Para terminar, debemos definir drawColumnChart() y drawLineChart() para poder mostrar los datos, cada uno debe apuntar a un ID en nuestro HTML, aquí también podemos ajustar las opciones de cada gráfica para que se adapten mejor a nuestras necesidades, en este ejemplo se muestra una forma de que el tamaño de las gráficas sea relativo al tamaño de la pantalla.

app.js
var drawColumnChart    = function (dataTable) {
    var options    = {
        title        : "Shares por plataforma",
        width        : $(window).width() * .3,
        height        : $(window).height() * .75,
        chartArea    : {left:50,bottom:0,width:'60%',height:'90%'},
        isStacked    : true,
        bar            : {groupWidth: '100%'},
        hAxis        : {title: null}
    };
    var container = document.getElementById('columnChart');
    var chart = new google.visualization.ColumnChart(container);

    chart.draw(dataTable, options);
};
var drawLineChart    = function (dataTable) {
    var options = {
        title        : "Vistas y Visitantes",
        width        : $(window).width() * .6,
        height        : $(window).height() * .75,
        chartArea    : {left:60,bottom:0,width:'75%',height:'90%'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('lineChart'));

    chart.draw(dataTable, options);
};

Listo, con esto ya puedes armar tus reportes personalizados de sitios en WordPress. Te invito a que hagas un fork de nuestro repositorio en Github y nos muestres tus ideas de como crear un reporte más completo.

Mira un live demo del ejemplo.

Cesar
Cesar
reicek

2017Puntos

hace 7 años

Todas sus entradas
Escribe tu comentario
+ 2