Widget ID
Para poder insertar el código JavaScript del widget en su página, necesitará el identificador del widget (Widget ID). Estos se generan automáticamente al crear un widget en el editor de widgets y se pueden encontrar en la pestaña ¨Widgets¨ del panel de control de Photoslurp, como se muestra en la siguiente imagen:
Código de Configuración del Widget
Este código se utiliza para adaptar el comportamiento del widget a la página donde se muestra. Todas las páginas que muestren un widget deben insertar el código de configuración del widget antes del código de inserción del widget.
El parámetro "lang" es necesario para cada widget, de lo contrario no se aplicarán las traducciones establecidas en el editor de widgets. Los parámetros "productId" y "productType" tienen sus casos de uso específicos y son opcionales.
<!-- Start Photoslurp Widget Configuration Code -->
<script>
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings["COPIAR AQUÍ EL WIDGET ID DESDE EL EDITOR DE WIDGETS"] = {
lang: 'INSERTAR CÓDIGO DE IDIOMA AQUÍ',
// DESCOMENTAR LOS CAMPOS A CONTINUACIÓN QUE SE DESEEN USAR
// productId: ['INSERTAR ID DE PRODUCTO DESDE LA PLANTILLA'],
// productType: ['VALOR PRODUCT TYPE 1', 'VALOR PRODUCT TYPE 2', '...']
};
</script>
<!-- End Photoslurp Widget Configuration Code -->- lang (código de idioma para la tienda en que se está usando)
Este parámetro establece en qué idioma se mostrarán los textos del widget. Su valor debe coincidir con alguno de los códigos de idioma de los feeds de productos exportados de la tienda. Si los atributos <html> "lang" de las páginas de tu tienda coinciden con los códigos de idioma de los feeds de productos (y, consecuentemente, de sus catálogos de Photoslurp), el valor del parámetro "lang" puede establecerse como "document.documentElement.lang". - productId (identificador/SKU del producto en el catálogo Photoslurp).
Este parámetro está pensado para ser utilizado en páginas de producto, haciendo que el widget muestre primero aquellas imágenes cuyo SKU de producto asignado coincida con este valor.
Nota: Si el widget tiene activada la opción de Strict Products en el editor de widgets, no se mostrarán imágenes adicionales. En caso contrario, el resto de imágenes aprobadas en la campaña se mostrarán después de las imágenes relacionadas con el producto. - productType (valores indicados en el campo product_types del feed de productos).
Este parámetro se puede utilizar en las páginas de categorías y en las de producto, filtrando el contenido mostrado. Su valor es una lista de categorías separadas por comas (Hombres, Zapatos) o una lista con corchetes para mostrar la jerarquía (Hombres > Zapatos).
Para más información sobre Product Types o sobre como rellenar un widget con imágenes, visita las siguientes guías:
Código de inserción del Widget
Para insertar un widget en una página, sólo tienes que insertar el código que aparece a continuación en la página en la que quieras que se muestre el widget. Para cada widget creado, este código se puede encontrar en la pestaña ¨Script¨ del editor de widgets.
<!-- Start Photoslurp Embed Code -->
<div class="ps-container">
<ps-widget data-config="COPIAR AQUÍ EL WIDGET ID DESDE EL EDITOR DE WIDGETS"></ps-widget>
<script src="https://static.photoslurp.com/widget/v3/loader.js" async></script>
</div>
<!-- End Photoslurp Embed Code -->Se debe rellenar el parámetro data-config con el valor del ID del Widget
Analíticas de Widget por país
Con la configuración descrita anteriormente, el panel "Analytics" de Photoslurp proporcionará métricas por cada widget (por ejemplo, widget de página de producto, widget de galería, etc.). Si se necesitan métricas más específicas, es posible medir el rendimiento del widget por país o ubicación. Para ello, recomendamos añadir el código de idioma en el widgetId, como se hace a continuación:
<!-- Start Photoslurp Widget Configuration Code -->
<script>
window.photoSlurpWidgetSettings = window.photoSlurpWidgetSettings || {};
photoSlurpWidgetSettings["INSERT THE WIDGETID FOR THIS WIDGET"] = {
lang: 'INSERTAR CÓDIGO DE IDIOMA AQUÍ',
widgetId: 'INSERTAR WIDGETID AQUÍ|INSERTAR CÓDIGO DE IDIOMA AQUÍ',
};
</script>
<!-- End Photoslurp Widget Configuration Code -->
Ejemplo de cómo quedaría el parámetro del widgetId:
widgetId: 'Yy0_wVw|en_US'
Con esta configuración, el dashboard de “Analytics” de Photoslurp podrá mostrar métricas de un mismo widget diferenciando entre ubicaciones o países sin necesidad de usar un widget para cada uno.