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.

Ad 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 margini e il padding normali della tua pagina, ma essere in grado di ridimensionarsi come farebbe il tuo contenuto normale. Il Product Tag Explorer occuperà tutto lo spazio necessario.

Lista di tag sulla pagina prodotto

Avrai anche bisogno di un posto sulle 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. Creare un 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: Creare un Product Tag Explorer

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

3. Modificare il Product Tag Explorer

Figura 2: Impostare 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. Creare una Lista di 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 "Product Tag List" e clicca su "Avanti".

5. Modificare la Lista di Tag Prodotto

Figura 3: Impostare 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 appaia su tutte le pagine prodotto.

• Selettore di incorporamento: #Product_Tag_List

Questo è l'ID che abbiamo aggiunto a un div che abbiamo 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 una Lista di 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 il modello selezionato non abbia restituito prodotti. Se non vengono restituiti prodotti, il widget non verrà visualizzato. Allo stesso modo, se il modello selezionato si basa su un prodotto attualmente visualizzato, il widget verrà mostrato solo sulle pagine prodotto.

Il mio widget appare un po' diverso dal vivo rispetto all'editor

• I widget live ereditano alcuni CSS dalla tua pagina, inclusa, in particolare, la font-family che controlla l'aspetto del tuo testo. Considera l'utilizzo della funzionalità Anteprima Live per vedere come apparirà il tuo widget sul tuo sito prima di pubblicarlo.