Nelio A/B Testing permite contar como una conversión en un test el hecho de que un visitante haga clic en algún elemento de tu web.
Dado que solo te interesan ciertos clics (es decir, cuando el visitante hace clic en elementos específicos), debes indicar a Nelio A/B Testing los elementos exactos que, al hacer clic, deberían desencadenar una conversión. Para hacerlo, puedes usar selectores CSS o el ID del elemento. Esto lo defines en la sección de los objetivos y las acciones de conversión al editar un test:
Por ejemplo, suponiendo que estás interesado en que el visitante haga clic en un botón como este:
<button id="my-button">Buy!</button>Simplemente puedes usar el ID (my-button) o el selector CSS equivalente (#my-button).
Ahora, lo interesante de los selectores CSS es que puede hacer coincidir más de un elemento con una sola regla. Por ejemplo, si quiero hacer coincidir algún enlace en el contenido de mi publicación:
<div class="post-content">
<p>...<a href="">...</a>...</p>
<p>...</p>
<p><a href="">...</a>...</p>
...
</div>Puedo usar el siguiente selector de CSS: .post-content a
que coincide con cualquier enlace (etiqueta HTML <a>) que está dentro de un elemento cuya clase (por esto usamos el símbolo de punto inicial) es post-content.
Aquí tienes más información sobre los selectores de CSS: https://www.w3schools.com/cssref/css_selectors.asp
Para conocer tanto el selector CSS o el ID del elemento tendrás que ver el HTML de tu web. En la mayoría de navegadores tienes la opción de hacer clic con el botón derecho encima del elemento de tu web que te interesa e inspeccionar ese elemento. Esto abrirá la consola de desarrollador web y mostrará el HTML de tu web, con el foco puesto en el elemento seleccionado.
Ten en cuenta que no todos los elementos de tu web tienen por qué tener un ID establecido. Si ese es el caso del elemento al que quieres detectar los clics, tendrás que optar obligatoriamente por buscar el selector CSS del elemento.
Seleccionar con Nelio A/B Testing el elemento cuyos clics queremos que sean conversiones
Nelio A/B Testing incluye una interfaz de usuario que te ayuda a ver qué elementos se corresponden con un selector específico CSS y a seleccionar un selector CSS de forma amigable.
Ten en cuenta que un selector CSS que «funciona» en la versión de control podría no encontrar ningún elemento en las variantes de tu test. Si este fuera el caso, tus variantes nunca tendrían conversiones porque nuestro plugin asumiría que ninguno de los elementos en los que el visitante ha hecho clic es relevante para tu test.
Para solucionar este problema tienes dos soluciones. O bien usas un selector CSS menos específico que permita «encontrar» el elemento en ambas variantes, o bien añades más selectores CSS (uno que coincida con elementos en la versión de control y otro que coincida con elementos en la versión B del test).
Si volvemos a la sección dónde definimos las acciones de conversión de un objetivo en Nelio A/B Testing, al seleccionar una acción de clic tenemos la posibilidad de hacer clic en el botón Explorar:
Esto hará que se abra una ventana emergente dentro de la misma página de edición del test donde podemos ver la página bajo test. En la barra superior de esta ventana tenemos diferentes opciones. En el desplegable de la izquierda podemos seleccionar qué variante queremos ver. Esto es especialmente útil cuando los elementos de las diferentes variantes son distintos.
Luego tenemos un icono de lupa que al hacer clic en él nos permite seleccionar qué elemento de la página es el que queremos para que cuando se haga clic en este Nelio A/B Testing cuente una conversión en los resultados del test.
Una vez haces clic en la lupa, al mover el cursor por la página verás que los diferentes elementos se van resaltando. De esta manera puedes hacer clic en el que quieras que sea el elemento a clicar en el test. En nuestro caso, en el siguiente ejemplo ves que hemos seleccionado el botón See our products:
Al hacer clic en el elemento, su selector CSS aparecerá en la barra de búsqueda de esta ventana emergente. Ya tienes seleccionado el selector que quieres. Ahora si haces clic en el botón de OK, este selector se añadirá en la acción de conversión de clic:
De esta forma, seleccionar los elementos a los que queremos que un clic en ellos cuente como conversión es mucho más sencillo y no hay que ser un experto en HTML ni en reglas CSS.
Del mismo modo, puedes escribir un selector CSS en la acción de conversión de clic y luego darle al botón de Explorar. Esto abrirá la misma ventana emergente anterior con la página bajo test y los elementos que coincidan con el selector CSS que has escrito saldrán marcados en color azul. Así puedes comprobar que el selector que has escrito es el que toca y selecciona a todos los elementos a los que quieres que Nelio A/B Testing haga seguimiento.
Añadiendo una clase CSS a todos los elementos que queremos analizar
Otra opción que puedes utilizar es editar la versión de control y las variantes del test y a aquellos elementos que quieras que un clic en ellos se detecte como conversión les añades una clase CSS específica.
De este modo, si a todos estos elementos que quieres detectar en un test como conversión al hacer clic en ellos les pones la misma clase, en la configuración del test establecer la acción de clic con un selector CSS es tan sencillo como poner el nombre de la clase que has utilizado precedido de un punto.
En el ejemplo anterior hemos seleccionado el botón en el editor de bloques y en la barra lateral derecha tienes la sección Avanzado. Si la despliegas verás que puedes añadir una clase CSS adicional. En este caso hemos utilizado conversion-action.
Luego, sólo tienes que utilizar ese mismo nombre, precedido de un punto (.conversion-action), tal y como hemos indicado antes:
Esto mismo lo puedes hacer si utilizas otro tipo de editores visuales como Divi, Beaver Builder, y demás. Todos tienen la opción de añadir una clase CSS adicional en los elementos que conforman la página.