23 Componente AMP pe care s-ar putea să nu știți că le-ați putea adăuga la paginile AMP

Ceea ce sclipeste nu este întotdeauna auriu ... sau nu?

AMP a fost creat pentru a face webul mobil mai rapid, dar pentru a face acest lucru, restricțiile au fost aplicate - cum ar fi limitările privind codul personalizat, HTML / CSS și JavaScript. Limita de 75kb a foii de stil CSS este o dovadă a faptului că orice pagină web care o depășește va eșua validarea AMP.

Chiar și cu limitările sale, specialiștii în marketing digital pot personaliza pagini cu multe componente AMP. Aceste etichete HTML specializate acționează similar cu etichetele HTML tradiționale (cu etichete de deschidere și închidere, atribute și unele capabilități de stil CSS) și sunt ușor de identificat, începând întotdeauna cu prefixul amplificatorului.

Lista completă va fi probabil adăugată în mod continuu, dar următoarele 23 de componente AMP vă oferă o idee bună cât de personalizate pot fi paginile AMP.

(Instapage oferă acum cod personalizat AMP pentru a permite o mare varietate de componente. Accesați aici pentru detalii complete.)

23 de componente AMP pentru a vă personaliza paginile

1. Acordeon

Adăugarea amplificatorului la pagina dvs. oferă o schiță a conținutului și permite vizitatorilor să treacă la o anumită secțiune a paginii. Fiecare „copil” imediat al acordeonului AMP este considerat o secțiune din acordeon (fiecare secțiune trebuie să conțină doar doi „copii” direcți), iar primul copil al secțiunii este considerat titlul secțiunii. Dacă faceți clic pe titlu, se va extinde sau restrânge secțiunea:

Două opțiuni suplimentare pentru componenta de acordeon AMP sunt acordeonele imbricate (pentru a cuibra sau stiva mai multe acordeonuri una în cealaltă) și acordeonele care se prăbușesc automat (care permite doar o secțiune extinsă la un moment dat).

2. Audio

În loc de eticheta audio tradițională HTML5, AMP folosește propria versiune: amp-audio. Componenta audio AMP poate fi utilizată numai pentru încorporări directe de fișiere audio HTML5, care apar în pagină astfel:

Deși comenzile audio afișate mai sus (redare / pauză, sunet / mut și descărcare) sunt adăugate în mod implicit, butonul de descărcare din dreapta poate fi dezactivat:

3. Urmărirea apelurilor

Urmărirea apelurilor AMP înlocuiește pur și simplu numerele de telefon statice cu numere de telefon concepute pentru analiza urmăririi apelurilor.

4. Carusel

Componenta caruselului AMP afișează mai multe imagini de-a lungul unei axe orizontale, cu mai multe formate diferite de carusel de amplificatoare din care să alegeți.

Puteți utiliza tip = ”carusel” pentru a afișa o listă de imagini sub formă de bandă continuă:

Sau tastați = ”diapozitive” pentru a afișa o listă de imagini ca diapozitive:

De asemenea, puteți opta pentru atributul de redare automată (tip = numai diapozitive) care parcurge automat diapozitivele în intervale de 5 secunde fără interacțiunea utilizatorului.

5. Facebook

Componenta Facebook AMP încorporează postări, imagini și videoclipuri Facebook în paginile AMP, necesitând doar adresa URL Facebook.

6. Comentarii pe Facebook

AMP-facebook-comments permite încorporarea comentariilor Facebook în paginile AMP.

7. Facebook like

AMP-facebook-like permite încorporarea butonului Facebook like în paginile AMP.

8. pagina de Facebook

Pagina AMP-facebook încorporează o pagină Facebook în fișierele AMP, necesitând doar href-ul Paginii Facebook. Componenta AMP Facebook Page vă permite chiar să afișați diferite file pe pagina Facebook. De exemplu, puteți afișa fila cronologie și evenimente specificând data-tabs = ”cronologie, evenimente:”

9. Font

Componenta font AMP vă permite să vă proiectați paginile cu fonturi personalizate în corpul sau antetul documentului:

Fontul ales nu este acceptat, se afișează ca text simplu, roșu:

10. Forma

Componenta formular AMP vă permite să proiectați pagini AMP cu formulare detaliate de captare a plumbului. Extensia vă permite, de asemenea, să furnizați răspunsuri de succes și de eroare cu atribute speciale, trimitere-succes și trimitere-eroare:

11. Geo

Extensia geografică AMP permite secțiuni mici de conținut bazate pe o aproximare a locației unui utilizator (numai la nivel de țară, similar cu nivelul unui cod de țară ISO). De asemenea, oferă opțiunea de a grupa diferite locații împreună, facilitând aplicarea atributelor la mai multe geografii simultan.

12. iFrame

AMP-iframe încorporează conținut în paginile AMP prin iFrame, care este ideal pentru afișarea de conținut altfel neacceptat încă de AMP (Vimeo, Giphy, Google Maps etc.).

AMP-iframe permite redimensionarea iFrame la runtime - fie la încărcarea paginii (iFrame încorporat se va redimensiona la 200x200px), fie la interacțiunea utilizatorului (apăsând butonul va redimensiona iFrame la 300x300px). Singura restricție cu această componentă AMP este că trebuie să fie fie la 600 px distanță de sus, fie să nu se încadreze în primele 75% din fereastra de vizualizare atunci când este parcursă în partea de sus - oricare dintre acestea este mai mică.

13. Lightbox imagine

Componenta lightbox imagine AMP permite utilizatorului să extindă imaginile AMP pentru a umple fereastra de vizualizare. De asemenea, puteți afișa opțional o legendă de imagine în partea de jos a ferestrei astfel:

14. Instagram

Videoclipurile și fotografiile Instagram pot fi încorporate în paginile dvs. AMP cu amp-instagram, utilizând codul scurt de date găsit în fiecare adresă URL de fotografie / videoclip. De asemenea, puteți include subtitrări cu atributul cu titlu de date:

15. Galerie lightbox

AMP-lightbox-gallery oferă o experiență „lightbox” pentru alte componente AMP, cum ar fi amp-img și amp-carusel (doar imaginile sunt acceptate în prezent). Când vizitatorul interacționează cu elementul AMP, o componentă UI se extinde pentru a umple fereastra de vizualizare până când o închide din nou. Dacă pagina dvs. conține mai multe elemente, pur și simplu adăugați atributul lightbox la fiecare imagine pe care doriți să o vadă utilizatorii într-o casetă lightbox.

16. Pinterest

Folosind amp-pinterest, adăugarea unui buton „Pin it” la pagina dvs. permite vizitatorilor să fixeze diverse conținut de pe site-ul dvs.:

Pentru a adăuga un buton „Fixați-l”, veți avea nevoie de aceste atribute:

• data-url: adresa URL de partajat
• date-media: adresa URL a imaginii care trebuie fixată
• date-description: descrierea implicită care apare în Pin

Sau puteți încorpora un widget Pin complet:

În acest caz, atributul data-url trebuie să conțină adresa URL complet calificată a resursei Pinterest.

17. Pixel

Componenta pixel AMP este un mod rapid de urmărire a afișărilor de pagină. AMP-pixel este o componentă încorporată care nu necesită încărcarea unei extensii.

18. Reddit

Postările și comentariile Reddit pot fi incluse pe paginile AMP cu amp-reddit. Componenta AMP Reddit necesită să specificați între postare sau comentariu și sursa încorporării. Când încorporați comentarii, includeți comentariul părinte specificând data-embedparent = ”true” și includeți comentarii actualizate specificând data-embedlive = ”true”.

19. SoundCloud

Vizitatorii pot reda piese SoundCloud pe paginile dvs. AMP atunci când utilizați componenta AMP SoundCloud (tot ce aveți nevoie pentru amp-soundcloud este trackid-ul găsit în codul de încorporare SoundCloud):

Puteți chiar să încorporați o listă de redare SoundCloud completă cu playlistid (găsit și în codul de încorporare SoundCloud), prin înlocuirea data-trackid cu data-playlistid:

20. Twitter

Similar cu celelalte componente AMP pentru rețelele sociale, amp-twitter încorporează Tweets în paginile dvs. AMP:

Dacă nu este necesară nicio imagine sau încercați să economisiți spațiu pe pagina dvs., puteți alege să dezactivați cardurile Twitter utilizând carduri de date = ”ascuns:”

21. Butonul Favorite

Cadrul AMP permite specialiștilor în marketing să adauge un buton preferat / like / bookmark. De asemenea, oferă o versiune mai sofisticată, care include un număr preferat și actualizează acest număr atunci când se face clic pe buton:

22. Plăți în AMP

Paginile AMP pot accepta solicitarea de informații de plată direct din browser. Pentru a solicita plăți în AMP, veți avea nevoie și de amp-iframe. Iată un iFrame încorporat cu un buton „Cumpărați acum”, cu toată logica de plată reală conținută chiar de iframe src:

Cu toate acestea, deoarece AMP restricționează JavaScript, sursa iFrame trebuie să gestioneze, de asemenea, cazurile în care PaymentRequest nu este disponibil. Alte opțiuni includ:

• Schimbați butonul „Cumpărați acum” pentru un buton „Adăugați în coș”
• Redirecționarea utilizatorilor către un formular de plată standard

23. Evaluarea pe stele

Capacitățile de evaluare a stelelor pot fi adăugate paginilor dvs. AMP, cu funcții precum accesibilitatea tactilă, mouse-ul și tastatura și stelele care schimbă culoarea atunci când utilizatorul trece peste ele:

Ce componente AMP veți adăuga la pagina dvs.?

Chiar și cu limitările AMP, proiectarea unei pagini frumoase și personalizabile este complet posibilă. Cele 23 de componente de mai sus sunt doar câteva dintre adăugările pe care le puteți face paginilor dvs. AMP pentru a maximiza conversiile.

Cu funcția AMP din Instapage, specialiștii în marketing pot crea pagini de destinație optimizate după clic cu un constructor prietenos cu designerii, analize avansate, un instrument de validare încorporat și multe altele. Începeți să creați pagini de destinație mai rapide, înscrieți-vă astăzi pentru o demonstrație Instapage.