Saltar al contenido principal

Varify® Snippet - Integración

Última actualización el 22 abr 20263 min de lectura
Índice de contenidos

En resumen​

Integrar el snippet de Varify.io® en tu sitio web o sistemas de tienda se puede hacer rápidamente. Lo mejor es incluir el snippet de JavaScript en la etiqueta <head> de tu página web para evitar el parpadeo de la página. Si es necesario, también puedes usar un tag manager para la integración.

Si no puedes integrar el snippet de inmediato, puedes probar nuestra extensión de Google Chrome .

Implementación del snippet​

Integración en el área del sitio web (recomendado)​

Si quieres integrar el snippet de Varify.io en tu sitio web, es importante colocarlo lo más arriba posible en la página, idealmente en el área <head>. Esto asegura que el snippet se cargue correctamente y sin retrasos.

Tienes dos opciones para integrar el snippet: síncrona y asíncrona. Ambas tienen sus propias ventajas y desventajas.

Dependiendo de los requisitos específicos y la estructura de tu sitio web, decides qué método de implementación es mejor para ti.

Cómo integrar el script de Varify.io de forma síncrona​

VentajaDesventaja
Garantiza que el script se cargue antes de que se muestre la página web.Puede aumentar el tiempo de carga de la página web si hay problemas al cargar el script.
Sin parpadeo de la páginaSi el script no se carga, es posible que toda la página web no se muestre.
<!-- Varify.io® code for YOUR ACCOUNT-->
<script>
  window.varify = window.varify || {};
  window.varify.iid = YOUR ACCOUNT ID;
</script>
<script src="https://app.varify.io/varify.js"></script>
important

Importante: En la línea 4, sustituye «YOUR ACCOUNT ID» por el ID de cuenta de tu dashboard.

Cómo integrar el script de Varify.io de forma asíncrona​

VentajaDesventaja
No afecta al tiempo de carga de la página web, porque la página web se carga en paralelo.Existe la posibilidad de que se ejecuten primero otros scripts, lo que puede provocar efectos secundarios extraños.
La página web seguirá cargando incluso si hay problemas al cargar el script.Puede producirse un parpadeo de la página
<!-- Varify.io® code for YOUR ACCOUNT-->
<script>
  window.varify = window.varify || {};
  window.varify.iid = YOUR ACCOUNT ID;
</script>
<script async src="https://app.varify.io/varify.js"></script>
important

Importante: En la línea 4, sustituye «YOUR ACCOUNT ID» por el ID de cuenta de tu panel.

Integración mediante el Tag Manager​

Integrar el snippet de JS a través de Google Tag Manager es una forma rápida de integrar Varify.io® en tu sitio web. Sin embargo, esta opción también conlleva el riesgo de que se produzca un efecto de parpadeo visible durante la entrega de una variación.

Simplemente crea una etiqueta HTML personalizada en tu Tag Manager e inserta el snippet de código JavaScript. Como activador, selecciona la opción para disparar la etiqueta en todas las páginas lo antes posible. Una opción sería, por ejemplo, "Initialization - All pages". Ten en cuenta que puede haber otras opciones dependiendo de la configuración de tu sitio web.

important

Asegúrate de reemplazar "xxx" después de "window.varify.iid =" en la captura de pantalla con tu ID de cuenta.

Etiqueta de Google Tag Manager de tipo «Custom HTML» que contiene el snippet de Varify, disparada por el activador «Initialization – All Pages».

Al integrar el script de Varify a través de GTM o al integrarlo directamente en el <body>, desactiva la configuración "Start Tracking on Activation Event" en Advanced Setup. Esto garantizará que tu Varify Tracking funcione correctamente.

Advanced Setup con «Start Tracking on Activation Event» desactivado y User Group Identification configurado en Local Storage.

Prueba Varify.io mediante la extensión de Chrome​

Puedes descargar la extensión de Google Chrome para probar Varify.io. La extensión integrará el snippet de Varify.io en tu sitio web exclusivamente para ti en tu navegador. Esto significa que solo tú editas y ves las variaciones en tu navegador.

Para implementar tu snippet personalizado en tu sitio web sin tener que tocar el código, sigue los pasos a continuación:

  1. Descarga la extensión de Chrome de Varify®
  2. Activa el plugin en tu navegador
  3. Copia tu snippet de código de Varify® desde tu dashboard (Get Snippet Here) y pégalo en el campo "Your Snippet Code..." de la extensión -. ¡Listo!

Puedes encontrar una explicación más detallada sobre la instalación y activación, así como otras funciones, aquí: Extensión de navegador Chrome de Varify®

Dashboard de Varify junto al plugin de vista previa: el enlace «Get Snippet Here» y el campo de snippet del plugin están resaltados

Evita el parpadeo durante la reproducción del experimento​

El parpadeo ocurre cuando la página ya es visible antes de que Varify haya aplicado completamente la variante. La mejor manera de evitarlo es incluir el snippet en el <head>.

Si esto no es suficiente o no es técnicamente posible, también puedes usar el script anti-flicker. Puedes encontrar las instrucciones para esto en la documentación: Anti-flicker script

En esta página