Tutorial di base sui tag AI

Segui questo tutorial per creare un widget di base per i tag AI. Prima di iniziare, verifica con il tuo account manager che i tag AI siano stati configurati per il tuo account e siano stati generati.

1. Configurazione del tuo negozio

Avrai bisogno di un URL (pagina) per visualizzare il tuo Tag Explorer, insieme a una posizione nella pagina per incorporarlo.

Pagina Tag Explorer

Suggeriamo di aggiungere una pagina al tuo sito che includa il tuo template normale (menu ecc.) ma nessun altro contenuto.

Come esempio, definiremo una pagina all'indirizzo https://mystore.com/tag-explorer.html con un div per l'incorporamento come questo:

<div id="Product_Tag_Explorer"></div>

Nota che il punto in cui incorpori il Product Tag Explorer dovrebbe includere i normali margini e il padding della pagina, ma dovrebbe essere consentito il ridimensionamento come per il tuo contenuto normale. Il Product Tag Explorer occuperà tutto lo spazio necessario.

Elenco Tag nella Pagina Prodotto

Avrai anche bisogno di un posto nelle tue pagine prodotto per incorporare i tag. Un div con un ID o una classe sarebbe l'ideale:

Esempio: <div id="Product_Tag_List"></div>

2. Crea Product Tag Explorer

Inizia navigando alla sezione "Merchandising" del portale e clicca su "Widget" nella barra laterale sinistra. Vedrai un elenco di widget (possibilmente vuoto). Da qui, clicca su "Aggiungi Widget" nell'angolo in alto a destra dello schermo.

Figura 1: Crea un Product Tag Explorer

Nel popup che segue, scegli l'opzione "Product Tag Explorer" e clicca su "Avanti".

3. Modifica Product Tag Explorer

Figura 2: Imposta l'URL di visualizzazione e il selettore di incorporamento

Per questo tutorial dovremo aggiornare solo due impostazioni:

• URL di visualizzazione: https://mystore.com/tag-explorer.html

• Selettore di incorporamento: #Product_Tag_Explorer

Ora Pubblica il tuo widget.

4. Crea un Elenco Tag Prodotto

Naviga alla sezione "Merchandising" del portale e clicca su "Widget" nella barra laterale sinistra. Vedrai un elenco di widget (dovresti vedere il tuo Product Tag Explorer qui). Da qui, clicca su "Aggiungi Widget" nell'angolo in alto a destra dello schermo.

Nel popup che segue, scegli l'opzione "Elenco Tag Prodotto" e clicca su "Avanti".

5. Modifica Elenco Tag Prodotto

Figura 3: Imposta l'URL di visualizzazione e il selettore di incorporamento

Per questo tutorial dovremo aggiornare solo due impostazioni.

• URL di visualizzazione: https://mystore.com/product/*

L'URL di visualizzazione utilizza un * perché vogliamo che l'elenco dei tag venga mostrato su tutte le pagine prodotto.

• Selettore di incorporamento: #Product_Tag_List

Questo è l'ID che abbiamo aggiunto a un div creato in precedenza.

Ora Pubblica il tuo widget.

6. Test

Sul tuo sito vai a qualsiasi pagina prodotto. In questo esempio sarebbe qualcosa come:

https://mystore.com/product/big-red-shoes.html

Ora dovresti vedere un Elenco Tag Prodotto su questa pagina.

Clicca su uno dei tag e dovresti essere reindirizzato alla tua pagina Product Tag Explorer:

https://mystore.com/tag-explorer.html?tag=Red&product=big-red-shoes

Nota che tag e product sono stati aggiunti anche all'URL qui. Dovresti vedere il Product Tag Explorer su questa pagina.

Risoluzione dei problemi

Non vedo il widget sul mio sito

• Assicurati che lo script di Fanplayr sia in esecuzione sul tuo sito
• Ricontrolla il tuo URL di visualizzazione
• È possibile che non siano stati restituiti tag. Assicurati che il prodotto specifico che stai visualizzando abbia almeno un tag allegato nel portale Fanplayr.

Il mio widget appare leggermente diverso dal vivo rispetto all'editor

• I widget live ereditano parte del CSS dalla tua pagina, inclusa, in particolare, la font-family che controlla l'aspetto del tuo testo. Considera l'utilizzo della funzione Anteprima dal vivo per vedere come apparirà il tuo widget sul tuo sito prima della pubblicazione.