🔔 Contenuti acquistabili - Integrazione tecnica (Casi d'uso)

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.

Nome	Descrizione	Valore di default	Scope
--skp-primary-color	CTA primary color	#5F3595	generale
--skp-font-family	Font	'Nunito', sans-serif	general
--skp-thumbnail-width	Larghezza dell'anteprima	200px	generale
--skp-thumbnail-height	Altezza dell'anteprima	400px	generale
--skp-slider-nav-icon-size	Dimensione dell'icona di controllo della navigazione	20px	slider
--skp-slider-nav-color	Colore di sfondo del controllo della navigazione	#000000	slider
--skp-slider-nav-width	Dimensione controllo navigazione	40px	slider
--skp-slider-nav-position	Posizione del controllo di navigazione	relativo	slider
--skp-radius	Bordo del raggio CTA	5px	generale
--skp-thumbnail-border-radius	Radius border Picture, Thumbnail, Item slider...	5px	generale

 

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: