La integración de un widget de valoración de producto funciona como cualquier otro widget. Solo hay una gran diferencia: es necesario proporcionar identificadores de producto.
Si quieres saber cómo aparecen los widgets en tu sitio web, echa un vistazo también a este artículo: ¿Cómo se ven los widgets en mi sitio web?
¿Qué son los identificadores de producto?
Los identificadores de producto son una serie de dígitos numéricos o alfanuméricos que identifican un determinado producto.
Los widgets de valoración de producto de eTrusted son compatibles con los más comunes:
- SKU (Stock Keeping Unit): Los SKU son identificadores únicos asignados por el comerciante.
- GTIN (Global Trading Item Number): Los GTIN identifican de forma única y global tus productos, basándose en normas internacionales. Algunos ejemplos son el ISBN o el EAN.
- MPN (Manufacturer Part Number): Los MPN identifican los productos de forma única y global. Son asignados por el fabricante del producto.
¿Puedo utilizar más de un identificador de producto?
Sí, puedes hacerlo. Incluso es necesario en el caso de productos con diferentes variantes.
Por ejemplo: supongamos que vendes camisetas en diferentes tallas. Indica para cada talla (por ejemplo, S, M, L) un identificador de producto. Puedes hacerlo añadiendo un identificador de producto tras otro y separándolos por comas.
Asegúrate de proporcionar al menos un identificador de producto. Si no eliges ninguno, no se mostrará el widget.
¿Cómo puedo añadir un widget de valoración de producto a mi sitio web?
- Abre tu plugin de Trusted Shops.
- Comprueba que tu plugin tenga la pestaña «Widgets».
¿No tienes la pestaña «Widgets» en tu plugin? En ese caso, sigue las instrucciones expuestas aquí.
Paso 1: Generación de un código de widget
En la biblioteca de widgets encontrarás todos los widgets de valoración de producto disponibles.
- Inicia sesión en el Centro de Control de eTrusted.
- Haz clic en la estrella («Valoraciones») (
) en el menú de navegación principal. A continuación, haz clic en «Marketing» (
).
- Abre la pestaña «Widgets» (
).
- Selecciona un widget de valoración de producto. A continuación, haz clic en el botón «Crear» del widget que desees. Acto seguido, se abrirá el modo de configuración del widget.
- Selecciona el esquema de color en el que debe mostrarse el widget:
- Selecciona «Claro» si el widget debe mostrarse siempre en el esquema de color estándar.
- Selecciona «Oscuro» si el widget debe mostrarse siempre en el modo oscuro.
- Selecciona «Configuración del sistema» si deseas que los ajustes del modo oscuro de tus usuarios determinen si el widget se muestra o no en el modo oscuro. - ¿Quieres utilizar un color diferente para tus estrellas de valoración y las barras de la lista completa de valoraciones? En ese caso, haz clic en el campo «Color de acento».
Se abre un menú desplegable. Selecciona uno de los colores propuestos ( - ¿Deseas utilizar la tipografía de tu sitio web en el widget? En ese caso, marca la casilla «Aplica la tipografía de tu sitio web».
- ¿Estás configurando el widget «Lista completa de valoraciones»? A continuación, activa los fragmentos enriquecidos (Rich Snippets) si así lo deseas.
- Especifica la conducta del widget para los productos que aún no han recibido una opinión:
- Marca «Oculta el widget cuando no haya opiniones disponibles» si el widget debe ocultarse por completo.
- No marques «Oculta el widget cuando no haya opiniones disponibles» si deben mostrarse estrellas grises. - Marca «Mostrar imágenes» si las fotos de productos cargadas por tu cliente deben mostrarse en el widget.
- Haz clic en «Crear código de widget». Se abre la vista general «Cómo integrar el widget en tu sitio web».
- Utiliza el menú desplegable para seleccionar la etiqueta del producto que estés utilizando.
Ya has creado correctamente tu código de widget. Ahora debes integrar el código del widget en tu sitio web.
Paso 2: Integración del código del widget en tu sitio web
Para mostrar los widgets de valoración de producto en tu sitio web, el código HTML y JavaScript debe integrarse en el encabezamiento (header) y el cuerpo (body) del código HTML de tu sitio web. Encontrarás los fragmentos de código (snippets) que necesitas para ello en la vista general «Cómo integrar el widget en tu sitio web», que se abrirá después de la creación de tu código de widget.
¿Deseas integrar tú mismo el código del widget en el HTML de tu sitio web? En ese caso, sigue estos pasos:
- Haz clic en el icono del documento en la parte superior del campo de código para copiar el fragmento de código en tu portapapeles.
- En el HTML de tu página web, abre la sección de encabezado (header). Inserta el fragmento de código (snippet) en la sección del encabezado (header).
- Vuelve a la vista general «Cómo integrar el widget en tu sitio web». Haz clic en el icono del documento en el cuadro del código central para copiar el fragmento de código (snippet) en tu portapapeles.
- Abre la sección del cuerpo (body) dentro del código HTML de tu sitio web. Pega el fragmento de código (snippet) copiado en la sección del cuerpo (body) donde quieras colocar el widget.
-
En el fragmento de código (snippet) que acabas de introducir, sustituye el valor YOUR-DATA-SKU o YOUR-DATA-GTIN o YOUR-DATA-MPN por la etiqueta del producto cuyas valoraciones deseas mostrar en el widget.
A continuación, puedes ver un ejemplo de cómo se verá el código del widget Lista completa de valoraciones.
El ejemplo muestra un producto con tres diferentes variantes. Puedes añadirlos simplemente separándolos con una coma (0055573.001, 0055573.002, 0055573.005) . Los SKU son los identificadores de producto:
<!-- Begin eTrusted widget tag -->
<etrusted-widget data-etrusted-widget-id="wdg-f6e1e50c-b07c-4a92-85fb-14b6feab9ea6" data-sku="0055573.001,0055573.002,0055573.005"></etrusted-widget>
<!-- End eTrusted widget tag -->
Los pasos 6 y 7 siguientes son pasos opcionales para el widget «Lista completa de valoraciones» - Si vas a incluir otro widget, salta al paso 8.
- Vuelve a la vista general «Cómo integrar el widget en tu sitio web». El widget «Lista completa de valoraciones» ofrece la posibilidad de integrar una pequeña vista previa en estrella en cualquier punto de la página del producto, que enlaza con el widget principal. ¿Te gustaría usar esta opción? Haz clic en el icono del documento en el cuadro de código inferior para copiar el fragmento de código (snippet) en tu portapapeles.
- Abre la sección del cuerpo (body) dentro del código HTML de tu sitio web. Entonces, solo tienes que pegar el fragmento de código (snippet) en la sección del cuerpo donde desees colocar la vista previa de estrella.
- Vuelve a la vista general «Cómo integrar el widget en tu sitio web». Haz clic en «Creacción completa de widgets».
Ya has incorporado correctamente el widget a tu sitio web.
¿Ya muestras tus estrellas en Google & Co.? Obtén más información aquí:
- ¿Qué es la Integración con Google?
- ¿Por qué es una buena idea optimizar mi nota total en otras plataformas de valoraciones?