23 komponenty AMP, o których możesz nie wiedzieć, że możesz je dodać do stron AMP

To, co się świeci, nie zawsze jest złotem… a może?

AMP został stworzony, aby przyspieszyć internet mobilny, ale w tym celu wprowadzono ograniczenia — takie jak ograniczenia dotyczące niestandardowego kodu, HTML/CSS i JavaScript. Limit arkusza stylów CSS 75 KB jest tego dowodem, ponieważ każda strona internetowa, która przekracza ten limit, nie przejdzie weryfikacji AMP.

Nawet przy jego ograniczeniach marketerzy cyfrowi mogą dostosowywać strony za pomocą wielu komponentów AMP. Te wyspecjalizowane znaczniki HTML działają podobnie do tradycyjnych znaczników HTML (z otwierającymi i zamykającymi znacznikami, atrybutami i niektórymi możliwościami stylizacji CSS) i są łatwe do zidentyfikowania, zawsze zaczynając od przedrostka amp.

Pełna lista prawdopodobnie będzie dodawana na bieżąco, ale poniższe 23 komponenty AMP dają dobry wyobrażenie o tym, jak dostosowane mogą być strony AMP.

(Instapage oferuje teraz niestandardowy kod AMP, aby włączyć szeroką gamę komponentów. Przejdź tutaj, aby uzyskać szczegółowe informacje.)

23 komponenty AMP do dostosowywania stron

1. Akordeon

Dodanie amp-accordion do strony zapewnia zarys treści i umożliwia odwiedzającym przejście do określonej sekcji strony. Każde z bezpośrednich „dzieci” akordeonu AMP jest uważane za sekcję w akordeonie (każda sekcja musi zawierać tylko dwa bezpośrednie „dzieci”), a pierwsze dziecko sekcji jest uważane za nagłówek sekcji. Kliknięcie nagłówka spowoduje rozwinięcie lub zwinięcie sekcji:

Dwie dodatkowe opcje komponentu akordeonowego AMP to akordeony zagnieżdżone (umożliwiające zagnieżdżanie lub układanie wielu akordeonów jeden w drugim) oraz akordeony z automatycznym zwijaniem (co pozwala tylko na jedną rozwiniętą sekcję na raz).

2. Dźwięk

Zamiast tradycyjnego tagu audio HTML5, AMP używa własnej wersji: amp-audio. Komponentu audio AMP można używać tylko do bezpośredniego osadzania plików dźwiękowych HTML5, które pojawiają się na stronie w następujący sposób:

Chociaż elementy sterujące dźwiękiem pokazane powyżej (odtwarzanie/pauza, dźwięk/wyciszanie i pobieranie) są dodawane domyślnie, przycisk pobierania po prawej stronie można wyłączyć:

3. Śledzenie połączeń

Śledzenie połączeń AMP po prostu zastępuje statyczne numery telefonów numerami telefonów przeznaczonymi do analizy śledzenia połączeń.

4. Karuzela

Komponent karuzeli AMP wyświetla wiele obrazów wzdłuż osi poziomej, z kilkoma różnymi formatami karuzeli AMP do wyboru.

Możesz użyć type=”carousel”, aby wyświetlić listę obrazów jako ciągły pasek:

Lub wpisz = „slajdy”, aby wyświetlić listę obrazów jako slajdy:

Możesz także wybrać atrybut autoodtwarzania (typ = tylko slajdy), który automatycznie przewija slajdy w 5-sekundowych odstępach bez interakcji użytkownika.

5. Facebook

Komponent AMP Facebook osadza posty, obrazy i filmy z Facebooka na stronach AMP, wymagając tylko adresu URL Facebooka.

6. Komentarze na Facebooku

AMP-facebook-comments umożliwia osadzanie komentarzy z Facebooka na stronach AMP.

7. Polubienie na Facebooku

AMP-facebook-like umożliwia osadzenie przycisku Facebooka na stronach AMP.

8. Strona na Facebooku

AMP-facebook-page osadza stronę Facebooka w plikach AMP, wymagając tylko href strony na Facebooku. Komponent strony AMP na Facebooku pozwala nawet wyświetlać różne karty na stronie na Facebooku. Na przykład możesz wyświetlić oś czasu i kartę zdarzeń, określając data-tabs = „oś czasu, zdarzenia:”

9. Czcionka

Komponent czcionek AMP umożliwia projektowanie stron przy użyciu niestandardowych czcionek w treści lub nagłówku dokumentu:

Jeśli wybrana czcionka nie jest obsługiwana, wyświetla się jako zwykły, czerwony tekst:

10. Formularz

Komponent formularza AMP umożliwia projektowanie stron AMP ze szczegółowymi formularzami przechwytywania potencjalnych klientów. Rozszerzenie pozwala również na dostarczanie odpowiedzi na sukces i błąd za pomocą specjalnych atrybutów, prześlij-sukces i prześlij-błęd:

11. Geo

Rozszerzenie geograficzne AMP umożliwia tworzenie małych sekcji treści na podstawie przybliżonej lokalizacji użytkownika (tylko na poziomie kraju, podobnie jak kod kraju ISO). Oferuje również opcję grupowania różnych lokalizacji, co ułatwia stosowanie atrybutów do kilku obszarów geograficznych jednocześnie.

12. iFrame

AMP-iframe osadza treści na stronach AMP za pomocą iFrame, co jest idealne do wyświetlania treści, które nie są jeszcze obsługiwane przez AMP (Vimeo, Giphy, Mapy Google itp.).

AMP-iframe umożliwia zmianę rozmiaru iFrame w czasie wykonywania — albo podczas ładowania strony (wbudowana iFrame zmieni swój rozmiar do 200x200px) lub podczas interakcji użytkownika (naciśnięcie przycisku zmieni rozmiar iFrame do 300x300px). Jedynym ograniczeniem związanym z tym komponentem AMP jest to, że musi on znajdować się 600 pikseli od góry lub nie w pierwszych 75% widocznego obszaru po przewinięciu do góry — w zależności od tego, co jest mniejsze.

13. Obraz lightbox

Komponent lightbox obrazu AMP umożliwia użytkownikowi rozwijanie obrazów AMP tak, aby wypełniały widoczny obszar. Możesz również opcjonalnie wyświetlić podpis obrazu na dole widocznego obszaru w następujący sposób:

14. Instagram

Filmy i zdjęcia z Instagrama można osadzać na stronach AMP za pomocą instagramu amp, używając skrótu do danych znajdującego się w każdym adresie URL zdjęcia / filmu. Możesz też dołączyć podpisy z atrybutem data-captioned:

15. Galeria Lightbox

AMP-lightbox-gallery zapewnia środowisko „lightbox” dla innych komponentów AMP, takich jak amp-img i amp-carousel (obecnie obsługiwane są tylko obrazy). Gdy użytkownik wchodzi w interakcję z elementem AMP, komponent interfejsu użytkownika rozwija się, wypełniając widoczny obszar, dopóki go nie zamkną. Jeśli Twoja strona zawiera wiele elementów, po prostu dodaj atrybut lightbox do każdego obrazu, który użytkownicy mają wyświetlać w lightbox.

16. Pinterest

Korzystając z amp-pinterest, dodanie przycisku „Przypnij” do strony umożliwia odwiedzającym przypinanie różnych treści z Twojej witryny:

Aby dodać przycisk „Przypnij”, potrzebujesz tych atrybutów:

• data-url: adres URL do udostępnienia
• media danych: adres URL obrazu do przypięcia
• opis danych: domyślny opis, który pojawia się w Pin

Możesz też osadzić kompletny widżet Pina:

W takim przypadku atrybut data-url musi zawierać w pełni kwalifikowany adres URL zasobu Pinterest.

17. Piksel

Komponent pikselowy AMP to szybki sposób śledzenia odsłon. AMP-pixel to wbudowany komponent, który nie wymaga ładowania rozszerzenia.

18. Reddit

Posty i komentarze Reddit można umieszczać na stronach AMP za pomocą amp-reddit. Komponent AMP Reddit wymaga określenia między postem lub komentarzem a źródłem umieszczenia. Osadzając komentarze, dołącz komentarz nadrzędny, określając data-embedparent=”true”, i dołącz zaktualizowane komentarze, określając data-embedlive=”true”.

19. SoundCloud

Odwiedzający mogą odtwarzać ścieżki SoundCloud na Twoich stronach AMP, gdy używasz komponentu AMP SoundCloud (wszystko, czego potrzebujesz do amp-soundcloud, to identyfikator ścieżki znajdujący się w kodzie osadzania SoundCloud):

Możesz nawet osadzić pełną listę odtwarzania SoundCloud z identyfikatorem listy odtwarzania (znajdującym się również w kodzie osadzania SoundCloud), zastępując data-trackid identyfikatorem data-playlistid:

20. Twitter

Podobnie jak w przypadku innych komponentów AMP mediów społecznościowych, amp-twitter umieszcza tweety na Twoich stronach AMP:

Jeśli żaden obraz nie jest potrzebny lub próbujesz zaoszczędzić miejsce na swojej stronie, możesz dezaktywować karty Twittera za pomocą data-cards=”ukryte:”

21. Przycisk Ulubione

Framework AMP pozwala marketerom dodawać przycisk ulubionych/polubienia/zakładek. Oferuje również bardziej zaawansowaną wersję, która zawiera ulubioną liczbę i aktualizuje tę liczbę po kliknięciu przycisku:

22. Płatności w AMP

Strony AMP mogą obsługiwać żądanie informacji o płatności bezpośrednio z przeglądarki. Aby zażądać płatności w AMP, potrzebujesz także amp-iframe. Oto osadzony element iFrame z przyciskiem „Kup teraz”, z całą logiką płatności zawartą w samym źródle elementu iframe:

Jednak ponieważ AMP ogranicza JavaScript, źródło iFrame musi również obsługiwać przypadki, w których PaymentRequest nie jest dostępny. Inne opcje obejmują:

• Zamiana przycisku „Kup teraz” na przycisk „Dodaj do koszyka”
• Przekierowywanie użytkowników do standardowego formularza kasy

23. Ocena w gwiazdkach

Do stron AMP można dodać funkcje oceniania w gwiazdkach, takie jak dostępność dotyku, myszy i klawiatury oraz gwiazdki zmieniające kolor, gdy użytkownik najedzie na nie kursorem:

Które komponenty AMP dodasz do swojej strony?

Nawet przy ograniczeniach AMP zaprojektowanie pięknej, dostosowywalnej strony jest całkowicie możliwe. Powyższe 23 elementy to tylko niektóre z dodatków, które możesz wprowadzić na swoich stronach AMP, aby zmaksymalizować konwersje.

Dzięki funkcji AMP w Instapage marketerzy mogą tworzyć zoptymalizowane strony docelowe po kliknięciu za pomocą przyjaznego dla projektantów kreatora, zaawansowanej analityki, wbudowanego narzędzia do weryfikacji i nie tylko. Zacznij tworzyć szybsze landing pages, już dziś zarejestruj się na demo Instapage.