Google Optimize es la herramienta de A/B testing de Google que cuenta con versión gratuita y que ha entrado fuerte en el mercado de test A/B, triunfando como en todo lo que hace Google.

Se trata de una interfaz visual cuyo uso parece bastante fácil e intuitivo, sobre todo a la hora de editar elementos HTML sin saber ni siquiera nada de HTML. Cambiar el color de un botón, un copy, etc. es bastante sencillo y rápido de hacer, recuerda a un editor de texto o imagen.

¿Pero qué ocurre si el cambio que queremos testar va más allá y lo que deseamos es introducir una nueva capa de código HTML, usar código «a pelo»? por ej. queremos añadir a la página un nuevo div o section HTML pero antes de publicar el cambio para todos los usuarios, deseamos estar más seguros de si funciona o no. Eso es lo que vamos a aprender en este post, a introducir nuevos contenidos o elementos en la página, primero con AB testing para ver si ese nuevo bloque de contenido funciona.

Aquí tenemos el proceso paso a paso:

1) Primero vamos dentro de Google Optimize a la versión que queremos editar.

2) Hemos de seleccionar el bloque o capa HTML donde deseamos añadir el nuevo contenido. Por ej. en este caso es <section> #reviews. Y queremos añadir el contenido justo después o debajo de eso, este factor es importante, lo de si va antes o después. Ahora lo veremos.

3) Una vez encontrada a través de la interfaz visual, la parte del HTML donde queremos añadir algo, clicamos en Modificar Elemento / Insertar HTML.

4) Entonces nos aparece un cuadro donde directamente podemos introducir código HTML:

Aquí podemos incluir cualquier código HTML que se añaderá a esta versión de la página mientras el test esté vigente. OJO, el código verificar que esté bien formado, con todas las etiquetas o tags HTML y CSS en su caso bien cerradas, pues se nos podría desmaquetar la página si hay algún fallo (como ocurre con cualquier HTML que incluyamos).

De momento añadimos este código bien sencillo, por ejemplo:

5) Resultado: Se añade el nuevo bloque de HTML que hemos diseñado para el test (en nuestro ejemplo es únicamente una imagen lo que añadimos, pero podría ser cualquier código HTML que deseemos incluir).

¿Cómo editar una capa HTML que hemos añadido antes con Google Optimize?

En un futuro , si lo que queremos es modificar ese mismo código HTML, para editarlo haremos lo siguiente:
1) Hacemos un click en el elemento HTML que añadimos anteriormente.

2) Clicamos de nuevo en Modificar Elemento, y en concreto en Editar HTML :

Reemplazamos por el código que deseemos introducir, al entrar aparecerá el código que introdujimos previamente, y ahí podemos editar o reemplazar por el nuevo código, pues es un campo de HTML:

3) Cuando lo tengamos, pulsamos en aplicar.
Si es necesario realizar cambios sucesivos, lo haremos igual :)