Guía paso a paso para las pruebas A/B de los temas de Shopify (usando Convert Experiences)
Publicado: 2021-09-28
Como dueño de un negocio de Shopify, encontrar el tema correcto es difícil. Se necesita mucho tiempo y energía para configurar una tienda de comercio electrónico exitosa. Y todo comienza con pasar horas eligiendo el tema perfecto para darle a su tienda en línea el aspecto correcto, lo que hace que sea aún más frustrante cuando tiene un rendimiento inferior.
Tantos temas diferentes para elegir, pero ¿cómo se comparan todos? ¿Cuál debería usar para su negocio para deleitar a los visitantes y maximizar las ventas?
Bueno, ¿y si hubiera una forma de elegir más de un tema ? ¿Para asegurarse de que el diseño realmente funcione y genere ventas antes de comprometerse con solo uno?
Las pruebas A/B son una excelente manera de medir la efectividad de los temas de Shopify elegidos. Una forma de hacerlo es elegir dos (o más) temas con diferentes diseños (por ejemplo, el tema A y el tema B), y luego probar su eficacia entre sí.
Este tutorial lo guiará a través de todo lo que necesita saber sobre las pruebas A/B de los temas de Shopify. Con fines ilustrativos, detallaré este proceso utilizando la opción Dividir URL de Convert.
1. Seleccione los temas de Shopify que desea probar
En primer lugar, debe seleccionar dos temas de Shopify para probar. (Deberá limitarse a solo dos temas para la primera prueba. Si está considerando más de dos temas, deberá realizar pruebas posteriores).
El tema principal será el que estés mostrando en vivo a los visitantes de la tienda Shopify, mientras que el otro con el que quieras probar estará en modo de vista previa (no publicado).
En la aplicación Shopify, busque su tema en vivo en Canales de ventas > Tienda en línea , luego Temas :
Luego, elija el segundo tema que desea probar de la Biblioteca de temas :
2. Instale el código de seguimiento de conversión en ambos temas
Ahora que ha elegido sus temas de la plataforma Shopify, deberá instalar el código de seguimiento. ¡Esta es una parte esencial que garantizará que el comportamiento de los visitantes se rastree correctamente y la prueba le dará el ganador legítimo!
Simplemente siga las instrucciones a continuación para instalar el código de seguimiento de Convert Experiences en AMBOS temas de Shopify que desea dividir la prueba.
Vaya a Canales de venta > Tienda en línea > Temas > Más acciones > Editar código.
Luego, seleccione el archivo theme.liquid y pegue el código de seguimiento de conversión a continuación justo antes de la primera sección "{% si %}", como se muestra en la captura de pantalla. Asegúrese de reemplazar el número de ID del proyecto con su propio ID de proyecto de cuenta de Convert.
<!-- comenzar el código de Experiencias de conversión-->
<script tipo="texto/javascript">
var _conv_page_type = "{% if plantilla == 'índice' %}página de inicio{% else plantilla == "colecciones" %}colección{% else plantilla == "artículo" %}artículo{% else plantilla == "producto" % }producto{% else template == "carrito" %}carrito{% else %}otro{% endif %}";
var _conv_category_;
var _conv_category_name = "{{ colección.título }}";
var _conv_product_sku = "";
var _conv_product_name = "{{ producto.título }}";
var _conv_product_price = "{{ product.compare_at_price_min | dinero }}";
var _conv_cliente_;
var _conv_custom_v1 = "{{ etiqueta }}";
var _conv_custom_v2 = "{{ order.shipping_address.province }}";
var _conv_custom_v3 = "{{ cart.item_count }}";
var _conv_custom_v4 = "{{ carrito.precio_total | dinero_sin_moneda }}";
</script>
<script type="text/javascript" src="//cdn-3.convertexperiments.com/js/<REEMPLAZAR ESTO CON EL NÚMERO DE IDENTIFICACIÓN DEL PROYECTO>.js"></script>
<!-- fin del código de Experiencias de conversión --> 
Por último, ¡no olvides guardar tus cambios!
Como mencioné anteriormente, deberá aplicar los mismos pasos al segundo tema que desea probar. Recuerde, ese es el tema que mantendrá en modo de vista previa.
Comience yendo a Canales de ventas > Tienda en línea > Temas > Biblioteca de temas > (seleccione el tema que desee) > Editar código.
Luego, simplemente repita el proceso para el segundo tema: seleccione el archivo theme.liquid, edite el código usando el script anterior y guarde los cambios.
Debería verse así, dependiendo del tema que hayas seleccionado:
Para obtener instrucciones más detalladas sobre cómo instalar el código de seguimiento de Convert, siga los pasos aquí.
3. Permitir seguimiento de ingresos
Ahora, la parte importante: el seguimiento de los ingresos. ¿De qué otra manera sabrás qué tema de Shopify funcionó mejor para tu negocio?
Hay tres formas principales de realizar un seguimiento de los ingresos, que cubro con mayor detalle en esta publicación.
En resumen, puede decidir si
- Instale el código de seguimiento Convert en la página de estado del pedido de Shopify para poder realizar un seguimiento de los ingresos/compras a través de Google Analytics,
- Configure el código de seguimiento de ingresos manual, o
- Usa webhooks.
Puede usar el seguimiento de ingresos para saber cuándo sus clientes visitan su caja y con qué frecuencia realizan una compra. También es una excelente manera de obtener más información sobre las tendencias de compra en su tienda, como el valor promedio de los pedidos y las ventas totales por producto.
Para configurarlo, vaya a Configuración > Pago y desplácese hacia abajo hasta la sección Scripts adicionales . En el campo de formulario Scripts adicionales , pegue el siguiente código:
<script tipo="texto/javascript">
if (tipo de _conv_host == "indefinido") {
ventana["_conv_prevent_bodyhide"] = verdadero;
(función() {
var _conv_track = document.createElement("script");
_conv_track.src = "//cdn-3.convertexperiments.com/js/XXXXX-XXXXX.js"
document.getElementsByTagName("head")[0].appendChild(_conv_track
</script>Reemplace el texto, "XXXXX-XXXXX", con su ID de proyecto de cuenta de Convert que se encuentra en la Configuración de su proyecto.
4. Encuentra el ID del tema de vista previa de Shopify
A continuación, deberá editar el código del tema no publicado desde el sitio web de Shopify. Recuerda que puedes hacerlo en Canales de venta > Tienda en línea > Temas > Más acciones > Editar código.
Luego, puede copiar el ID del tema desde la URL del administrador, /admin/themes/xxxxxxxx.
Necesitará este ID para poder agregar ?preview_theme_id=xxxxxxxx como una URL de variación para la prueba de URL dividida (más sobre esto en la siguiente sección).
5. Cree una prueba de conversión de URL dividida
Ahora, pasemos a la herramienta de prueba A/B, en este caso, Convert Experiences, para configurar la prueba de URL dividida.
En la sección Editar variaciones de URL divididas , inserte este código en el campo URL original :
^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?( #(.*))?
Usa lo siguiente como URL de variación , donde la variable preview_theme_id es lo que descubriste en el paso anterior (y no olvides reemplazar '123456' con tu propia ID de tema de vista previa de Shopify):
$1$3$5?preview_theme_id=123456&$7
La URL resultante será algo como esto:
https://www.store.com?preview_theme_id=123456&.
Luego, habilite Admitir expresiones regulares y Transferir variables de URL originales a la URL de variación . Sus variaciones de prueba deberían verse así (excepto que la ID del tema será diferente):
6. Especifica a qué páginas de Shopify apuntar
Una vez más, vaya a la aplicación Convert Experiences. Asegúrate de que la sección Área del sitio incluya todas las páginas de tu tienda Shopify (¡incluidas todas esas valiosas páginas de productos!).
Podría verse algo como esto:
Asegúrese de excluir páginas cuando la cadena de consulta contenga: preview_theme_id=123456.
Esto es muy importante para que al activar el experimento no se produzca un bucle. Si ve un bucle, sabrá que se ha saltado este paso.
7. Ocultar la barra de vista previa de Shopify
Si nos detenemos aquí y simplemente activamos el experimento de URL dividida cuando la plantilla del tema de vista previa se muestra aleatoriamente a los visitantes del sitio web, aparece una ventana emergente molesta que especifica que es una plantilla de vista previa. Es posible que esto no sea atractivo para sus visitantes y podría generar inquietudes sobre qué otras pruebas se están ejecutando en su tienda.
Para evitar causar fricciones innecesarias, agregue el siguiente código CSS a Shopify para ocultar el banner de vista previa. Tenga en cuenta que si también desea ocultar este banner de las páginas de pago, necesitará una cuenta de Shopify Plus, ya que el código solo se aplica a los clientes de Shopify Plus.
En Shopify, ve a Tienda en línea > Preferencias > Google Analytics y agrega el siguiente código en el cuadro JavaScript adicional de Google Analytics :
función() {
var css_override = document.createElement("estilo");
document.getElementsByTagName("head")[0].appendChild(css_override);
})();
var css = 'iframe#preview-bar-iframe { display: none !important; }',
cabeza = documento.cabeza || documento.getElementsByTagName('cabeza')[0],
estilo = documento.createElement('estilo');
estilo.tipo = 'texto/css';
if (estilo.styleSheet) {
estilo.styleSheet.cssText = css;
} más {
estilo.appendChild(document.createTextNode(css));
}
cabeza.appendChild(estilo);8. Inicie el experimento de URL dividida
Ahora está listo para activar su experimento de URL dividida. Para hacerlo, deberá ir a la página de su experimento en Convert Experiences y configurarlo como Activo.
Una vez que el experimento está activo, esto es lo que sucede cuando un visitante llega a una de las páginas de su tienda Shopify:
8. ¡Analiza tus resultados y elige un ganador!
Convert utiliza la inferencia frecuentista para determinar cuándo y en qué medida tus temas de Shopify son mejores que los demás. Como regla general, recomendamos esperar dos semanas antes de elegir el tema ganador, y la herramienta en sí misma generalmente no le dice un ganador antes de eso (a menos que tenga mucho tráfico en su sitio).
Esta es también la razón principal por la que nuestra prueba gratuita tiene una duración de 2 semanas.
En el mundo del comercio electrónico, dos semanas ni siquiera es tanto tiempo. Así que apegarse a por lo menos dos semanas no es una mala idea. Después de todo, estamos probando temas completos, por lo que no estará de más estar completamente seguro del impacto que tiene su prueba.
Conclusión
Así que ahí lo tienes.
Ya seas un nuevo propietario de una tienda Shopify que busca encontrar el tema perfecto para tu negocio o un propietario de un negocio de comercio electrónico con experiencia que busca uno con mejor rendimiento, las pruebas A/B de Shopify son algo que puede ayudarte a mejorar la experiencia del usuario, optimizar tu tasas de conversión y ventas, y tomar mejores decisiones comerciales.
¡Hemos descrito todos los pasos anteriores, así que no se preocupe si el proceso de prueba es un territorio desconocido para usted! Y si te ha gustado lo fácil de usar que es Convert Experiences, haz clic en el banner a continuación para realizar una prueba gratuita para que puedas comenzar a trabajar para encontrar el tema de Shopify adecuado de inmediato.
