En esta página vas a descubrir que es Google Optimize y para qué sirve. Además, encontrarás una breve explicación de cada uno de los elementos y funcionalidades de Google Optimize.
Contenido de la entrada
1. ¿Qué es y para que sirve Google Optimize?
Google Optimize es otra herramienta gratuita de Google que sirve para realizar ‘tests A/B’ en nuestros sitios webs.
Por si todavía no estás familiarizado con el término ‘test A/B’ quédate con que Google Optimize es una herramienta gratuita de Google que permite realizar cambios en nuestra página web sin necesidad de tocar el código fuente e incluso sin tener que hacerlo desde dentro de nuestro CMS (por ejemplo, WordPress o Shopify).
2. ¿Qué es el test A/B o ‘A/B Testing?
El término test A/B (“A/B Testing en Inglés) en el mundo de la programación y el Marketing Digital se usa para referirse a probar dos o más versiones de una misma página web o algún otro elemento de la misma.
Esta prueba permite ahorrar numerosos recursos y tiempo para lograr la mejor versión de una página web o elemento concreto.
Por ejemplo, imagina que vas a lanzar tu página web personal, con la que pretendes mostrar tus servicios y conseguir suscriptores para tu blog. Tu primer diseño consiste en una versión de la página home con una cabecera con tu nombre y tu foto, más un CTA (‘Call To Action’ o botón) para captar suscriptores para tu blog.
La otra versión que has pensado es en quitar esta sección y poner directamente las categorías de tu blog y aportar una imagen menos personal y más de ‘blog’:
Tras preparar ambas versiones, se publican las dos a la vez. De todos los usuarios que lleguen a tu sitio web, el 50% verá la primera versión de tu página, y el 50% verá la otra versión.
Así, tras esperar unos días a tener un volumen suficiente de tráfico como para sacar alguna conclusión, revisaremos los informes y veremos con cuál de las dos versiones hemos conseguido un mayor número de Leads (Suscriptores).
Previous
Next
3. Estructura de Google Optimize
Google Optimize se encuentra bajo el ‘paraguas’ de la suite de la recientemente lanzada ‘Google Marketing Platform’. Al igual que el resto de herramientas de la suite (Google Analytics, Google Tag Manager, Data Studio…) necesitas una cuenta de Google para poder acceder a la plataforma.
Además, todos los menús y opciones disponibles en la parte superior son más o menos comunes al resto de herramientas anteriormente mencionadas
3.1. Cuenta
Si no tienes acceso a ninguna cuenta o contenedor de Google Optimize, te aparecerá la siguiente imagen:
3.2. Contenedor
El contenedor es el área donde crearás las diferentes Experiencias. Este tiene un ID asociado, y por supuesto un código que deberás añadir a tu sitio web para que puedas empezar a publicar tus experiencias.
Para crear tu primer contenedor ve directamente a la página de Cuenta y haz click en el icono ‘+’ de tu cuenta. Escribe el nombre del contenedor y haz clic en ‘Crear’.
La siguiente pantalla que te aparecerá será un listado de tus experiencias (si lo acabas de crear no te aparecerá ninguna) y en la parte de la derecha podrás ver información acerca de tu contenedor y una pequeña guía con los pasos que te falta por hacer.
Aquí también puedes ver el ID de tu contenedor (en mi ejemplo es ‘GTM-T7KZLRX’):
3.3. Experiencias o Experimentos
Para crear tu primera Experiencia simplemente has de hacer clic en el botón ‘Crear Experiencia’.
Aquí deberás especificar:
- Un nombre
- La URL donde quieres ejecutar tu experiencia (puedes poner una página concreta o todo tu dominio)
- El tipo de experiencia que quieres crear (más abajo podrás ver la diferencia entre cada uno de ellos)
3.4. Variantes
En el menú de variantes dentro de tu Experiencia aparecerán todas las variantes que hayas creado. Siempre va a haber una variante ‘Original’ que se referirá a la página web tal y como está publicada para todos los usuarios.
Para ello, únicamente he seleccionado dicho elemento, he hecho click en modificar elemento, y posteriormente en ‘Editar texto’. He escrito el nuevo texto y he guardado los cambios.
En resumen, el peso de una variante determina qué porcentaje de los usuarios que visitan tu web verán una de las variantes creadas dentro de tu Experiencia, escogidos de una forma completamente aleatoria.
4. El Editor de Google Optimize
Si haces click alguna otra de las variantes, accederás directamente al editor online donde podrás modificar todos los elementos de tu página web.
Si es la primera vez que accedes al editor, seguramente estés pensando que hay infinidad de opciones y no entiendes nada… No te preocupes porque la mayoría de funcionalidades son bastante sencillas de de utilizar.
4.1. Modificar Elemento
Cada elemento de nuestra página web (normalmente correspondiente a un elemento html como por ejemplo un div, p, a, h1, h2, img…) puede modificarse haciendo click en el mismo y accediendo al panel de opciones de configuración del elemento.
Por ejemplo, quiero crear una variante donde el título principal de mi cabecera se muestre como ‘Senior Web Analyst’ en lugar de ‘Analista Web’.
Para ello, únicamente he seleccionado dicho elemento, he hecho click en modificar elemento, y posteriormente en ‘Editar texto’. He escrito el nuevo texto y he guardado los cambios.
Previous
Next
4.2. Quitar Elemento
Además, quiero eliminar mi foto de la cabecera, por lo que directamente puedo ‘quitar dicho element’ seleccionándolo con el botón derecho y haciendo click en ‘quitar’.
Quitar Elemento
4.3. Editar HTML
Otra opción muy útil que podemos hacer fácilmente es cambiar el HTML de cualquier elemento de la página, haciendo uso de la opción ‘Editar HTML’:
Por ejemplo, voy a cambiar la URL a la que lleva el enlace:
Click HereClick Here
Previous
Next
4.4. Selector de elementos
En la parte superior del editor, encontrarás una pequeña barra en la que se indica la ruta en la que se encuentra un elemento (dicho de otro modo, todos los elementos desde los “que cuelga” un elemento concreto
Por ejemplo, el elemento seleccionado que aparece en la imagen, es un enlace (<a>) que cuelga bajo todos los divs y un <h3> que se indican en esta barra superior.
Además, si haces click en el símbolo de la izquierda del todo, te aparecerá la ruta html (selector de jQuery) para dicho elemento.
Previous
Next
4.5. Cambiar tamaño
Puedes cambiar el tamaño de cualquier elemento html de dos formas diferentes.
La primera es simplemente seleccionando el elemento que quieres cambiar, y arrastrar desde cualquiera de los puntos de los laterales. El tamaño se irá ajustando automáticamente.
Previous
Next
La segunda forma es cambiando directamente las dimensiones del elemento. Para ello deberás seleccionar el elemento y acceder a la paleta del editor (situada en la barra superior, en el cuarto símbolo empezando por la derecha).
Será entonces cuando podrás indicar las dimensiones en ‘píxeles’ que deseas para el elemento que has seleccionado.
4.6. Ejecutar JavaScript
Otro cosas que puedes hacer con el editor, es insertar código JavaScript cuando un usuario interactúe con un elemento de tu página (o cualquier otra condición que se te ocurra).
Por ejemplo, puedes configurar Google Optimize para que cuando un usuario hace click en el enlace de ‘Google Analytics’ le salga una ventana emergente indicando que se suscriba al blog.
Para ello, como puedes ver en la imagen anterior, tienes que seleccionar el elemento y hacer click en ‘Ejecutar JavaScript’.
4.7. Mover Elemento
Se puede mover un elemento de dos formas diferentes:
- La primera es manteniendo la estructura de capas (divs) actual (opción recomendada). Esta viene activada por defecto y tan solo tienes que seleccionar el elemento que deseas mover, dejarlo pulsado y arrastrar hasta el lugar que desees.
Previous
Next
- La segunda forma te permite mover elemento a cualquier parte de la pantalla, pero como ya he mencionado anteriormente, esta opción no la recomiendo, porque dependiendo del dispositivo y el navegador del usuario, a cada usuario puede aparecerle el elemento movido en otro sitio sobre el que no tienes mucho control.. No obstante, para mover un elemento de esa forma, simplemente tienes que seleccionar el elemento, y en la barra superior, pulsar el icono de la derecha del todo, y cambiar a ‘Mover a cualquier parte’.
Previous
Next
- Cómo puedes ver, ahora si me ha dejado mover el botón a la parte central de la pantalla.
4.8. Previsualización
Si ya has empezado a practicar con el editor de Google Optimize, seguramente estés pensando en cómo puedes comprobar los cambios sin tener que publicar el experimento ni tener que guardar los cambios, ya que no estás seguro al 100% de que lo has configurado tal y como lo querías.
Para poder visualizar los cambios de un modo fiable, debemos acceder al ‘Modo Interactivo’. Esta opción se activa simplemente haciendo click en el icono con la flecha, en la barra superior derecha.
Para volver al editor de Google Optimize, únicamente debes hacer click el botón ‘Salir’ de la barra superior.
4.9. Histórico de cambios
Si te has fijado, en la parte superior de la pantalla hay una barra de color oscuro con algunas opciones. Ahí puedes ver el número de cambios que has realizado en esta variante.
Si haces click en el número de cambios, podrás ver todos y cada uno de ellos, ordenados desde el más antiguo al más nuevo y podrás editar o borrar cada uno de estos seleccionando dicho cambio.
5. Tipos de Experiencias en Google Optimize
5.1. Prueba A/B
SI has escuchado algo sobre el concepto de optimización de páginas web, estoy seguro que habrás escuchado el concepto ‘Test A/B’ o ‘A/B Testing’ en Inglés.
El ‘A/B Testing’ es un concepto que consiste en generar dos versiones distintas de una misma página, normalmente sin necesidad de modificar el código fuente de la página o tener que crear otra diferente.
Los ejemplos que has ido viendo durante esta lectura, son ‘Pruebas A/B’. Partimos de una web original y creamos una o más variaciones donde modificamos uno o más elementos haciendo uso del editor. Se define a qué porcentaje de usuarios se le va a mostrar cada versión. Al finalizar el experimento, seremos capaces de ver que versión nos ha generado más conversiones en referencia a nuestro objetivo.
5.1. Prueba A/B
Si has escuchado algo sobre el concepto de optimización de páginas web, estoy seguro que habrás escuchado el concepto ‘Test A/B’ o ‘A/B Testing’ en Inglés.
El ‘A/B Testing’ es un concepto que consiste en generar dos versiones distintas de una misma página, normalmente sin necesidad de modificar el código fuente de la página o tener que crear otra diferente.
Los ejemplos que has ido viendo durante esta lectura, son ‘Pruebas A/B’. Partimos de una web original y creamos una o más variaciones donde modificamos uno o más elementos haciendo uso del editor. Se define a qué porcentaje de usuarios se le va a mostrar cada versión. Al finalizar el experimento, seremos capaces de ver que versión nos ha generado más conversiones en referencia a nuestro objetivo.
5.2. Prueba multivariable
Este tipo de experiencias son similares a los ‘Test A/B pero tienen la característica principal de que se puedan probar de forma simultánea la mejor combinación de diferentes elementos.
Esto puede suponer un ahorro de tiempo para lograr ‘tu página perfecta’. Sin embargo, requerirá de un mayor número de usuarios para poder obtener resultados concluyentes.
Por ejemplo, imagina que todavía no has decidido el color base de tu página web. Y además, tampoco has decidido si quieres poner un banner con tu imagen o prefieres poner solo texto.
Las diferentes variantes que deberías crear en la prueba multivariable que debes llevar a cabo sería:
- Crear una versión con color base en negro y con banner con tu imagen.
- Crear una versión con color base en gris y con banner con tu imagen.
- Crear una versión con color base en negro y sin banner con tu imagen.
- Crear una versión con color base en gris y sin banner con tu imagen.
5.3. Prueba de redirección
Este tipo de experiencia es la más sencilla de todas de configurar, siempre y cuando dispongas de las dos páginas con las que quieres llevar a cabo el experimento.
Dado que ya tienes cada una de las páginas, simplemente debes de seleccionar qué porcentaje de usuarios van a ser impactados para cada una de las versiones.
La configuración del resto del experimento es exactamente igual que la ‘Prueba A/B’.
5.4. Personalización
Esta opción es la más novedosa de todas (todavía está en versión BETA). Este tipo de experiencia te permite crear una versión de tu página permanente que sólo verán los usuarios que cumplan las condiciones que tu definas.
Por ejemplo, imagina que tienes una academia de idiomas y tienes oficina en diferentes ciudad: Madrid, Sevilla, Barcelona y Valencia.
Puedes decidir entre tener la misma página web para todas las ciudades, o tener una página específica para cada una de tus academias (o al menos tener un contenido específico). En lugar de tener que crear 4 páginas diferentes, puedes crear 4 pruebas de personalización diferentes e indicar la ciudad cuando indiques a quien le quieres mostrar este experimento (es decir, si el usuario accede desde Madrid, verá la versión de Madrid, si el usuario accede desde Valencia, verá la versión de Valencia, etc…)
6. Enlazar Google Optimize con Google Analytics
Al tratarse de dos herramientas principales de Google de estar estrechamente relacionados en cuanto al concepto de optimización, es obligatorio enlazar tu propiedad de Analytics con tu contenedor de Google Optimize.
Pd. Si todavía no lo has hecho, aprende a configurar Google Analytics desde cero.
Para enlazar ambas herramientas, ve al panel principal de tu contenedor de Google Optimize donde se muestran todas tus experiencias creadas y en la parte de la derecha te aparecerá una ventana donde te indicará la acción obligatoria de ‘Enlazar con propiedad’.
Una vez selecciones la propiedad, te pedirá además las vistas para las que quieres enlazarlas. Si tiene una web con poco tráfico, puedes seleccionar todas las vistas. Sin embargo, si el tráfico de tu web es muy alto (a partir de 500.000 sesiones/mes) debes pensar bien si lo necesitas en todas la vistas ya que generarán un mayor número de hits que se contabilizarán en tu cuenta de Google Analytics.
Aprende a añadir Google Optimize a tu página web en esta entrada