Manual VTEX CRUCE

Historial de versiones

Fecha	Versión	Editó	Revisó	Descripción
20/07/2022	1.0			Publicación inicial
20/07/2022	1.1			Agregado de Alta IO para ambientes con Legacy
02/11/2022	1.2			Agregado de consideraciones y palabras sustitutas IS
24/11/2022	1.3			Agregado de Catalogación (campos de producto y SKU)
18/01/2023	1.4			Agregado de Programación banners, Consideraciones MPV2, Carruseles
25/01/2023	1.5			CheckList Pre GoLive de Implementación y Migración IO

1. Definición

En este documento se registrarán todas las consideraciones, configuraciones o recomendaciones sobre la plataforma VTEX. Para el seguimiento de esté documento se utilizará la siguiente task: Manual VTEX/CRUCE

1. Consideraciones

2. Funcionalidades que requieren sitio productivo

Las siguientes funcionalidades de VTEX requieren que el ambiente se encuentre en modo productivo:

1. Carrito abandonado IO - Notificado en el ticket 630410 el 03/08/22.

2. Embudo de conversión Insights - Notificado en el ticket 654850 el 28/11/22.

3. Configuraciones

4. Alta de VTEX IO en ambiente nuevo

Antes de proceder con el alta de VTEX IO en el ambiente, primero deberemos verificar que ya no esté activado. Esto lo podremos verificar si dentro del ambiente de visualización las siguientes opciones en CMS:

Si no se observa la herramienta Site Editor dentro del CMS vamos a confirmar que aún no está activo VTEX IO.

Para poder activar VTEX IO en un ambiente, se deberá levantar un ticket a VTEX desde https://help.vtex.com/es/support y seguir los siguientes pasos:

1. Elegir a qué cuenta se le va a activar VTEX IO.

1. Seleccionar la opción de ayuda “Técnico”.

1. Completar el formulario como vemos a continuación.

1. Seleccionar la segunda opción y en el recuadro de detalle solicitar la activación de VTEX IO.

Aclaración 1: la palabra “cuenta” se deberá reemplazar por el nombre de la tienda en la que se busca activar VTEX IO.

Aclaración 2: en caso de que la tienda cuente con un front en legacy, ver el punto Alta de VTEX IO en ambiente con Legacy.

1. Enviar la solicitud y esperar la respuesta del soporte de VTEX.
2. Una vez que el soporte de VTEX nos confirme la activación, podremos verificar la misma si vemos que en el ambiente se visualizan las siguientes opciones dentro del CMS:

1. Alta de VTEX IO en ambiente con Legacy

Seguir todos los pasos del punto 1.1 a excepción de que en el punto 4 se deberá aclarar en el mensaje del ticket lo siguiente:

“Además, vamos a necesitar que se cree un workspace en el ambiente donde se deberá levantar el front actual de legacy”

De esta manera podremos corroborar que el sitio en el workspace funcione de la misma manera que en producción. Una vez verificamos eso se puede proceder con la instalación en master.

En caso de no realizar este procedimiento, al hacer clic en “ver en el sitio web” dentro del catálogo del admin de VTEX se mostrará un error similar al siguiente:

1. Instalación Intelligent Search

Antes de poder realizar la instalación de Intelligent Search, será necesario contar con el cliente de VTEX IO instalado en la computadora. La documentación para realizar la instalación la podemos encontrar acá

Pasos a seguir:

1. Abrir la terminal
2. Escribir el siguiente comando: vtex login nombre de la tienda
3. Loguearse desde la pestaña del explorador que se haya abierto
4. Una vez logueado, volver a la terminal y poner el siguiente comando: vtex list
5. Luego, instale la app en el workspace master con el siguiente comando: vtex install vtex.admin-search vtex.search-resolver@1.x
6. Cuando finalice la instalación, ir al ambiente y a la sección “Configuración de la tienda / Búsqueda / Configuración de la integración” y hacer clic en INICIAR LA INTEGRACIÓN

Documentación de VTEX

1. Palabras sustitutas (keywords) en Intelligent Search

Debido a que el campo de producto o categoría “palabras sustitutas (keywords)” está pensado para VTEX Search, si queremos que VTEX Intelligent Search lo pueda indexar, se deberá solicitar la configuración mediante ticket por cada cuenta.

Esto fue confirmado por VTEX en el ticket 682831 el 21/10/22 y en la documentación ¿Cómo funciona VTEX Intelligent Search?

1. Search

Problemas:

1. Dependiendo del tipo de dispositivo, en mobile el search oculta la lupa de búsqueda y en ocasiones también la X para borrar el término a buscar.

2. Al navegar (desktop y mobile), dependiendo de la propiedad que se ponga en el componente type=search / type=text, la navegación no se hace correctamente, impidiendo que el usuario pueda buscar algo.

Si el type es “text” se navega correctamente, pero se posee el problema 1; si es el otro, ocurre el problema 2. Las soluciones no son compatibles.

Solución: Desde VTEX nos recomendaron tener 2 versiones distintas del componente para cada caso. Aplicando esto se pueden “esquivar” estos problemas. Por lo tanto, lo correcto sería tener un conditional-layout para desktop y mobile: Desktop con la propiedad type text, y Mobile con la propiedad type search.

Esto fue confirmado por VTEX en el ticket 689200 el 10/11/22

1. Programación de banners con Site Editor

Para realizar la programación de banners mediante Site Editor se puede seguir lo detallado en esté video hecho por .

Además, tenemos la siguiente documentación de referencia:

• Gestión de versiones de contenido

1. Consideraciones para Gateway MercadoPago V2

A todos los clientes que activen el gateway de MPV2, vamos a cargarle el siguiente código dentro del input Ingrator ID (dejo imagen de referencia):

dev_0f085016142b11ed91b40242ac130004

Esto es para que la MP sepa cuales son los clientes que trabajan con nosotros y el nivel de facturación asociado. El único problema es que no se puede cargar este ID al gateway MPV1, por lo que deberíamos ofrecer a los clientes migrar a esta nueva versión de manera progresiva.

1. Carruseles de productos

En VTEX IO podemos utilizar 2 tipos de carruseles:

1. Productos relacionados (shelf.relatedProduct)

• Documentación: vtex.shelf@1.47.2
• Es un componente deprecado
• Las opciones que se pueden elegir son las siguientes:
• Productos similares
• Quién vio esto, también vio…
• Quién compró esto, también compró…
• Productos de accesorios
• Quien vio esto, también compró…
• Sugerencias
• No puede traer de manera nativa la Descripción Adicional (descripción corta) de los productos.
• Puede traer el MetaTag, por lo que podemos recomendar al cliente que replique la misma información en ambos campos.

1. Lista de Productos (ProductSummaryList)

• Documentación: vtex.product-summary@2.80.1-perftest.1

1. Ficha de producto Sin Stock

Para la configuración de la ficha de producto Sin Stock existen 2 alternativas:

1. Availability Subscriber
2. Availability Notify

Si bien el primero funciona y no está deprecado se recomienda utilizar el segundo, el cual ahorra una configuración extra con master data y además trae su propio panel en donde podemos exportar y hacer varias cosas con los mails de los usuarios que llenaron el formulario.

---

1. Catalogación
2. Campos de producto

Campo	SEO	Obligatorio	Límite de**caracteres**	Definición
Nombre (Name)	SI	SI	150	Relacionado al producto que se está registrando. Utilice palabras sencillas y evite otros idiomas o escritura compleja.
Palabras Sustitutas (Keywords)	NO	NO	8000	Sinónimos de términos relacionados al nombre dado para su departamento o categoría.
TextLink	NO	SI	255	Utilizado para crear la URL del producto. Campo obligatorioInfo: ¿Cómo definir la URL de un producto?
Título de la página (Metatag Title)	SI		–	Texto que queda en la pestaña del navegador y corresponde al título de la página del producto.
Descripción del producto		NO	–	Un resumen sencillo y de fácil comprensión para el cliente sobre el producto. Para incluir saltos de línea y otras características de formato en la descripción de su producto, debe utilizar HTML.
Descripción (Metatag Description)	SI	NO	150	Breve descripción de la categoría.
Marca		SI	NA
Categoría		SI	NA
Categoría Global VTEX		SI	NA
Políticas comerciales (Tiendas)	NO	SI	NA	Debe marcar la tienda o las tiendas a que el producto se destina. Si no marca ninguna opción, el producto, si está activo, aparecerá en todas las tiendas.
Fecha de lanzamiento	NO	NO	NA	Utilizado para auxiliar en la ordenación del resultado de búsqueda del sitio. Puede ser una forma de crear colección automática.
Mostrar en la tienda	NO	SI	NA	Activa o inactiva la visibilidad de un producto en su tienda
Mostrar producto agotado	NO	NO	NA
Código de referencia de producto		NO	200	Se puede utilizar para una integración de precio, stock, etc.
Descripción adicional (DescriptionShort)		NO		Un resumen del producto que se podrá visualizar en las cards de listado, carruseles o FDP.
Código fiscal	NO	NO	50	número de identificación del producto.
Proveedor	NO	NO	NA
Score	NO	NO		Utilizado para definir la prioridad en la página de resultados de búsqueda

Documentación VTEX:

• Llenar campos de registro de producto
• Products Data Model

1. Campos de SKU

Campo	SEO	Obligatorio	Límite de caracteres	Definición
Nombre del Producto	SI	SI	NA	Ya está completado con el nombre del producto al que pertenecerá el SKU
Nombre		SI	200	Debe contener el nombre del SKU, es decir, la variación del producto
Valor de Fidelidad		NO	NA	Crédito que el cliente recibe al realizar la compra de 1 unidad de un determinado SKU. Poniendo “1,00” en este campo, el cliente gana un crédito de $ 1,00 en el sitio web.
EAN13		SI	13	Código de barras.No se puede utilizar para una integración de precio, stock, etc.
Código de Referencia		NO	50	Código de referencia único creado para añadir una identificación al producto. Por ejemplo, puede ser el código del producto en el ERP del cliente. Se puede utilizar para una integración de precio, stock, etc.
Peso para Flete		SI		Unidad: gramos
Altura para Flete		SI		Unidad: cm
Anchura para Flete		SI		Unidad: cm
Longitud para Flete		SI		Unidad: cm
Peso Real		NO		Unidad: gramos
Altura Real		NO		Unidad: cm
Anchura Real		NO		Unidad: cm
Longitud Real		NO		Unidad: cm
Fecha de Previsión de Llegada (preventa)		NO	NA	Formato: dd/mm/aaaaFecha prevista de llegada del producto
Accesorios		NO	NA	Añade nuevos SKUs al SKU que se está registrandoGenera un checkbox donde el cliente puede hacer clic y ya hacer la compra de ambos ítems
Sugeridos		NO	NA	Sugiere nuevos SKUs al SKU que se está registrando
Similares		NO	50	Mostrar en la página del producto otras opciones que son similares al mismo
Mostrar Junto		NO	NA
Código Condición Comercial		NO	NA	Definir promociones/reglas de pago en cuotas específicas para SKUs
Unidad de Medida		SI
Multiplicador de Unidad		SI		Multiplica la cantidad seleccionada del producto cuando se agrega al carrito.
Activar SKU si es posible		SI	NA	Campo que activa el SKU si cumple todos los requisitos necesarios para la activación.
¿SKU Activo?		SI	NA	Define si el SKU existente está activo o no automáticamente.
Código del Fabricante		NO	100	Proporcionado por el fabricante para identificar su producto.

Documentación VTEX:

• Llenar campos de registro de SKU
• SKUs Data Model

1. Checklist Pre Go Live

2. Implementación IO

Nº	Tarea	Documentación y observaciones	Días hábiles max. antes del GoLive
1	Prueba de integraciones	Junto al equipo de backend y el cliente se deberán probar las integraciones de stock, precio, órdenes, etc en un ciclo completo	15
2	Prueba de transportista	Probar que las órdenes generadas en VTEX lleguen al dashboard del transportista y que el transportista envíe el número de seguimiento a VTEX	15
3	Prueba de gateway de pago en modo prueba	Se deberán realizar compras de prueba donde se verifique el correcto funcionamiento del gateway de pago y sus diferentes condiciones de pago	15
4	QA Diseño	El equipo de diseño deberá realizar una revisión del sitio para verificar la fidelidad con el prototipo	15
5	Correcciones frontend	El equipo de frontend deberá comenzar a realizar los ajustes relevados por el equipo de diseño en el punto 3	10
6	Realizar compras de prueba	Con el fin de probar el flujo de compra del ecommerce, se deberán realizar diferentes compras de prueba validando el correcto funcionamiento de todas las pantallas	10
7	Validar funcionamiento de key de Google Maps	Se deberá validar el correcto funcionamiento de la Key de Google MapsDocu: Creación de APIs Google Maps - V2.1	10
8	Instalar y configurar Google Tag Manager (GTM)	Se deberá instalar y sincronizar con la cuenta de GTM proporcionada por el cliente:> Installing Google Tag Manager> Integrar con Google Tag ManagerAdemás, se le puede ofrecer aplicar la configuración recomendada por VTEX en GTM:> Setting up Google Tag Manager	5
9	Configurar SEO y Favicon	Desde el admin de VTEX se deberá configurar:1. SEO: accediendo a https://{account}.myvtex.com/admin/Site/ConfigSEOContents.aspx completando la información junto al cliente.2. Favicon: desde https://{account}.myvtex.com/admin/cms/store seleccionando el icono que se visualizará en la pestaña del explorador.	3
10	Verificar dominio con Google Search Console (GSC)	Se deberá verificar el dominio del sitio dentro de GSC siguiendo la siguiente documentación:> Verificar propiedad en el Google Search Console de tienda VTEX> App: Google Search Console	3 en caso de nuevo dominio1 en caso de dominio con ECOM funcional
11	Apuntamiento de DNS y todos sus redireccionamientos	Con ayuda del cliente, o ingresando al host del dominio, se deberá realizar el apuntamiento de DNS considerando:> TTL: menor a 5 minutos> Documentación: Realizar el apuntamiento de DNSAdemás, en este momento se recomienda dejar configurados todos los redireccionamientos necesarios	3 en caso de nuevo dominio1 en caso de dominio con ECOM funcional
12	Colocar credenciales productivas del gateway de pago y probarlas	Para validar el correcto funcionamiento del gateway de pago en modo productivo, se deberán colocar las credenciales productivas y realizar una compra de prueba exitosa.	3
13	Levantar ticket de GoLive a VTEX	Se deberá levantar un ticket a VTEX indicando:> URL Ambiente: url ambiente VTEX> URL Dominio: definida en punto 11> Tecnología: VTEX IO> Si utilizarán proxy inverso: Si/No> TTL: definido en punto 11> Tienda en modo productivo: Si/No	2
14	Pasar tienda a producción	Desde el admin de VTEX, en “Config de la cuenta / Cuenta”:1. Habilitar el check: “¿Está en producción?“2. En “Tienda” completar la información de “Hosts” con la url informada a VTEX	1
15	Publicar nueva versión de GTM	Se deberá publicar la nueva configuración de GTM realizada en el punto 8	0

1. Migración IO

Nº	Tarea	Documentación y observaciones	Días hábiles max. antes del GoLive
1	QA Diseño	El equipo de diseño deberá realizar una revisión del sitio para verificar la fidelidad con el prototipo	15
2	Correcciones frontend	El equipo de frontend deberá comenzar a realizar los ajustes relevados por el equipo de diseño en el punto 3	10
3	Instalar y configurar Google Tag Manager (GTM)	Se deberá instalar y sincronizar con la cuenta de GTM proporcionada por el cliente:> Installing Google Tag Manager> Integrar con Google Tag ManagerAdemás, se le puede ofrecer aplicar la configuración recomendada por VTEX en GTM:> Setting up Google Tag Manager	5
4	Levantar ticket de Migración IO a VTEX	Se deberá levantar un ticket a VTEX indicando:> workspace donde está alojado el sitio IO.> URL Dominio donde está el sitio Legacy> Si utilizarán proxy inverso: Si/No	2
5	Publicar nueva versión de GTM	Se deberá publicar la nueva configuración de GTM realizada en el punto 3	0