Ci sono diversi modi per integrare il widget per visualizzare i contenuti scovabili.

In questo documento, troverà le diverse possibilità.

Per saperne di più, il widget può essere utilizzato per visualizzare i contenuti shoppabili.1em;"Per saperne di più sul contenuto Shoppable, legga questo articolo.🔔 Cos'è il contenuto Shoppable e come funziona?

Aggiunga questo script in qualsiasi punto della pagina del prodotto per mostrare un contenuto shoppable, il collegamento con il prodotto sarà fatto automaticamente con l'URL del prodotto che ci invia nel suo feed di prodotto.

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget></skp-widget>

Per impostazione predefinita, viene visualizzata una galleria. Se desidera mostrare solo il primo video, cambi la modalità in "miniatura"

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget mode="thumbnail"></skp-widget>

Carrousel / Slider

Visualizza tutti i media su un cursore e navighi a destra e a sinistra per sfogliare tutti i media nel contenuto acquistabile.

Le dimensioni, lo stile del bordo e i controlli di navigazione sono personalizzabili. Vedi le variabili CSS qui sotto

Esempio: Cursore 9:16

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<style> 
:root { 
--skp-thumbnail-width: 180px; 
--skp-thumbnail-height: 320px; 
} </style> 
<skp-widget> </skp-widget> 

Esempio: Cursore rotondo

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<style> 
:root { 
--skp-thumbnail-width: 200px; 
--skp-thumbnail-height: 200px;
--skp-thumbnail-border-radius: 50%;
} </style> 
<skp-widget> </skp-widget> 

Video singolo

Visualizza un'anteprima del primo video del contenuto shoppable in qualsiasi punto della pagina, utilizzando la modalità "miniatura"

Le dimensioni e lo stile del bordo sono personalizzabili. Vedi le variabili CSS qui sotto

Aggiungi al carrello

Per far funzionare il pulsante Aggiungi al carrello deve ascoltare un evento emesso dal nostro player quando viene aggiunto un prodotto.

A seconda della sua piattaforma di e-commerce, l'integrazione potrebbe essere diversa.

Può utilizzare questo evento per aggiungere il suo tracciamento su ogni aggiunta al carrello proveniente dal player. In questo modo può tracciare gli add-to-cart effettuati durante un contenuto shoppable fino alla cassa.

window.addEventListener('skp:addToCart', (evento) => { 
 const { origine, prodotto } = evento.detail 
 console.log('origin', origin); 
 console.log('product', prodotto); 

addProductToCustomerCart(prodotto); 
// Attiva la funzionalità Aggiungi al carrello con la tua implementazione 

sendTrackingToYourPlatform(origine, prodotto); 
// Invia le informazioni di tracciamento alla sua piattaforma 
})

Le informazioni sul prodotto provengono dal suo feed prodotto. Verifichi l'ID del prodotto nel feed del prodotto, deve essere lo stesso utilizzato dalla sua piattaforma di e-commerce.

Proprietà variabili CSS

Alcune proprietà CSS possono essere modificate o lasciate come predefinite.

Modalità di visualizzazione

Sono disponibili diverse opzioni per modificare il comportamento del player

Disabilita il Picture in Picture

Il player può essere ridotto per consentire ai suoi spettatori di sfogliare la pagina del prodotto mentre guardano il contenuto Shoppable senza interruzioni. Gli spettatori possono cliccare su maximize per riaprire il player principale in qualsiasi momento.

Attivato per impostazione predefinita, può disattivarlo

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget pip-mode="disable"></skp-widget>

Disabilita Aggiungi al carrello

Se non desidera utilizzare la funzione Aggiungi al carrello può disabilitarla. Il pulsante di acquisto sarà sostituito da un link alla pagina del prodotto.

<script async src="https://sc.ls.skeepers.io/shoppable.umd.js"></script> 
<skp-widget add-to-cart="false" link-to-product-page="true"</skp-widget>

Problemi comuni

Se incontra un problema nell'implementazione del tag su GTM. Come soluzione, il tag può essere integrato in questo modo:

<div id="my-container"></div>
<script src="https://sc-ls.spockee.io/shoppable.umd.js"></script>
<script type="text/javascript">
const widget = document.createElement('skp-widget'); 
// :art: Vuole aggiungere qualche miglioramento? 
widget.setAttribute('mode', 'slider');
widget.setAttribute('pip-mode', 'disabled');

// :point_down: Senza l'attributo prodotto,
// il tag prenderà l'url come riferimento
// widget.setAttribute('product', 'ID_PRODUCT');

// OPPURE può visualizzare la collezione. 
// widget.setAttribute('collection', 'ID_COLLECTION')

document.querySelector('#my-container').appendChild(widget);
</script>

Per un prodotto - commenti/non commenti la riga: widget.setAttribute('product', 'ID_PRODUCT');

Dovrà modificare il campo 'ID_PRODUCT' con il valore trovato nel backoffice:

O

Per una collezione - commenti/non commenti la riga : widget.setAttribute('collection', 'ID_COLLECTION');

Dovrà cambiare il 'ID_COLLECTION' con il valore che si trova nella pagina di una collezione, come qui: