google-optimize-html-lucia-marin

Google Optimize: Cómo añadir capas HTML en un test A/B

Posted by Lucía Marín on Nov 17, 2018

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.

google-optimize-estilo-elemento

¿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.

google-optimize-seleccion-capa-html

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.

google-optimize-insertar-capa-html

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

google-optimize-agregar-html

En este ejemplo como lo queremos incluir Después o más abajo del código HTML que acabamos de indentificar como punto de inclusión del nuevo bloque, pues nos tenemos que acordar de seleccionar Después.

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:

<img src=”/mi-imagen.jpg” style=”width:100%”>

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.

google-optimize-editar-html-bloque-nuevo

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

google-optimize-editar-html-ab-testing

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:

Importante -> Dejamos marcado Sustituir abajo, para que Optimize sepa que este código reemplaza al previo, no se añade antes ni después -como explicamos en el ejemplo previo-.

test-ab-optimize-editar-html-sustituir

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

Si necesitas o te gustaría aprender por tu cuenta hasta profundizar más en Google Tag Manager y Analytics, entonces te interesa mi curso online. Consta sobre todo de material PDF escrito y actualizado constantemente. Y está tutorizado con soporte por foro/email durante 2 meses. También con opción a clases particulares para dudas.

O si lo que prefieres es una formación in company, en tu empresa o departamento, sobre Tag Manager y Píxeles de Conversión, sobre Google Analytics avanzado, Data Studio, Supermetrics Functions. O incluso sobre SEO, Google Ads, Analytics básico, etc. contacta conmigo, seguro que podemos ayudarte :)

Sobre mí

Comparte tu opinión

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: