Palabras clave populares
Categorías
Total Resultados
No se ha encontrado ningún registro
Prueba los temas de Shopify con Varify.io
Índice
Corto y dulce
Utiliza la función "Shopify Theme Preview" para probar fácilmente un nuevo tema de Shopify con Varify.io. Crea un nuevo experimento y utiliza el código JavaScript proporcionado. Personalízalo con el ID de tu nuevo tema y pruébalo antes de convertir tu tienda.
Por qué probar los temas de Shopify
Un nuevo tema de Shopify debe ser probado A/B antes de cambiar para asegurarse de que no degrada el rendimiento de la tienda. Los cambios en el diseño pueden influir en el comportamiento del cliente y en KPIs como la tasa de conversión. Las pruebas A/B permiten comprobar con datos si el nuevo tema ofrece mejores resultados.
Paso 1: Inserte el fragmento Varify.io en el archivo theme.liquid
💡Nota: Recomendamos integrar el snippet Varify a través del archivo themes.liquid para temas de prueba. El paso 1 solo debe realizarse si el fragmento Varify aún no está instalado en su sitio.
Copia el fragmento de Varify.io del panel de control y pégalo lo más arriba posible en el archivo theme.liquid de tu tienda. Para ello, ve a "Tienda online"-> "Temas" en el backend de Shopify y haz clic en "editar código".
Paso 2: Busque el ID del nuevo tema que desea probar
Necesitamos el ID del tema para decirle a Shopify qué tema deben ver los participantes de la prueba. Aquí hay una guía paso a paso sobre cómo encontrar el ID del tema desde el enlace de vista previa:
1. ir a: Canales de ventas > Tienda en línea > Temas > Biblioteca de temas.
2. busque el tema que desea probar.
3. haga clic en los tres puntos (Acciones)
4. Haga clic en "Vista previa" y copie el enlace.
Su enlace de previsualización tendrá este aspecto: https://deinshop.myshopify.com/?preview_theme_id=1234567890
El número que aparece al final del enlace (1234567890) es el ID del tema que necesita.
Ahora haga lo mismo para su tema actual y copie el ID del tema aquí también.
Paso 3: Crear experimento
Cree un nuevo experimento. Para ello, simplemente introduzca la página de inicio de su tienda como la URL del editor en el panel de control de Varify. A continuación, haga clic en "Añadir JS" y añada el siguiente JavaScript al experimento.
// Wait until the theme instance is present on the page…
window.varify.helpers.waitFor(
'[data-theme-instance-id="143807480072"]',
(themeElement) => {
// …then run your redirect logic.
(function () {
const url = new URL(window.location.href);
const params = url.searchParams;
const shadow = document.querySelector('div#varify-shadow-root');
// only redirect when the variation-param is missing AND the shadow-root isn't present
if (!params.has('pb') && !shadow) {
params.set('preview_theme_id', '178703466760');
params.set('pb', '0'); // hide the preview bar
// replace so you don’t add a new history entry
window.location.replace(url.toString());
} else {
console.log('Redirect skipped:', {
hasVarifyVariation: params.has('varify-variation-id'),
varifyShadowRootExists: !!shadow
});
}
})();
}
);
En cuanto el fragmento de código se haya personalizado con los nuevos ID de tema, puede hacer clic en "Finalizado" y dar un nombre adecuado al experimento. A continuación, abra "Segmentación de páginas" en el experimento y cambie el "Tipo de coincidencia" de "Coincidencia simple" a "Contiene". A continuación, haga clic en "Guardar orientación de página".
Etapa 4: Selección de objetivos y garantía de calidad
Una vez que haya implementado el JavaScript y el CSS y haya guardado el experimento, puede guardar la URL de su tienda en la página de destino del experimento. También puede utilizar los enlaces "Vista previa" para comprobar si la redirección funciona y si todos los ajustes se han realizado correctamente.
Paso 5: Iniciar el experimento
Ahora inicia el experimento con "Iniciar experimento". A partir de ahora, 50% de tus visitantes serán dirigidos al nuevo tema y 50% seguirán viendo el tema antiguo. Los visitantes permanecerán asignados siempre a la misma variante mientras dure el experimento. Esto significa que el tema que han visto una vez, lo volverán a ver durante el experimento. Al cabo de un tiempo, reconocerá qué tema funciona mejor.
Primeros pasos
Integraciones de análisis web
Crear experimento
Dirigiéndose a
Seguimiento y evaluación
- Seguimiento con Varify.io
- Evaluación GA4 en Varify.io
- Informes segmentados y filtrados
- Evaluación basada en la audiencia en GA4
- Evaluación por segmentos en GA 4
- Matomo - Análisis de resultados
- evaluación de etracker
- Calcular la significación
- Eventos de clic personalizados
- Evaluar eventos personalizados en informes exploratorios
- GA4 - Seguimiento entre dominios
- Seguimiento con Varify.io
- Evaluación GA4 en Varify.io
- Informes segmentados y filtrados
- Evaluación basada en la audiencia en GA4
- Evaluación por segmentos en GA 4
- Matomo - Análisis de resultados
- evaluación de etracker
- Calcular la significación
- Eventos de clic personalizados
- Evaluar eventos personalizados en informes exploratorios
- GA4 - Seguimiento entre dominios
Editor visual
- Refuerzo de campaña: Flecha arriba
- Refuerzo de campaña: Capa de intención de salida
- Refuerzo de campaña: Barra de información
- Refuerzo de campaña: Notificación
- Refuerzo de campaña: Barra USP
- Añadir enlace de destino
- Modo navegación
- Selector personalizado
- Editar contenido
- Editar texto
- Mover elementos
- Ocultar elemento
- Inserción de palabras clave
- Pruebas de redireccionamiento y URL divididas
- Eliminar elemento
- Sustituir imagen
- Conmutador de dispositivos sensible
- Cambios de estilo y diseño
- Refuerzo de campaña: Flecha arriba
- Refuerzo de campaña: Capa de intención de salida
- Refuerzo de campaña: Barra de información
- Refuerzo de campaña: Notificación
- Refuerzo de campaña: Barra USP
- Añadir enlace de destino
- Modo navegación
- Selector personalizado
- Editar contenido
- Editar texto
- Mover elementos
- Ocultar elemento
- Inserción de palabras clave
- Pruebas de redireccionamiento y URL divididas
- Eliminar elemento
- Sustituir imagen
- Conmutador de dispositivos sensible
- Cambios de estilo y diseño