Tutorial básico de etiquetas de IA

Siga este tutorial para crear un widget básico de etiquetas de IA. Antes de empezar, verifique con su gerente de cuenta que las etiquetas de IA estén configuradas para su cuenta y que se hayan generado.

1. Configuración de su tienda

Necesitará una URL (página) para mostrar su Explorador de etiquetas, junto con una ubicación en la página para incrustar.

Página del Explorador de etiquetas

Sugerimos añadir una página a su sitio que incluya su 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>

Tenga en cuenta que el lugar donde incruste el Explorador de etiquetas de productos debe incluir los márgenes y el relleno normales de su página, pero debe poder redimensionarse como lo haría su 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á un lugar en sus páginas de producto para incrustar las etiquetas. Un div con un ID o clase sería bueno:

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

2. Crear un Explorador de etiquetas de productos

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

Figura 1: Crear un Explorador de etiquetas de productos

En la ventana emergente que aparece, elija la opción "Product Tag Explorer" (Explorador de etiquetas de productos) y haga clic en "Next" (Siguiente).

3. Editar el Explorador de etiquetas de productos

Figura 2: Establecer la URL de visualización y el selector de incrustación

Solo necesitaremos actualizar dos configuraciones para este tutorial:

• URL de visualización: https://mystore.com/tag-explorer.html

• Selector de incrustación: #Product_Tag_Explorer

Ahora Publique su widget.

4. Crear una lista de etiquetas de productos

Navegue a la sección "Merchandising" del portal y haga clic en "Widgets" en la barra lateral izquierda. Verá una lista de widgets (debería ver su Explorador de etiquetas de productos aquí). Desde aquí, haga clic en "Add Widget" (Añadir widget) en la esquina superior derecha de la pantalla.

En la ventana emergente que aparece, elija la opción "Product Tag List" (Lista de etiquetas de productos) y haga clic en "Next" (Siguiente).

5. Editar la lista de etiquetas de productos

Figura 3: Establecer la URL de visualización y el selector de incrustación

Solo necesitaremos actualizar dos configuraciones para este tutorial.

• URL de visualización: https://mystore.com/product/*

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

• Selector de incrustación: #Product_Tag_List

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

Ahora Publique su widget.

6. Probar

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

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

Ahora debería ver una Lista de etiquetas de productos en esta página.

Haga clic en una de las etiquetas y será llevado a su página del Explorador de etiquetas de productos:

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

Tenga en cuenta que tag y product también se han añadido a la URL aquí. Debería ver el Explorador de etiquetas de productos en esta página.

Solución de problemas

No veo el widget en mi sitio

• Asegúrese de que el script de Fanplayr se esté ejecutando en su sitio
• Verifique de nuevo su URL de visualización
• Es posible que no se hayan devuelto etiquetas. Asegúrese de que el producto específico que está viendo tenga al menos una etiqueta asociada en el Portal de Fanplayr.

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

• Los widgets en vivo heredan parte del CSS de su página, incluyendo, lo más notable, el font-family que controla la apariencia de su texto. Considere usar la función Vista previa en vivo para ver cómo se verá su widget en su sitio antes de publicarlo.