La insignia de Reseñas de Clientes en Google se ha actualizado al nuevo widget de tienda. Esta versión actualizada incluye un nuevo diseño y opciones de visualización más destacadas para resaltar mejor la valoración de su tienda, el número total de reseñas y la información sobre la calidad en su sitio web.
El código del widget de tienda es el primero de los dos fragmentos de código que se implementan para integrar el código del widget de tienda. El widget es opcional.
Secciones de esta página:
Instrucciones para la integración
Para integrar el widget de tienda en una página, debe:
Estas tareas se describen en las siguientes secciones.
Después de implementar el código del widget en las páginas, se mostrará uno de los siguientes widgets:
| Widget de Tienda de Calidad Excelente | Widget de valoración de tienda | Widget de Calidad de la tienda |
| Cuándo: | Cuándo: | Cuándo: |
Si actualmente usa la insignia antigua, se mostrará una de las tres versiones del widget en función de la valoración de calidad de su tienda.
No oculte el widget con ningún otro contenido en sus páginas.
Actualizar el elemento DOCTYPE
Las páginas web en las que se implemente el widget deben utilizar DOCTYPE de HTML5:
<!DOCTYPE html>
Este elemento debe ser el primer elemento de línea del código HTML de la página. Usar el DOCTYPE de HTML5 garantiza que los navegadores web procesen las páginas en el modo estándar en lugar de en el modo Quirks. El modo Quirks es una técnica que se utiliza en algunos navegadores web para mantener la compatibilidad con las páginas web diseñadas para navegadores más antiguos, en lugar de cumplir estrictamente los estándares de W3C e IETF en el modo estándar.
Añadir el widget de tienda
Incluya el widget de tienda en cualquier página del sitio web para mostrar a los clientes que usa Reseñas de Clientes en Google.
Para añadir el widget de tienda a su sitio:
- Vaya a la interfaz donde pueda editar el código HTML de su sitio web. Para ello, elija el paso que más se ajuste a su caso:
- Busque el código fuente HTML que se aplica a todas las páginas de su sitio.
- Vaya a la página concreta en la que quiera mostrar el widget.
- Copie y pegue el código que se muestra a continuación dentro de la sección
<head>del código HTML.-
Opcional: De forma predeterminada, el widget aparecerá fijado en la parte inferior derecha de la página. Si quiere colocar el widget en la parte inferior izquierda de la página, sustituya la sección amarilla del código que aparece abajo por
LEFT_BOTTOM.
-
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://www.gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
position: 'RIGHT_BOTTOM'
});
});
</script>
<!-- END MerchantWidget Code →
- Los comerciantes también pueden personalizar la posición del widget. Al hacerlo, se introducen 4 parámetros:
- sideMargin: número de píxeles del widget hasta el borde lateral. Cuando la posición se establece en LEFT_BOTTOM, es el margen del borde izquierdo y, cuando está en RIGHT_BOTTOM, es el margen del borde derecho. El valor predeterminado es 36.
- bottomMargin: número de píxeles del widget hasta el borde lateral. El valor predeterminado es 36.
- mobileSideMargin: es sideMargin en las pantallas móviles. El valor predeterminado es 16.
- mobileBottomMargin: es bottomMargin en las pantallas móviles. El valor predeterminado es 46.
A continuación, se muestra un ejemplo de cómo personalizar la posición:
<script id='merchantWidgetScript' src="https://www.gstatic.com/shopping/merchant/merchantwidget.js" defer></script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
position: 'LEFT_BOTTOM',
sideMargin: 21,
bottomMargin: 33,
mobileSideMargin: 11,
mobileBottomMargin: 19
});
});
</script>
Después de la configuración, su código HTML debería ser como el que se muestra a continuación. Compruebe que la primera línea de su archivo HTML sea <!DOCTYPE html>:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Google</title>
<meta charset="UTF-8">
<meta name="description" content="Ejemplo de página HTML con una sección de título">
<meta name="keywords" content="HTML, sample, head section">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js" defer></script>
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://www.gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({});
});
</script>
<!-- END MerchantWidget Code --> // <- ponga este código en la sección de título
</head>
<body>
<h1>Te damos la bienvenida a Google </h1>
<p>Este es un documento HTML básico</p>
<p>Visita la <a href="https://www.google.com">página principal de Google</a>.</p>
<script>
function greetGoogle() {
alert('¡Hola, Google! ¡Que tenga un buen día!');
}
greetGoogle();
</script>
</body>
</html>
- También puede personalizar las regiones (opcional). Si no se define, el widget usará la lógica de globalización para determinarla.
Cómo quitar un fragmento de código de widget de tienda antiguo
Instrucciones:
- Ve al código HTML de tu sitio web y busca el código de widget de tienda.
- Elimina el siguiente código HTML para quitar el widget.
O
Si comentas el siguiente código, también se eliminará de tu sitio web.
<script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script>
<script>
window.renderBadge = function() {
var ratingBadgeContainer = document.createElement("div");
document.body.appendChild(ratingBadgeContainer);
window.gapi.load('ratingbadge', function() {
window.gapi.ratingbadge.render(ratingBadgeContainer, {"merchant_id": 0});
});
}
</script>
Preguntas frecuentes
¿Cómo se renderizarán el widget y el panel en la vista para móvil en comparación con la vista para ordenador?
Mi sitio web se gestiona con Shopify. ¿Puedo implementar esta función?
- Nota: Algunos comerciantes de Shopify nos indican que Shopify truncará automáticamente todos los espacios de la secuencia de comandos. Los espacios de la secuencia de comandos son intencionados, por lo que debe asegurarse de que no aparezcan truncados.
¿De dónde proceden los datos que se muestran en el panel? ¿Cómo puedo ver mi rendimiento en el programa?
¿Pueden los clientes cerrar el widget por completo?
El widget siempre estará visible. El cliente puede hacer clic en el widget para maximizar el panel y, cuando esté abierto, puede hacer clic en el icono de cerrar para minimizarlo, aunque el widget se mantiene visible.