Video AMP
Mostra i video dei prodotti sulle Accelerated Mobile Pages (AMP) utilizzando i componenti video compatibili con AMP, in modo che i tuoi video vengano visualizzati sulle pagine mobili a caricamento rapido.
Disponibile dalla v3.0.0
Panoramica
Le pagine AMP utilizzano un sottoinsieme ristretto di HTML — i tag standard <iframe> e <video> non sono consentiti. Questa funzionalità genera i componenti AMP corretti (<amp-youtube>, <amp-vimeo>) e inietta le intestazioni script necessarie affinché i video funzionino sulle pagine prodotto AMP senza generare errori di validazione AMP.
Poiché AMP è fornito da un modulo o tema separato — non da PrestaShop stesso — questa funzionalità opera attraverso tre hook che il tuo tema o modulo AMP deve richiamare nei propri template. Una volta inseriti questi hook e abilitato Video AMP, i video dei prodotti del tuo negozio compaiono nel carosello immagini e nell'area contenuto del prodotto su ogni pagina prodotto AMP.
Il modulo include anche una scansione iniziale delle intestazioni che verifica se gli script dei componenti AMP richiesti sono già presenti nel tuo template AMP, prevenendo errori di script duplicati sulle pagine che li caricano già autonomamente.
Configurazione
- Vai su Moduli > Gestione Moduli, trova Product Video e clicca su Configura.
- Naviga nella scheda Integrazione AMP.
- Abilita Usa Video AMP e regola le opzioni seguenti.
- Clicca su Salva.
- Dopo aver salvato, abilita Verifica Intestazioni AMP (una volta) e salva di nuovo — questo consente al modulo di rilevare quali tag script AMP deve generare.
| Impostazione | Valori | Predefinito | Descrizione |
|---|---|---|---|
| Usa Video AMP | Sì / No | No | Interruttore principale. Deve essere abilitato affinché venga generato qualsiasi output video AMP. |
| Riproduzione automatica nel Carosello | Sì / No | Sì | Tenta la riproduzione automatica dei video nel carosello AMP. I video partono silenziati; l'audio si attiva solo quando il cliente tocca il video. La riproduzione automatica potrebbe essere bloccata su alcuni dispositivi indipendentemente da questa impostazione. |
| Mostra Controlli nei video | Sì / No | No | Mostra i controlli di riproduzione nativi (play, pausa, barra temporale) sui componenti video AMP. |
| Verifica Intestazioni AMP (una volta) | Sì / No | — | Abilita una volta per avviare una scansione del <head> della pagina AMP alla ricerca di script mancanti per i componenti video. Il modulo salva il risultato e reimposta automaticamente questo interruttore su No. Riabilita se cambi il tuo tema AMP. |
| Intestazioni mancanti rilevate | Sola lettura | — | Mostra quali script dei componenti AMP mancano dal tuo template AMP, oppure "Tutte le intestazioni richieste sono già presenti" se non manca nulla. |
Dopo aver cambiato tema o aggiornato il tuo modulo AMP, riabilita Verifica Intestazioni AMP (una volta) e salva. Il risultato della scansione precedente potrebbe non essere più accurato.
Posizionamento degli Hook Richiesti
Tu o lo sviluppatore del tuo tema/modulo AMP dovete aggiungere tre hook al template della pagina prodotto AMP. Questi hook non vengono richiamati automaticamente — devono essere inseriti manualmente nel sorgente del template.
1. All'interno di <head>
{hook h='displayAMPAdditionalHeaders'}
Genera i tag <script async custom-element="..."> richiesti da AMP per i componenti video. Inserisci questo hook in qualsiasi punto all'interno del tag <head> del tuo template prodotto AMP. Se la scansione Verifica Intestazioni AMP ha rilevato che gli script sono già presenti, questo hook non genera nulla per evitare duplicazioni.
2. All'interno del carosello immagini
{hook h='displayAMPVideosCarousel'}
Genera un componente video AMP per ogni video del prodotto, dimensionato per corrispondere alle dimensioni delle immagini del prodotto. Inseriscilo all'interno del blocco <amp-carousel> insieme alle slide <amp-img>.
Questo hook genera video solo quando la posizione di visualizzazione Galleria Immagini è abilitata nelle impostazioni principali di Visualizzazione Video (
PV_DISPLAY_IMG). Se utilizzi solo le modalità di visualizzazione pannello laterale o area contenuto, usa invecedisplayAMPVideosContent.
3. Nell'area contenuto del prodotto
{hook h='displayAMPVideosContent'}
Genera un player video AMP autonomo utilizzando la larghezza e l'altezza configurate in Dimensioni Video. Inseriscilo nel template del prodotto nel punto in cui vuoi che il video compaia — ad esempio, prima o dopo la descrizione estesa.
Questo hook genera video solo quando la posizione di visualizzazione Pannello Laterale o Contenuto/Schede è abilitata nelle impostazioni principali di Visualizzazione Video.
Come Funziona
Quando Usa Video AMP è abilitato e un cliente visita la pagina AMP di un prodotto:
displayAMPAdditionalHeadersviene eseguito nel<head>. Se la scansione Verifica Intestazioni AMP ha rilevato script mancanti, il modulo genera i tag<script>appropriati. Se la scansione ha trovato tutti gli script già presenti, questo hook non genera nulla.displayAMPVideosCarouselviene eseguito all'interno di<amp-carousel>e genera una slide video AMP per ogni video associato al prodotto. I video sono dimensionati per corrispondere al tipo di immagine del prodotto configurato nelle impostazioni della galleria.displayAMPVideosContentviene eseguito nell'area contenuto e genera un player autonomo utilizzando la larghezza e l'altezza del video dalla configurazione Dimensioni Video.
Il modulo usa <amp-youtube> per i video YouTube e <amp-vimeo> per i video Vimeo, estraendo l'ID del video dall'URL memorizzato. La riproduzione automatica e i controlli vengono applicati ai video del carosello in base alle impostazioni configurate.
Cosa fa "Verifica Intestazioni AMP"
Quando abiliti questo interruttore e salvi, il modulo recupera la tua pagina prodotto AMP, analizza la sezione <head> e verifica quali script dei componenti AMP (amp-youtube, amp-vimeo, ecc.) sono già caricati dal tuo tema. Salva l'elenco degli script mancanti nella propria configurazione. Da quel momento in poi, displayAMPAdditionalHeaders genera solo gli script mancanti — non tutti — prevenendo duplicazioni. L'interruttore si reimposta automaticamente su No al termine della scansione.
Esempi di Utilizzo
Esempio: Video nel carosello immagini
Hai un prodotto con due video YouTube e il tuo modulo AMP utilizza un <amp-carousel> per le immagini del prodotto. Aggiungi {hook h='displayAMPVideosCarousel'} all'interno del tag <amp-carousel>, abilita Usa Video AMP ed esegui la scansione delle intestazioni. Quando un cliente visita la pagina prodotto AMP, i due video compaiono come slide aggiuntive nel carosello insieme alle foto del prodotto. Con la Riproduzione Automatica abilitata, la prima slide video inizia a riprodursi silenziata non appena entra nella visualizzazione.
Esempio: Video sotto la descrizione del prodotto
Il tuo tema AMP inserisce la descrizione del prodotto in un blocco <div class="description">. Aggiungi {hook h='displayAMPVideosContent'} immediatamente dopo quel blocco e abilita la posizione di visualizzazione Contenuto/Schede nelle impostazioni principali di Visualizzazione Video. Il video Vimeo del prodotto ora compare sotto la descrizione su ogni pagina prodotto AMP, dimensionato secondo le impostazioni Dimensioni Video.
Esempio: Prevenire errori di validazione AMP
Dopo aver abilitato Video AMP vedi errori di validazione AMP relativi a script amp-youtube mancanti. Apri le impostazioni Integrazione AMP, abilita Verifica Intestazioni AMP (una volta) e salva. Il modulo scansiona la pagina, rileva lo script mancante e da quel momento in poi lo genera automaticamente tramite displayAMPAdditionalHeaders. Gli errori di validazione scompaiono.
Note Importanti
- AMP non è incluso in PrestaShop di default. Questa funzionalità funziona solo se il tuo negozio dispone di un modulo o tema AMP separato che genera pagine prodotto AMP e richiama i tre hook descritti sopra.
- In modalità AMP sono supportati solo YouTube e Vimeo. I video HTML5 e i video di provider personalizzati non possono essere renderizzati come componenti AMP e non appariranno sulle pagine AMP.
- L'hook del carosello richiede che la visualizzazione Galleria Immagini sia abilitata. Se utilizzi una modalità di visualizzazione diversa dalla Galleria Immagini, usa
displayAMPVideosContentper l'area contenuto. - Il comportamento della riproduzione automatica dipende dal dispositivo. La specifica AMP consente la riproduzione automatica su alcune implementazioni, ma i browser mobili e le cache AMP possono sovrascriverla indipendentemente dalla tua impostazione.
- Esegui la scansione delle intestazioni una volta dopo la configurazione iniziale, e di nuovo dopo qualsiasi modifica al tema AMP. Senza un risultato di scansione, il modulo non può sapere se generare autonomamente gli script AMP, con il rischio di script mancanti o duplicati.
- Multi-negozio: Le impostazioni di Video AMP sono per negozio. Ogni contesto negozio può abilitare o disabilitare Video AMP in modo indipendente e configurare le opzioni di riproduzione automatica e controlli.
Risoluzione dei Problemi
| Problema | Soluzione |
|---|---|
| Nessun video appare sulle pagine prodotto AMP | Verifica che Usa Video AMP sia abilitato. Controlla che tutti e tre gli hook siano inseriti nel tuo template AMP. Assicurati che il prodotto abbia almeno un video YouTube o Vimeo assegnato. |
| L'hook del carosello non mostra nulla | Verifica che la posizione di visualizzazione Galleria Immagini sia abilitata nelle impostazioni principali di Visualizzazione Video. L'hook displayAMPVideosCarousel si attiva solo quando quella posizione è attiva. |
| L'hook del contenuto non mostra nulla | Verifica che la posizione di visualizzazione Pannello Laterale o Contenuto/Schede sia abilitata nelle impostazioni principali di Visualizzazione Video. |
| Errore di validazione AMP: script richiesto mancante | Abilita Verifica Intestazioni AMP (una volta) e salva. Il modulo rileverà e memorizzerà lo script mancante, quindi lo genererà nei successivi caricamenti di pagina tramite displayAMPAdditionalHeaders. |
| Errori di script AMP duplicati | Esegui la scansione Verifica Intestazioni AMP — dopo la scansione, il modulo rileva che gli script sono già presenti e smette di generarli. Svuota la cache di PrestaShop dopo aver salvato. |
| "Intestazioni mancanti rilevate" mostra ancora uno script dopo aver modificato il tema | Riabilita Verifica Intestazioni AMP (una volta) e salva per forzare una nuova scansione. Il vecchio risultato di scansione non è più aggiornato. |
Domande Frequenti
Devo modificare il mio modulo o tema AMP per usare questa funzionalità?
Sì. Il tuo tema o modulo AMP deve richiamare i tre hook (displayAMPAdditionalHeaders, displayAMPVideosCarousel, displayAMPVideosContent) nei template della pagina prodotto. Senza quelle chiamate agli hook, il modulo non ha modo di iniettare contenuto nella pagina AMP. Condividi i nomi degli hook con il tuo sviluppatore del tema se hai bisogno di assistenza per inserirli.
I video HTML5 o di provider personalizzati appariranno sulle mie pagine AMP?
No. AMP supporta solo un insieme specifico di componenti approvati, e non esiste un componente AMP per video HTML5 generici o domini personalizzati. Sulle pagine AMP vengono generati solo i video YouTube (<amp-youtube>) e Vimeo (<amp-vimeo>).
Devo eseguire la scansione "Verifica Intestazioni AMP" ogni volta che salvo le impostazioni?
No — eseguila una volta dopo la configurazione iniziale, e di nuovo solo se cambi il tuo tema AMP o aggiorni il tuo modulo AMP. Il risultato della scansione viene memorizzato e riutilizzato ad ogni successivo caricamento di pagina fino a quando non forzi una nuova scansione.
Perché la riproduzione automatica non funziona anche se l'ho abilitata?
I browser mobili e le cache AMP (come la AMP Cache di Google) sono autorizzati dalla specifica AMP a bloccare la riproduzione automatica a propria discrezione. Si tratta di una limitazione del browser e della piattaforma, non del modulo. I video continueranno a riprodursi normalmente quando il cliente li tocca.
Il campo "Intestazioni mancanti rilevate" mostra "Tutte le intestazioni richieste sono già presenti" — significa che non ho bisogno dell'hook displayAMPAdditionalHeaders?
Puoi lasciare l'hook in posizione — semplicemente non genera nulla quando tutti gli script sono già presenti. Rimuoverlo è sicuro ma non necessario. Mantenerlo garantisce che il modulo possa generare automaticamente gli script mancanti se il tuo tema dovesse cambiare in futuro.