23 componenti AMP che potresti non sapere di poter aggiungere alle pagine AMP

Quello che luccica non è sempre oro... o lo è?

AMP è stato creato per rendere il Web mobile più veloce, ma per farlo sono state applicate restrizioni, come le limitazioni relative al codice personalizzato, HTML/CSS e JavaScript. Il limite del foglio di stile CSS di 75 kb ne è la prova perché qualsiasi pagina web che supera tale limite non verrà convalidata da AMP.

Anche con i suoi limiti, i marketer digitali possono personalizzare le pagine con molti componenti AMP. Questi tag HTML specializzati agiscono in modo simile ai tag HTML tradizionali (con tag di apertura e chiusura, attributi e alcune capacità di stile CSS) e sono facilmente identificabili, iniziando sempre con il prefisso amp-.

L'elenco completo verrà probabilmente aggiunto su base continuativa, ma i seguenti 23 componenti AMP ti danno una buona idea di come possono essere personalizzate le pagine AMP.

(Instapage ora offre codice personalizzato AMP per abilitare un'ampia varietà di componenti. Vai qui per tutti i dettagli.)

23 componenti AMP per personalizzare le tue pagine

1. Fisarmonica

L'aggiunta di amp-fisarmonica alla tua pagina fornisce uno schema del contenuto e consente ai visitatori di passare a una determinata sezione della pagina. Ciascuno dei "figli" immediati della fisarmonica AMP è considerato una sezione nella fisarmonica (ogni sezione deve contenere solo due "figli" diretti) e il primo figlio della sezione è considerato l'intestazione della sezione. Facendo clic sull'intestazione si espanderà o si comprimerà la sezione:

Due opzioni aggiuntive per il componente a fisarmonica AMP sono fisarmoniche nidificate (per annidare o impilare più fisarmoniche l'una nell'altra) e fisarmoniche a collasso automatico (che consente solo una sezione espansa alla volta).

2. Audio

Invece del tradizionale tag audio HTML5, AMP utilizza la propria versione: amp-audio. Il componente audio AMP può essere utilizzato solo per gli incorporamenti diretti di file audio HTML5, che vengono visualizzati nella pagina in questo modo:

Sebbene i controlli audio mostrati sopra (riproduzione/pausa, audio/disattivazione audio e download) siano aggiunti per impostazione predefinita, il pulsante di download a destra può essere disabilitato:

3. Monitoraggio delle chiamate

Il monitoraggio delle chiamate AMP sostituisce semplicemente i numeri di telefono statici con numeri di telefono progettati per l'analisi del monitoraggio delle chiamate.

4. Carosello

Il componente carosello AMP visualizza più immagini lungo un asse orizzontale, con diversi formati carosello amp tra cui scegliere.

Puoi usare type=”carousel” per visualizzare un elenco di immagini come una striscia continua:

Oppure digita = "diapositive" per visualizzare un elenco di immagini come diapositive:

Puoi anche optare per l'attributo di riproduzione automatica (solo tipo=diapositive) che scorre automaticamente le diapositive a intervalli di 5 secondi senza interazione dell'utente.

5. Facebook

Il componente AMP Facebook incorpora post, immagini e video di Facebook nelle pagine AMP, richiedendo solo l'URL di Facebook.

6. Commenti su Facebook

AMP-facebook-comments consente di incorporare commenti di Facebook nelle pagine AMP.

7. Mi piace su Facebook

AMP-facebook-like consente di incorporare il pulsante Mi piace di Facebook nelle pagine AMP.

8. Pagina Facebook

AMP-facebook-page incorpora una pagina Facebook in file AMP, richiedendo solo l'href della pagina Facebook. Il componente Pagina Facebook AMP ti consente persino di mostrare diverse schede sulla Pagina Facebook. Ad esempio, puoi visualizzare la cronologia e la scheda eventi specificando data-tabs="timeline, events:"

9. Carattere

Il componente carattere AMP ti consente di progettare le tue pagine con caratteri personalizzati nel corpo o nell'intestazione del documento:

Se il carattere scelto non è supportato, viene visualizzato come semplice testo rosso:

10. Forma

Il componente modulo AMP ti consente di progettare pagine AMP con moduli dettagliati di acquisizione dei lead. L'estensione consente anche di fornire risposte di successo ed errore con attributi speciali, submit-success e submit-error:

11. Geo

L'estensione geografica AMP consente piccole sezioni di contenuto in base a un'approssimazione della posizione di un utente (solo a livello di paese, simile al livello di un codice paese ISO). Offre inoltre la possibilità di raggruppare diverse località, semplificando l'applicazione di attributi a più aree geografiche contemporaneamente.

12. iFrame

AMP-iframe incorpora contenuti nelle pagine AMP tramite iFrame, che è l'ideale per visualizzare contenuti altrimenti non ancora supportati da AMP (Vimeo, Giphy, Google Maps, ecc.).

AMP-iframe consente di ridimensionare l'iFrame in fase di esecuzione, sia al caricamento della pagina (l'iFrame incorporato si ridimensionerà a 200x200px) sia all'interazione dell'utente (premendo il pulsante ridimensionerà l'iFrame a 300x300px). L'unica restrizione con questo componente AMP è che deve trovarsi a 600 px di distanza dalla parte superiore o non entro il primo 75% dell'area visibile quando viene fatto scorrere verso l'alto, a seconda di quale sia il più piccolo.

13. Lightbox immagine

Il componente lightbox dell'immagine AMP consente all'utente di espandere le immagini AMP per riempire la finestra. Puoi anche facoltativamente visualizzare una didascalia dell'immagine nella parte inferiore della finestra in questo modo:

14. Instagram

I video e le foto di Instagram possono essere incorporati nelle tue pagine AMP con amp-instagram, utilizzando lo shortcode dei dati che si trova in ogni URL di foto/video. Puoi anche includere didascalie con l'attributo data-captioned:

15. Galleria lightbox

AMP-lightbox-gallery fornisce un'esperienza "lightbox" per altri componenti AMP, come amp-img e amp-carousel (attualmente sono supportate solo le immagini). Quando il visitatore interagisce con l'elemento AMP, un componente dell'interfaccia utente si espande per riempire l'area visibile fino a quando non la chiude di nuovo. Se la tua pagina contiene più elementi, aggiungi semplicemente l'attributo lightbox a ciascuna immagine che desideri che gli utenti visualizzino in una lightbox.

16. Pinterest

Utilizzando amp-pinterest, l'aggiunta di un pulsante "Pin it" alla tua pagina consente ai visitatori di bloccare vari contenuti dal tuo sito:

Per aggiungere un pulsante "Pin it", avrai bisogno di questi attributi:

• data-url: l'URL da condividere
• data-media: l'URL dell'immagine da appuntare
• data-description: la descrizione predefinita che appare nel Pin

Oppure puoi incorporare un widget Pin completo:

In questo caso, l'attributo data-url deve contenere l'URL completo della risorsa Pinterest.

17. Pixel

Il componente pixel AMP è un modo rapido per monitorare le visualizzazioni di pagina. AMP-pixel è un componente integrato che non richiede il caricamento di un'estensione.

18. Reddit

I post e i commenti di Reddit possono essere entrambi inclusi nelle pagine AMP con amp-reddit. Il componente AMP Reddit richiede di specificare tra post o commento e la fonte dell'incorporamento. Quando si incorporano commenti, includere il commento padre specificando data-embedparent=”true” e includere i commenti aggiornati specificando data-embedlive=”true”.

19. SoundCloud

I visitatori possono riprodurre le tracce SoundCloud sulle tue pagine AMP quando utilizzi il componente AMP SoundCloud (tutto ciò di cui hai bisogno per amp-soundcloud è il trackid trovato nel codice di incorporamento di SoundCloud):

Puoi anche incorporare una playlist SoundCloud completa con il playlistid (disponibile anche nel codice di incorporamento di SoundCloud), sostituendo data-trackid con data-playlistid:

20. Twitter

Simile agli altri componenti AMP dei social media, amp-twitter incorpora i Tweet nelle tue pagine AMP:

Se non è necessaria alcuna immagine o stai cercando di risparmiare spazio sulla tua pagina, puoi scegliere di disattivare le schede Twitter utilizzando data-cards=”hidden:”

21. Pulsante Preferiti

Il framework AMP consente ai professionisti del marketing di aggiungere un pulsante preferito/mi piace/segnalibro. Offre anche una versione più sofisticata che include un conteggio dei preferiti e aggiorna questo numero quando si fa clic sul pulsante:

22. Pagamenti in AMP

Le pagine AMP possono supportare la richiesta di informazioni di pagamento direttamente dal browser. Per richiedere pagamenti in AMP, avrai bisogno anche di amp-iframe. Ecco un iFrame incorporato con un pulsante "Acquista ora", con tutta la logica di pagamento effettiva contenuta all'interno dell'iframe src stesso:

Tuttavia, poiché AMP limita JavaScript, l'origine iFrame deve gestire anche le istanze in cui PaymentRequest non è disponibile. Altre opzioni includono:

• Sostituzione del pulsante "Acquista ora" con un pulsante "Aggiungi al carrello"
• Reindirizzare gli utenti a un modulo di pagamento standard

23. Valutazione a stelle

Le funzionalità di valutazione a stelle possono essere aggiunte alle tue pagine AMP, con funzionalità che includono l'accessibilità tramite tocco, mouse e tastiera e stelle che cambiano colore quando l'utente passa il mouse su di esse:

Quali componenti AMP aggiungerai alla tua pagina?

Anche con i limiti di AMP, è possibile progettare una bella pagina personalizzabile. I 23 componenti di cui sopra sono solo alcune delle aggiunte che puoi apportare alle tue pagine AMP per massimizzare le conversioni.

Con la funzione AMP in Instapage, gli esperti di marketing possono creare landing page ottimizzate post clic con un builder intuitivo, analisi avanzate, uno strumento di convalida integrato e altro ancora. Inizia a creare landing page più veloci, registrati oggi stesso per una demo di Instapage.