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

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

AMP został stworzony, aby przyspieszyć internet mobilny, ale w tym celu narzucono ograniczenia, takie jak ograniczenia dotyczące niestandardowego kodu, HTML/CSS i JavaScript. Dowodem na to jest limit arkusza stylów CSS wynoszący 75 KB, ponieważ każda strona internetowa, która go przekroczy, nie przejdzie weryfikacji AMP.

Nawet przy swoich 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 pewnymi możliwościami stylizowania CSS) i są łatwe do zidentyfikowania, zawsze zaczynając się od przedrostka amp-.

Pełna lista będzie prawdopodobnie uzupełniana na bieżąco, ale poniższe 23 komponenty AMP dają dobry obraz tego, jak dostosowane mogą być strony AMP.

(Instapage oferuje teraz niestandardowy kod AMP, który umożliwia korzystanie z szerokiej gamy komponentów. Przejdź tutaj, aby uzyskać szczegółowe informacje).

23 komponenty AMP do dostosowywania stron

1. Akordeon

Dodanie wzmacniacza akordeonowego do strony zapewnia zarys treści i umożliwia odwiedzającym przejście do określonej sekcji strony. Każdy z bezpośrednich „potomków” akordeonu AMP jest uważany za sekcję w akordeonie (każda sekcja musi zawierać tylko dwóch bezpośrednich „potomków”), a pierwszy element potomny sekcji jest uważany za nagłówek sekcji. Kliknięcie nagłówka spowoduje rozwinięcie lub zwinięcie sekcji:

Dwie dodatkowe opcje komponentu akordeonu AMP to zagnieżdżone akordeony (do zagnieżdżania lub układania wielu akordeonów jeden w drugim) i automatycznie zwijane akordeony (co umożliwia tylko jedną rozwiniętą sekcję na raz).

2. Dźwięk

Zamiast tradycyjnego tagu audio HTML5, AMP używa własnej wersji: amp-audio. Komponent audio AMP może być używany tylko do bezpośredniego osadzania pliku audio HTML5, który pojawia się na stronie w następujący sposób:

Chociaż pokazane powyżej elementy sterujące dźwiękiem (odtwarzanie/pauza, dźwięk/wycisz 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 amp-karuzeli 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 (tylko typ=slajdy), który automatycznie przewija slajdy w odstępach 5-sekundowych bez interakcji użytkownika.

5. Facebooka

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

6. Komentarze na Facebooku

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

7. Polub na Facebooku

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

8. Strona na Facebooku

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

9. Czcionka

Komponent czcionek AMP umożliwia projektowanie stron za pomocą 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 o sukcesach i błędach ze specjalnymi atrybutami, prześlij-sukces i wyślij-błąd:

11. Geo

Rozszerzenie geograficzne AMP zezwala na wyświetlanie małych fragmentów treści w oparciu o przybliżoną lokalizację użytkownika (tylko na poziomie kraju, podobnie jak w przypadku kodu kraju ISO). Oferuje również opcję grupowania różnych lokalizacji, co ułatwia jednoczesne stosowanie atrybutów do kilku obszarów geograficznych.

12. iFrame

AMP-iframe osadza treści na stronach AMP za pośrednictwem elementu iFrame, który idealnie nadaje się do wyświetlania treści, które nie są jeszcze obsługiwane przez AMP (Vimeo, Giphy, Google Maps itp.).

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

13. Lightbox obrazu

Komponent Lightbox obrazu AMP umożliwia użytkownikowi rozwijanie obrazów AMP w celu wypełnienia widocznego obszaru. Możesz także 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ą amp-instagram, używając krótkiego kodu danych znajdującego się w każdym adresie URL zdjęcia/filmu. Możesz także dołączyć podpisy z atrybutem data-captioned:

15. Galeria Lightbox

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

16. Pinterest

Za pomocą 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
• data-media: adres URL obrazu do przypięcia
• opis danych: domyślny opis, który pojawia się w Pinie

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

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

17. Piksel

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

18. Reddit

Posty i komentarze z Reddit mogą być umieszczane na stronach AMP za pomocą amp-reddit. Komponent AMP Reddit wymaga określenia między postem lub komentarzem a źródłem osadzenia. Podczas osadzania komentarzy 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ć utwory SoundCloud na Twoich stronach AMP, gdy korzystasz z 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 przez data-playlistid:

20. Twittera

Podobnie jak inne komponenty AMP mediów społecznościowych, amp-twitter osadza tweety na 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=”hidden:”

21. Ulubiony przycisk

Ramy AMP umożliwiają marketerom dodanie przycisku ulubionych/polubionych/zakładek. Oferuje również bardziej wyrafinowaną wersję, która zawiera liczbę ulubionych i aktualizuje tę liczbę po kliknięciu przycisku:

22. Płatności w AMP

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

Ponieważ jednak AMP ogranicza JavaScript, źródło elementu iFrame musi również obsługiwać przypadki, w których PaymentRequest jest niedostępne. Inne opcje obejmują:

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

23. Liczba gwiazdek

Do stron AMP można dodać możliwość oznaczania gwiazdkami, w tym ułatwienia dostępu za pomocą 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 komponenty to tylko niektóre z dodatków, które możesz wprowadzić na swoich stronach AMP, aby zmaksymalizować liczbę konwersji.

Dzięki funkcji AMP w Instapage marketerzy mogą tworzyć zoptymalizowane strony docelowe za pomocą przyjaznego dla użytkownika narzędzia do tworzenia, zaawansowanych analiz, wbudowanego narzędzia do sprawdzania poprawności i nie tylko. Zacznij tworzyć szybsze strony docelowe już dziś. Zarezerwuj demo Instapage, aby zobaczyć, jak to zrobić.