Guía del Comercio Avanzado de Analytics

Muchas veces la gente no sabe configurar correctamente el comercio electrónico avanzado de Google Analytics, resulta complicado pero es un elemento en analítica que aporta bastantes datos interesantes para definir estrategias.

Es importante primero aplicar pruebas en local, con pequeños proyectos o archivos en html que creemos nosotros, observando los datos que estamos enviando a la herramienta para comprender bien el funcionamiento de cada paso.

Si no sabes código y cuentas con un cms tipo WordPress o Prestashop, estás de suerte, al final de la guía te explico un par de herramientas que instalándolas y siguiendo unos pasos de configuración en Google Tag Manager, podrás implementarlo en tu sitio web. Por otro lado, si tu plataforma está realizada a medida y no sabes programar, necesitaras a un desarrollador que te ayude con ello.

¿Qué es el comercio avanzado de Google Analytics?

El comercio avanzado es un sistema de analítica avanzada de Google Analytics, orientada a comercios electrónicos, ofreciendo numerosos datos de interés para analizar. Algunos de estos datos son:

• Impresiones de productos
• Impresiones de productos en diferentes listas
• Las posiciones en las que se muestran los productos
• Clics en los productos
• CTR de los products
• Cuantas veces se agregaron los productos al carrito
• Compra de los productos
• Categorías de los productos
• Variantes de los productos
• Embudo del checkout
• Devoluciones
• Etc.

Todos estos datos, permiten realizar ajustes en la tienda, e incluso, si se cuenta con presupuesto o un buen equipo de desarrollo, podrían exportarse estos datos desde la API de Google, para crear un sistema adaptado de sugerencia de productos y listados, con algoritmos propios.

Por suerte, algunos cms ya cuentan con esta funcionalidad que posiblemente, sea demasiado básica y se pueda mejorar, y que trabajar en el algoritmo para un motor de búsqueda suele ser bastante difícil a la hora de analizar y decidir como va a influir cada factor.

Tipos de implementación

El comercio electrónico avanzado de Google Analytics, puede impementarse de dos formas, mediante código o mediante Google Tag Manager, que viene siendo similar al primero, ya que también necesita código.

También existen diversos plugins para WordPress o módulos para Prestashop, donde te facilitan bastante el proceso y solo tienes que realizar una configuración mínima.

Veamos entonces los procedimientos de instalación manual, aunque recomiendo hacerlo con Google Tag Manager.

Manual con Analytics

Esta es la forma más difícil. Toda la información se puede encontrar aquí de todas formas.

Impresiones

Con el siguiente código, podremos medir las impresiones de los productos.

ga('create','UA-XXXXX-Y');    ga('require','ec');    ga('ec:addImpression',{  'id':'P12345',  'name':'Android Warhol T-Shirt',  'category':'Apparel/T-Shirts',  'brand':'Google',  'variant':'black',  'list':'Search Results',  'position':1                     });    ga('ec:addImpression',{  'id':'P67890',  'name':'YouTube Organic T-Shirt',  'category':'Apparel/T-Shirts',  'brand':'YouTube',  'variant':'gray',  'list':'Search Results',  'position':2  });    ga('send','pageview');

Es importante que por cada producto agreguemos un bloque de ec:addImpression. además de que el código del comercio avanzado debe estar entre el require y el send:

ga('create','UA-XXXXX-Y');  ga('require','ec');  // Aquí insertaremos nuestro código del comercio electrónico de las impresiones  ga('send','pageview');

De este código, los únicos campos obligatorios son el id y el name, pero cuanto más datos aportemos más podremos analizar.

Clics

Para medir los clics, deberemos realizar una llamada a un función e incluir un evento onclick en el enlace donde le pasaremos los parámetros necesarios (en caso de que necesitemos pasarle parámetros).

Ejemplo de enlace:

<a href="/next-page.html">Android Warhol T-Shirt</a>

Ejemplo de la función:

function onProductClick(){  ga('ec:addProduct',{  'id':'P12345',  'name':'Android Warhol T-Shirt',  'category':'Apparel',  'brand':'Google',  'variant':'black',  'position':1  });  ga('ec:setAction','click',{list:'Search Results'});  ga('send','event','UX','click','Results',{  hitCallback:function(){  document.location ='/product_details?id=P12345';  }  });}

La misma función se encargará de redirigir al usuario a la página que toca.

El código de la función podemos insertarlo perfectamente en el footer sin problemas, dentro de una etiqueta .

Vista de detalles del producto

Cuando un usuario llegue a una página de detalle del producto, debemos ejecutar el siguiente código en el mismo lugar donde introducíamos las impresiones, pero solo en las páginas de producto:

ga('create','UA-XXXXX-Y');  ga('require','ec');  ga('ec:addProduct',{  'id':'P12345',  'name':'Android Warhol T-Shirt',  'category':'Apparel',  'brand':'Google',  'variant':'black'  });  ga('ec:setAction','detail');  ga('send','pageview');

Añadir o retirar productos del carrito de compra

Si queremos medir si un usuario agrega un producto al carrito, deberemos realizar una llamada a la siguiente función cada vez que realice el usuario la acción:

function addToCart(product){  ga('ec:addProduct',{  'id': product.id,  'name': product.name,  'category': product.category,  'brand': product.brand,  'variant': product.variant,  'price': product.price,  'quantity': product.qty  });  ga('ec:setAction','add');  ga('send','event','UX','click','add to cart');}

Para eliminar productos el código es el mismo, solo hay que modificar el add por remove en la línea ga(‘ec:setAction’,’add’).
Para medir las promociones el proceso es bastante similar al de las impresiones y clics de productos, pero la información que mandamos es ligeramente diferente.

Para las impresiones usaremos el siguiente código que deberemos introducir en las páginas donde se encuentren, dentro de las etiquetas de require y send del script Google Analytics:

ga('ec:addPromo',{  'id':'PROMO_1234',             // ID de la promoción. Obligatorio  'name':'Summer Sale',          // Nombre de la promoción  'creative':'summer_banner2',   // Creatividad  'position':'banner_slot1'      // Posición});

Para hacer seguimiento de los clics de las impresiones usaremos otra llamada a la función:

function onPromoClick(){  ga('ec:addPromo',{  'id':'PROMO_1234',  'name':'Summer Sale',  'creative':'summer_banner2',  'position':'banner_slot1'  });  ga('ec:setAction','promo_click');  ga('send','event','Internal Promotions','click','Summer Sale');}

Proceso de compra

El proceso de compra suele ser una parte un poco más delicada, ya que tenemos que ir agregando pasos e indicar el nombre de los pasos.

ga('create','UA-XXXXX-Y');  ga('require','ec');    function checkout(cart){  for(var i =0; i < cart.length; i++){  var product = cart[i];  ga('ec:addProduct',{  'id': product.id,  'name': product.name,  'category': product.category,  'brand': product.brand,  'variant':  product.variant,  'price': product.price,  'quantity': product.qty  });  }}  ga('ec:setAction','checkout',{  'step':1,            // Este valor indica el paso en el que nos encontramos del checkout  'option':'Visa'      // Este valor aporta información extra del nombre del paso que luego veremos en analytics});  ga('send','pageview');

Este código deberemos repetirlo en cada paso del proceso de compra e ir incrementando en 1 el valor de step.

En el campo option, podemos insertar diferentes valores para un mismo paso que luego podremos ver en Analytics. Nos puede ayudar a detectar diferentes métodos de pago o diferentes métodos de envío.

Medir las compras

Finalmente para medir la transacción final, en la página de gracias deberemos agregar el siguiente código en nuestro código de Analytics:

ga('create','UA-XXXXX-Y');  ga('require','ec');  ga('ec:addProduct',{  'id':'P12345',  'name':'Android Warhol T-Shirt',  'category':'Apparel',  'brand':'Google',  'variant':'black',  'price':'29.20',  'quantity':1    // Esto es importante ponerlo o tendremos problemas con el valor del producto});  // Transaction level information is provided via an actionFieldObject.  ga('ec:setAction','purchase',{  'id':'T12345',    // ID de la transacción  'affiliation':'Google Store - Online',    // Solo si viene de un afiliado en caso de tener programa de afiliación  'revenue':'37.39',    //Coste total  'tax':'2.85',    // Tasas  'shipping':'5.34',    // Gastos de envío  'coupon':'SUMMER2013'    // Solo si el usuario agregó un cupón});  ga('send','pageview');

Medir los reembolsos

Para realizar devoluciones, podemos hacerlas a nivel de ID de transacción o a nivel de productos de una transacción.

Para realizar la devolución total de la transacción y medirla en Analytics debemos ejecutar el siguiente código:

ga('ec:setAction','refund',{  'id':'T12345'    // ID de la transacción});

Si solo necesitamos realizar devoluciones de productos concretos debemos ejecutar el siguiente código especificando la cantidad y los productos:

ga('ec:addProduct',{  'id':'P12345',       // ID del producto  'quantity':1         // Cantidad de productos devueltos  });  ga('ec:setAction','refund',{  'id':'T12345',       // ID de la transacción  });

Tag Manager

La implementación manual de Tag Manager no difiere mucho de la de  Analytics, podemos encontrar la información y la configuración de Tag Manager aquí.

Además, si utilizamos algún cms podemos tirar de algunos plugins que nos facilitarán su integración.

Implementación en WordPress

Para WordPress además de varios plugins como el oficial de WooCommerce que envía la información a Analytics, también tenemos el plugin de Google Tag Manager for WordPress que es con el que suelo trabajar ya que por defecto viene con bastantes integraciones y requiere una configuración mínima en pocos clics y es el que voy a explicar a continuación.

Para activar el comercio avanzado, tan solo debemos acceder al apartado del plugin en Integration -> WooCommerce y activar la opción de Track enhanced e-commerce.

después debemos seguir unos pasos para la configuración de Tag Manager que te resumo:

1. Crea una Variable de Configuración de Google Analytics, dale el valor del identificador de tu Propiedad de Analytics y activa las opciones de Habilitar funciones de comercio electrónico mejorado y Usar capa de datos.
2. Crea una etiqueta de Universal Analytics del tipo Página Vista agregando la variable creada y ejecutando la etiqueta en todas las páginas.
3. Crea un Activador de Evento personalizado con el valor:
   gtm4wp.addProductToCartEEC|gtm4wp.productClickEEC|
   gtm4wp.removeFromCartEEC|gtm4wp.checkoutOptionEEC|
   gtm4wp.changeDetailViewEEC
   y activando la opción de expresiones regulares del checkbox. Le daremos el nombre de “Event – Ecommerce Events”.
4. Creamos una nueva etiqueta de Universal Analytics del tipo Evento y asignamos a la categoría Ecommerce helper y a la acción {{Event}} y en la Configuración de Google Analytics agregaremos nuestra variable de Configuración creada en el paso 1. De activador le asignaremos “Event – Ecommerce Events”.
5. Crea un Activador de Evento personalizado con el valor “gtm4wp.productImpressionEEC” y el nombre de “Event – Ecommerce Product Impressions”.
6. Creamos una nueva etiqueta de Universal Analytics del tipo Evento y asignamos a la categoría Ecommerce helper y a la acción {{Event}} y en la Configuración de Google Analytics agregaremos nuestra variable de Configuración creada en el paso 1. De activador le asignaremos “Event – Ecommerce Product Impressions”.

Tras crear todo esto solo nos quedará publicar los cambios y testear que todo está funcionando correctamente.

Implementación en Prestashop

El módulo de Google Tag Manager Enhanced Ecommerce (UA) – PRO Module es bastante fácil de configurar. Al comprar el plugin tenemos acceso al manual donde explica las etiquetas que debemos crear y los campos a rellenar del plugin.

Viene directamente con un template por lo que solo tendrás que descargarlo, subirlo y configurar algunas variables y campos. También incluye tracking de conversiones para adwords lo que nos facilitará mucho el trabajo.

Implementación avanzada (only developers)

La información que debe enviarse es similar a la de Google Analytics. Vamos a ver las etiquetas necesarias que debemos crear y los códigos a crear dentro de la web.

Primero crearemos una variable de Google Analytics con Las funciones de comercio electrónico mejorado activa y la opción de Usar la capa de datos activa también. Esta variable la usaremos en todas nuestras etiquetas de Universal Analytics que usemos a continuación.

La siguiente etiqueta es la que necesitaremos trackear para realizar un seguimiento de páginas vistas en analytics, impresiones de listas de productos, finalizar la compra, vistas de productos, impresión de promociones y devoluciones:

• Etiqueta: Universal Analytics
• Seguimiento: página vista
• Activador: creamos un Evento personalizado que el nombre sea gtm.dom

Impresiones de producto

Con este código mediremos las impresiones de producto:

dataLayer.push({    'ecommerce':{      'currencyCode':'EUR',                       // Local currency is optional.      'impressions':[       {         'name':'Triblend Android T-Shirt',       // Name or ID is required.         'id':'12345',         'price':'15.25',         'brand':'Google',         'category':'Apparel',         'variant':'Gray',         'list':'Search Results',         'position':1       },       {         'name':'Donut Friday Scented T-Shirt',         'id':'67890',         'price':'33.75',         'brand':'Google',         'category':'Apparel',         'variant':'Black',         'list':'Search Results',         'position':2       }]    }});  

Clics de producto

Deberemos crear la siguiente etiqueta en Tag Manager para recoger los datos del código que ejecutaremos en la web mediante un dataLayer.push:

• Etiqueta: Universal Analytics
• Seguimiento: evento
• Categoría del evento: Ecommerce
• Acción del evento: Product Click
• Activador: creamos un Evento personalizado que el nombre sea productClick

El código que debemos ejecutar tras el clic en uno de los productos es el siguiente:

function(productObj){    dataLayer.push({      'event':'productClick',      'ecommerce':{        'click':{          'actionField':{'list':'Search Results'},      // Optional list property.          'products':[{            'name': productObj.name,                      // Name or ID is required.            'id': productObj.id,            'price': productObj.price,            'brand': productObj.brand,            'category': productObj.cat,            'variant': productObj.variant,            'position': productObj.position           }]         }       },       'eventCallback':function(){         document.location = productObj.url       }    });}  

Impresiones de detalles del producto

Esto es la impresión de cuando un usuario entra a la ficha de producto, ojo que no es la impresión en la lista, es solo cuando el usuario entra dentro del producto por lo que debe ejecutarse solo en productos:

// Measure a view of product details. This example assumes the detail view occurs on pageload,  // and also tracks a standard pageview of the details page.  dataLayer.push({    'ecommerce':{      'detail':{        'actionField':{'list':'Apparel Gallery'},    // 'detail' actions have an optional list property.        'products':[{          'name':'Triblend Android T-Shirt',         // Name or ID is required.          'id':'12345',          'price':'15.25',          'brand':'Google',          'category':'Apparel',          'variant':'Gray'         }]       }     }});  

Añadir o quitar artículos del carrito

Aquí deberemos crear dos etiquetas en Tag Manager, ya que podemos encontrarnos dos casos, la acción de agregar productos al carrito o eliminarlos de él:

• Añadir productos al carrito:
  • Etiqueta: Universal Analytics
  • Seguimiento: evento
  • Categoría del evento: Ecommerce
  • Acción del evento: Add to Cart
  • Activador: creamos un Evento personalizado que el nombre sea addToCart
• Quitar productos del carrito:
  • Etiqueta: Universal Analytics
  • Seguimiento: evento
  • Categoría del evento: Ecommerce
  • Acción del evento: Remove from Cart
  • Activador: creamos un Evento personalizado que el nombre sea removeFromCart

Debemos modificar el campo add o remove debajo del tipo de moneda, en función de si queremos agregar o quitar productos.

dataLayer.push({    'event':'addToCart',    'ecommerce':{      'currencyCode':'EUR',      'add':{                                // campo donde asignaremos add o remove        'products':[{          'name':'Triblend Android T-Shirt',          'id':'12345',          'price':'15.25',          'brand':'Google',          'category':'Apparel',          'variant':'Gray',          'quantity':1         }]      }    }});

Impresiones de promoción

El siguiente código solo se ejecutara en páginas donde existan promociones para medir que se ha impreso por pantalla dicha promoción.

dataLayer.push({    'ecommerce':{      'promoView':{        'promotions':[                     // Array of promoFieldObjects.         {           'id':'JUNE_PROMO13',            // ID or Name is required.           'name':'June Sale',           'creative':'banner1',           'position':'slot1'         },         {           'id':'FREE_SHIP13',           'name':'Free Shipping Promo',           'creative':'skyscraper1',           'position':'slot2'         }]      }    }});  

Clics de promociones

Para el seguimiento de clics de las promociones, deberemos crear una etiqueta específica:

• Etiqueta: Universal Analytics
• Seguimiento: evento
• Categoría del evento: Ecommerce
• Acción del evento: Click de promoción
• Activador: creamos un Evento personalizado que el nombre sea promotionClick

Y crear una llamada a esta función, el código de la función podemos insertarlo en el footer:

function onPromoClick(promoObj){    dataLayer.push({      'event':'promotionClick',      'ecommerce':{        'promoClick':{          'promotions':[           {             'id': promoObj.id,                         // Name or ID is required.             'name': promoObj.name,             'creative': promoObj.creative,             'position': promoObj.pos           }]        }      },      'eventCallback':function(){        document.location = promoObj.destinationUrl;      }    });}  

Tramitación de la compra

Este código no servirá para indicar que el usuario se encuentra en el proceso de pago.

Necesitaremos crear la siguiente etiqueta de Tag Manager para recoger los datos:

• Etiqueta: Universal Analytics
• Seguimiento: evento
• Categoría del evento: Ecommerce
• Acción del evento: Checkout
• Activador: creamos un Evento personalizado que el nombre sea checkout

Y ejecutar el siguiente código al hacer clic par iniciar el proceso de compra:

function onCheckout(){    dataLayer.push({      'event':'checkout',      'ecommerce':{        'checkout':{          'actionField':{'step':1,'option':'Visa'},          'products':[{            'name':'Triblend Android T-Shirt',            'id':'12345',            'price':'15.25',            'brand':'Google',            'category':'Apparel',            'variant':'Gray',            'quantity':1         }]       }     },     'eventCallback':function(){        document.location ='checkout.html';     }    });}  

Para medir los siguientes pasos necesitamos crear la siguiente etiqueta para saber en que paso del proceso se encuentra el usuario:

• Etiqueta: Universal Analytics
• Seguimiento: evento
• Categoría del evento: Ecommerce
• Acción del evento: Checkout Option
• Activador: creamos un Evento personalizado que el nombre sea checkoutOption

Y usar ejecutar el siguiente código cada vez que el usuario realice clic para avanzar al siguiente paso:

/**   * A function to handle a click leading to a checkout option selection.   */  function onCheckoutOption(step, checkoutOption){    dataLayer.push({      'event':'checkoutOption',      'ecommerce':{        'checkout_option':{          'actionField':{'step': step,'option': checkoutOption}        }      }    });}  

Compras

Con este código que se inserta en la página de gracias, mediremos que el usuario ha completado el proceso y los datos del pedido asociado:

// Send transaction data with a pageview if available  // when the page loads. Otherwise, use an event when the transaction  // data becomes available.  dataLayer.push({    'ecommerce':{      'purchase':{        'actionField':{          'id':'T12345',                                   'affiliation':'Online Store',          'revenue':'35.43',                               'tax':'4.90',          'shipping':'5.99',          'coupon':'SUMMER_SALE'        },        'products':[{                                      'name':'Triblend Android T-Shirt',               'id':'12345',          'price':'15.25',          'brand':'Google',          'category':'Apparel',          'variant':'Gray',          'quantity':1,          'coupon':''                                     },         {          'name':'Donut Friday Scented T-Shirt',          'id':'67890',          'price':'33.75',          'brand':'Google',          'category':'Apparel',          'variant':'Black',          'quantity':1         }]      }    }});  

Reembolsos

Si necesitamos realizar una devolución y notificarlo a Google Analytics, necesitaremos enviar los datos de id del pedido para una devolución total o además los campos de id del producto y la cantidad si solo queremos devolver parte de este:

dataLayer.push({    'ecommerce':{      'refund':{        'actionField':{              'id':'T12345'          }               }    }});  

Más allá del comercio electrónico

Con este artículo sobre el comercio electrónico avanzado deberías ser capaz de implementarlo en distintas plataformas, saber hacer la instalación de forma manual con Analytics, con plugins y con Google Tag Manager.

Ahora ya estamos trackeando nuestro Ecommerce pero, si no tenemos una tienda online ¿podemos usar la funcionalidad para medir otros datos? ¿qué potencial puede tener el medir las impresiones, clics CTRs de algunos elementos de nuestra web?

La respuesta clara es un sí. La posibilidad de poder medir la impresión de elementos, el orden, diferentes métodos de clasificación, el CTR que están teniendo, el número de clics, donde se realizan todas estas impresiones y el cumplimiento del objetivo, son un conjunto de métricas que pueden aportar mucho valor en varios sectores, como por ejemplo sitios de noticias, catálogos de productos, nichos de afiliación, plataformas con diferentes opciones.

Veamos un ejemplo de cómo implementar el comercio avanzado para el seguimiento de artículos y noticias de un blog, a partir de aquí os podéis hacer una idea de como aplicar esta configuración en otras páginas de temáticas similares.

Insertar el seguimiento de artículos en WordPress con el comercio avanzado de Analytics

Para realizar esto es necesario que sepas algo de código y modificar el tema de tu WordPress. El tema sobre el que lo he realizado es FlyMag, en una web que tengo para realizar pruebas y testear diferentes cosas.

Lo primero que necesitaremos es configurar las etiquetas de Tag Manager que os listé en este artículo sobre las impresiones y clics.

Os pongo un ejemplo del código que inserté dentro del footer.php para medir las impresiones y los clics en los elementos impresos:

    dataLayer.push({  'ecommerce': {  'currencyCode': 'EUR',  'impressions': [    {  'name': '', // Nombre del post  'id': '', //  ID del post  'price': '1',  'brand': '', // ID del Autor del artículo (recordad que en analytics no se deben guardar nombres ni emails)  'category': '', // Primera categoría a la que pertenece el artículo  'variant': ' ', // etiquetas  'list': '', // Título de la página donde se mostró el post  'position':  //contador de posición de los resultados de dicha página, por ahora no he conseguido que en las paginaciones empiece desde el último número  },    ]  }  });  function productObject(titulo, id, marca, categoria, lista, enlace) { //Función para trackear el click donde se recogen las variables para hacer seguimiento  dataLayer.push({  'event': 'productClick',  'ecommerce': {  'click': {  'actionField': {'list': lista}, // Optional list property.  'products': [{  'name': titulo, // Name or ID is required.  'id': id,  'price': '1',  'brand': marca,  'category': categoria,  'variant': 'variante'  }]  }  },  'eventCallback': function() {  document.location (enlace)  }  });  }    

Y dentro de mi archivo content.php, es donde hace la llamada para crear los posts en bucle. En ese archivo modifiqué el enlace para insertar el siguiente elemento onclick (eliminando las etiquetas script):

onclick="productObject('<!--?php the_title(); ?-->','<!--?php the_ID(); ?-->','<!--?php echo get_the_author_meta('ID'); ?-->','<!--?php $cat = get_the_category(); echo $cat[0]-&gt;cat_name; ?-->','<!--?php $posttags = get_the_tags(); if ($posttags) { foreach($posttags as $tag) { echo $tag-&gt;name . ', '; ?--> }} ?&gt;','<!--?php wp_title(); ?-->','<!--?php the_permalink(); ?-->')" title="<!--?php the_title(); ?-->"

Quedando el enlace algo así:

Con esto logramos poder hacer un seguimiento de datos bastante interesantes sobre la interacción del usuario en nuestro blog. También puedes descargar el código desde aquí e instalarlo como plugin, aunque por ahora es necesario modificar los enlaces donde se generan los artículos en bucle.

Podríamos agregar más datos y adaptarlo aun más, como configurar la conversión si se suscriben a la newsletter por ejemplo. Con lo explicado en el artículo y algo de creatividad, se pueden sacar varias ideas interesantes.

Conclusiones

Como podéis observar existe una gran funcionalidad dentro de Analytics que aun no hemos explotado en nuestro día a día.

Quizá no sea el método o la herramienta más correcta para realizar este tipo de mediciones pero es bastante interesante realizar esta adpatación.

Algo que quiero destacar es que antes de ponernos a medir como locos cualquier cosa, es importante marcarse unos kpis, los motivos y que información vamos a necesitar para saber si estamos llegando a ellos y actuar en consecuencia.

Si te ha gustado el artículo y necesitas ayuda, puedes leer más sobre nuestros servicios de analítica web.