¿Cómo puedo integrar los widgets de valoración de producto en mi sitio web?

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?

Una pregunta primero: ¿Has integrado tus productos de Trusted Shops en tu sitio web mediante un plugin? Con muchos de nuestros plugins, puedes integrar widgets en unos pocos clics, incluso si no tienes muchos conocimientos técnicos. Por eso, no es mala idea comprobar primero si tu plugin es compatible con la integración de widgets:
 
  1. Abre tu plugin de Trusted Shops.
  2. Comprueba que tu plugin tenga la pestaña «Widgets».
¿Tienes la pestaña «Widgets» en tu plugin? En ese caso, sigue estas instrucciones: Mostrar las opiniones de servicio y producto en tu tienda
¿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.

  1. Inicia sesión en el Centro de Control de eTrusted.
  2. Haz clic en la estrella («Valoraciones») (01_16x16.png) en el menú de navegación principal. A continuación, haz clic en «Marketing» (02_16x16.png).
  3. Abre la pestaña «Widgets» (03_16x16.png).
    01_ES.png
  4. 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.
    02_ES.png
  5. 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.
    03_ES.png
  6. ¿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».
    04_ES.png
    Se abre un menú desplegable. Selecciona uno de los colores propuestos (01_16x16.png) o introduce el valor hexadecimal del color deseado en el campo de entrada (02_16x16.png). Luego, haz clic en «Aplicar» (03_16x16.png).
    05_ES.png
  7. ¿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».
    06_ES.png
  8. ¿Estás configurando el widget «Lista completa de valoraciones»? A continuación, activa los fragmentos enriquecidos (Rich Snippets) si así lo deseas.
    07_ES.png
Los fragmentos enriquecidos (Rich Snippets) son resultados de búsqueda mejorados que proporcionan información adicional sobre el contenido de una página web. Pueden ser utilizados por los motores de búsqueda para resaltar visualmente el resultado real de la búsqueda. La información necesaria para ello proviene de datos estructurados almacenados en el código fuente de la página. Al habilitar los fragmentos de código enriquecidos, el widget proporciona esta información a los motores de búsqueda.
  1. 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.
    08_ES.png
  2. Marca «Mostrar imágenes» si las fotos de productos cargadas por tu cliente deben mostrarse en el widget.
Las fotos de los productos se pueden mostrar en los siguientes widgets: Carrusel de valoraciones, Voz del cliente, Lista completa de valoraciones.

09_ES.png

  1. Haz clic en «Crear código de widget». Se abre la vista general «Cómo integrar el widget en tu sitio web».
    10_ES.png
  2. Utiliza el menú desplegable para seleccionar la etiqueta del producto que estés utilizando.
    04_ES.png

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.

¿No tienes los conocimientos técnicos necesarios para insertar el código de tu widget en el HTML de tu sitio web? En ese caso, haz clic en «Copiar todas las instrucciones». A continuación, solo tienes que abrir el texto que desees y pegar el código del widget en el documento de texto. Acto seguido, envía el documento de texto a los administradores de tu sitio web.
05_ES.png

¿Deseas integrar tú mismo el código del widget en el HTML de tu sitio web? En ese caso, sigue estos pasos:

  1. 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.
    06_ES.png
  2. 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).
El código JavaScript para la cabecera solo se necesita una vez, aunque implementes más de un widget en tu sitio web.
  1. 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.
    07_ES.png
  2. 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.
  3. 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.

¿Quieres que las valoraciones de varias variedades de productos (por ejemplo, diferentes tallas de ropa de la misma prenda) se muestren en el mismo widget? En ese caso, puedes insertar varias etiquetas de producto en la ubicación que se muestra en el paso 5. Separa las etiquetas de cada producto con una coma.
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.

  1. 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.
    08_ES.png
  2. 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.
  3. Vuelve a la vista general «Cómo integrar el widget en tu sitio web». Haz clic en «Creacción completa de widgets».
    09_ES.png

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?


¿Ha sido útil el artículo?

Usuarios a los que les pareció útil: 4 de 9