Cree gráficos con las secuencias de comandos de AdWords para obtener estadísticas rápidas

El uso de secuencias de comandos de AdWords para generar informes automáticamente le permitirá dedicar ese tiempo a realizar optimizaciones de cuenta.

google-g-analytics-ss-1920

¡Hojas de cálculo! ¡Hojas de cálculo por todas partes!

Cualquiera que intente optimizar su cuenta de AdWords, sin duda, dedica una gran cantidad de tiempo a mirar hojas de cálculo y generar gráficos de Excel para presentaciones de diapositivas. El uso de secuencias de comandos de AdWords para generar estos informes automáticamente le permitirá dedicar ese tiempo a realizar las optimizaciones en su cuenta.

La clase Gráficos en las secuencias de comandos de AdWords puede ser la menos utilizada del grupo. De hecho, simplemente investigando Recursos para desarrolladores de Google, realmente no hay ejemplos de cómo incorporar gráficos en sus informes.

Los gráficos pueden guardarse fácilmente en su cuenta de Google Drive o insertarse en sus correos electrónicos de resumen para tener una idea de en qué necesita concentrarse rápidamente.

Una introducción al objeto de gráficos

los documentación completa para el objeto de gráficos puede ser un poco abrumador al principio, por lo que el primer lugar donde probablemente desee comenzar es el Galería de gráficos de Google. Aquí puede encontrar ejemplos de algunos de los tipos de gráficos que puede crear e insertar en sus informes.

Lo primero que probablemente notará es que todos los ejemplos de la galería de gráficos se generan utilizando JavaScript del lado del cliente, no las secuencias de comandos del lado del servidor que necesitamos usar para las secuencias de comandos de AdWords. La API de scripts es muy similar a las bibliotecas del lado del cliente, pero algunos de los elementos interactivos y de movimiento no están disponibles.

Por supuesto, siempre puede escribir un script que genere un archivo .html y lo cargue en un servicio de alojamiento, pero lo dejaremos para otro tutorial. Comencemos con un gráfico de columnas simple para mostrarle un desglose de los puntajes de calidad de las palabras clave en su cuenta. Como siempre, crearemos algunas funciones reutilizables para acelerar el desarrollo en el futuro.

Generación del desglose del nivel de calidad

El enfoque de este tutorial es realmente el uso de la clase Charts, pero para crear un gráfico, necesita tener algunos datos. Aquí hay un fragmento de código rápido que consultará todos los puntajes de calidad de las palabras clave en su cuenta y devolverá un recuento de palabras clave para cada uno de los 10 puntajes posibles.

function getQualityScoreDistribution() {
  var OPTIONS = { includeZeroImpressions : false };
  var cols = ['Id','QualityScore'];
  var report="KEYWORDS_PERFORMANCE_REPORT";
  var query = ['select',cols.join(','),'from',report,
               'where AdNetworkType1 = SEARCH',
               'and CampaignStatus = ENABLED',
               'and AdGroupStatus = ENABLED',
               'and Status = ENABLED',
               'and IsNegative = false',
               'during','TODAY'].join(' ');
  var results = { 1 : 0, 2 : 0, 3 : 0, 4 : 0,  5 : 0, 
                  6 : 0, 7 : 0, 8 : 0, 9 : 0, 10 : 0};
  var reportIter = AdWordsApp.report(query, OPTIONS).rows();
  while(reportIter.hasNext()) {
    var row = reportIter.next();
    results[row.QualityScore]++;
  }
  var arrayFormat = [];
  for(var k in results) {
    arrayFormat.push([k,results[k]]);
  }
  arrayFormat.sort(function(a,b) { return a[0] < b[0]; });
  return arrayFormat;
}

Puede agregar esto a cualquier script que tenga actualmente y llamarlo para generar una distribución de puntajes de calidad de palabras clave. Ahora podemos comenzar a construir la lógica para generar el gráfico.

Construyendo el objeto de tabla de datos

Hay dos clases principales que necesitaremos combinar para crear un gráfico: Tabla de datos y el real Gráfico. El DataTable es donde usted define la información real que desea mostrar y el objeto Chart define cómo desea mostrar esos datos, como un gráfico de líneas o columnas.

Notará que la API de gráficos depende en gran medida de clases de constructores. Funciona de la misma manera que la clase AdGroup Builder en los scripts de AdWords y le permite configurar objetos complejos sin la necesidad de pasar una tonelada de parámetros al constructor.

El objeto constructor DataTable espera que defina primero los nombres de las columnas y los tipos de datos utilizando la función addColumn (). A continuación, puede agregar las filas de datos usando la función addRow (). Aquí hay una función reutilizable rápida para ayudar a construir el objeto DataTable.

function getDataTableBuider(columns,data) {
  var dataBuilder = Charts.newDataTable();
  for(var i in columns) {
    var column = columns[i];
    dataBuilder.addColumn(column.type, column.title);
  }
  for(var i in data) {
    dataBuilder.addRow(data[i]);
  }
  return dataBuilder;
}

Hay tres tipos diferentes de columnas: Fecha, Cadena y Numérica. En nuestro ejemplo, la columna de Nivel de calidad será una cadena y la cantidad de palabras clave en cada segmento será un número. A continuación, diseñemos cómo se verá nuestro gráfico.

Visualización de sus datos

Elegir cómo desea que se vean sus datos puede ser una de las partes de todo este proceso que requieren más tiempo. Lo que recomiendo es comenzar con uno de los gráficos de muestra en la galería y usar jsFiddle para cambiar la configuración hasta que tenga lo que necesita.

Para este gráfico, comencé con lo simple ejemplo de gráfico de columnas y cambié los colores y el formato hasta que tuve algo que me gustó. Recomiendo usar colores que coincidan con las plantillas de diapositivas que usaría para una presentación para agilizar aún más todo el proceso. Pasando de un lado a otro entre la documentación y jsFiddle, pude armar esto.

jsFiddle puede ejecutar JavaScript de forma dinámica

jsFiddle ejecuta Javascript dinámicamente, lo que facilita la prueba del formato

Al igual que la construcción de la tabla de datos anterior, pongamos esto en su propia función para que podamos reutilizarlo en cualquier momento que necesitemos un gráfico similar.

function getColumnChart(dataBuilder,options) {
  var colChart = Charts.newColumnChart();
  for(var option in options) {
    colChart.setOption(option, options[option]);
  }
  colChart.setDataTable(dataBuilder);
  return colChart.build();
}

Las opciones para cada gráfico se pueden encontrar en el documentación. Por supuesto, cualquier opción que se centre en animaciones o en movimiento no funcionará para nosotros ya que estamos creando una imagen estática; pero todo lo demás se puede configurar en el formato {‘config.option’: ‘valor’…}. Las comillas deberán utilizarse cuando las claves tengan un punto.

Reuniéndolo todo

Ahora es el momento de armar nuestra función main (), que es agradable y corta, ya que dividimos las partes principales del código en funciones más pequeñas y reutilizables.

function main() {
  var qsData = getQualityScoreDistribution();
  var columns = [ // Define the columns for our data
    { type : Charts.ColumnType.STRING,
     title : 'Quality Score'
    },
    { type : Charts.ColumnType.NUMBER,
     title : 'Number of Keywords'
    }
  ];
  var dataBuilder = getDataTableBuider(columns,qsData);
  // We pass in all the options that we tested in jsFiddle
  var colChart = getColumnChart(dataBuilder, {
    'title' : 'Keyword Quality Score Distribution',
    'hAxis.title' : 'Quality Score', 
    'hAxis.titleTextStyle.color' : 'black',
    'vAxis.title' : 'Number of Keywords', 
    'vAxis.titleTextStyle.color' : 'black',
    'chartArea.backgroundColor' : '#f2f2f2',
    'legend.position' : 'none',
    'colors' : ['#61aac7','#61aac7','#61aac7','#61aac7','#d55301',
                '#61aac7','#61aac7','#61aac7','#61aac7','#61aac7']
  });
  var dateStr = Utilities.formatDate(new Date(), 
                                     AdWordsApp.currentAccount().getTimeZone(), 
                                    'yyyy-MM-dd');
  MailApp.sendEmail({
     to: "your_email@domain.com",
     subject: "Daily Quality Score Distribution - "+dateStr,
     htmlBody: "<img src="https://searchengineland.com/cid:graph" alt="" />",
     inlineImages: {
       graph: colChart.getBlob().setName("graph"),
     }
   });
}

La sección final de código que realmente envía el gráfico en un correo electrónico es un ejemplo de lo que puede hacer con el gráfico una vez que lo genera. Pude modificar ligeramente el código de ejemplo del Documentación de MailApp para lograr esto.

Puede (y debe) crear una plantilla de correo electrónico HTML estándar utilizando funciones que puede reutilizar en todos sus scripts.

Conclusión

Por supuesto, este es solo un ejemplo simple para comenzar a usar los gráficos en sus informes de AdWords. Hay un montón de opciones para gráficos disponibles, aunque no todas están disponibles en la API del lado del servidor (la Informe de calibre por ejemplo). Se necesita un poco de tiempo inicial para crear los marcos para generar estos informes, pero a la larga, podrá ahorrar tiempo y dinero al generar automáticamente sus informes semanales o mensuales.

Nota del editor: Los fragmentos de código de este artículo se han actualizado para corregir los errores que aparecieron cuando se publicó por primera vez. Disculpas por cualquier inconveniente.


Las opiniones expresadas en este artículo pertenecen al autor invitado y no necesariamente a El Blog informatico. Los autores del personal se enumeran aquí.


Deja un comentario