Tutorial básico de etiquetas de IA

Sigue este tutorial para crear un widget básico de etiquetas de IA. Antes de empezar, verifica con tu gestor de cuentas que las etiquetas de IA estén configuradas para tu cuenta y se hayan generado.

1. Configuración de tu Tienda

Necesitarás una URL (página) para mostrar tu Explorador de Etiquetas, junto con una ubicación en la página para incrustarlo.

Página del Explorador de Etiquetas

Sugerimos añadir una página a tu sitio que incluya tu plantilla normal (menús, etc.) pero ningún otro contenido.

Como ejemplo, definiremos una página en https://mystore.com/tag-explorer.html con un div para incrustar de esta manera:

<div id="Product_Tag_Explorer"></div>

Ten en cuenta que el lugar donde incrustes el Explorador de Etiquetas de Productos debe incluir tus márgenes y rellenos de página normales, pero debe permitírsele redimensionarse como lo haría tu contenido normal. El Explorador de Etiquetas de Productos ocupará todo el espacio necesario.

Lista de Etiquetas en la Página del Producto

También necesitarás un lugar en tus páginas de producto para incrustar las etiquetas. Un div con un ID o clase sería adecuado:

Ejemplo: <div id="Product_Tag_List"></div>

2. Crear Explorador de Etiquetas de Productos

Comienza navegando a la sección "Merchandising" del portal y haz clic en "Widgets" en la barra lateral izquierda. Verás una lista de widgets (posiblemente vacía). Desde aquí, haz clic en "Add Widget" en la esquina superior derecha de la pantalla.

Figura 1: Crear un Explorador de Etiquetas de Productos

En la ventana emergente que aparece, elige la opción "Product Tag Explorer" y haz clic en "Next".

3. Editar Explorador de Etiquetas de Productos

Figura 2: Establecer la URL de Visualización y el Selector de Inserción

Solo necesitaremos actualizar dos configuraciones para este tutorial:

• Display URL: https://mystore.com/tag-explorer.html

• Embed Selector: #Product_Tag_Explorer

Ahora Publica tu widget.

4. Crear una Lista de Etiquetas de Productos

Navega a la sección "Merchandising" del portal y haz clic en "Widgets" en la barra lateral izquierda. Verás una lista de widgets (deberías ver tu Explorador de Etiquetas de Productos aquí). Desde aquí, haz clic en "Add Widget" en la esquina superior derecha de la pantalla.

En la ventana emergente que aparece, elige la opción "Product Tag List" y haz clic en "Next".

5. Editar Lista de Etiquetas de Productos

Figura 3: Establecer la URL de Visualización y el Selector de Inserción

Solo necesitaremos actualizar dos configuraciones para este tutorial.

• Display URL: https://mystore.com/product/*

La URL de visualización utiliza un * porque queremos que la lista de etiquetas se muestre en todas las páginas de producto.

• Embed Selector: #Product_Tag_List

Este es el ID que añadimos a un div que creamos anteriormente.

Ahora Publica tu widget.

6. Prueba

En tu sitio, ve a cualquier página de producto. En este ejemplo sería algo como:

https://mystore.com/product/big-red-shoes.html

Ahora deberías ver una Lista de Etiquetas de Productos en esta página.

Haz clic en una de las etiquetas y deberías ser redirigido a tu página del Explorador de Etiquetas de Productos:

https://mystore.com/tag-explorer.html?tag=Red&product=big-red-shoes

Ten en cuenta que tag y product también se han añadido a la URL aquí. Deberías ver el explorador de Etiquetas de Productos en esta página.

Solución de Problemas

No veo el widget en mi sitio

• Asegúrate de que el script de Fanplayr se esté ejecutando en tu sitio.
• Vuelve a verificar tu URL de Visualización
• Es posible que el modelo seleccionado no haya devuelto ningún producto. Si no se devuelven productos, el widget no se mostrará. De manera similar, si el modelo seleccionado se basa en un producto que se está viendo actualmente, el widget solo se mostrará en las páginas de producto.

Mi widget se ve un poco diferente en vivo que en el editor

• Los widgets en vivo heredan algunos CSS de tu página, incluyendo, de manera más notable, la font-family que controla la apariencia de tu texto. Considera usar la función de Vista Previa en Vivo para ver cómo se verá tu widget en tu sitio antes de publicarlo.