Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Najlepsze praktyki tworzenia reklam fabularnych AMP

Relacje AMP to interaktywne, pełnoekranowe materiały, angażujące czytelników w treść. Reklamy wyświetlane w relacjach AMP powinny być spójne z relacjami AMP. Zapobiega to irytowaniu użytkowników lub zakłócaniu ich wrażeń. Ten przewodnik pokazuje, jak stworzyć reklamę fabularną AMP.

Zasady dotyczące reklam fabularnych AMP Obecnie stosowane formaty reklam, takie jak banery i boksy, nie integrują się dobrze z formatem AMP Story. Klasyczne reklamy są w relacjach powolne, irytujące i nie na miejscu.

Reklamy fabularne AMP muszą być zgodne z następującymi zasadami:

  • Prawidłowa reklama AMPHTML: zgodna z tą samą specyfikacją techniczną, co klasyczna reklama AMPHTML.
  • Po pierwsze grafika: zachęcająca, śmiała, zależna od kontekstu.
  • Natywna: strona reklamowa musi mieć takie same wymiary, jak organiczna strona relacji.
  • Ten sam model interakcji: użytkownik może przejść do następnego ekranu tak, jak z organicznej strony relacji.
  • Szybka: reklama nigdy nie jest wyświetlana użytkownikowi załadowana do połowy.

Aby zachować zgodność z tymi zasadami, środowisko uruchomieniowe relacji AMP określa właściwe umieszczenie strony z reklamą w relacji AMP. Więcej informacji o mechanice umieszczania reklam zawiera artykuł Reklama w relacjach internetowych.

Przekładowa reklama fabularna Reklamy fabularne AMP są reklamami AMPHTML, ale mają wymagane tagi meta, spełniają wymogi określonych specyfikacji układu i mają wymagane elementy UI. Reklama fabularna AMP zawsze będzie zawierać przycisk wezwania do działania (CTA) oraz etykietę reklamy, wyświetlaną jako zastrzeżenie tekstowe u góry strony.

Przykład reklamy fabularnej AMP
Przykład reklamy fabularnej AMP

Aby zapewnić spójność wrażeń użytkowników, za renderowanie etykiety reklamy i przycisku CTA odpowiada środowisko uruchomieniowe relacji AMP.

WAŻNE — w reklamie fabularnej AMP można kliknąć tylko przycisk CTA, więc pamiętaj o tym podczas tworzenia swojej kreacji.

Dane tagów meta

Dane tagów meta określają, że reklama ma format AMP Story, ustawiają wyliczenie tekstów przycisku CTA, określają stronę docelową przycisku i jej typ.

  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">



wzxhzdk:0




    <amp-img src="%%FILE:JPG1%%" layout="responsive" height="1280" width="720"></amp-img>



Zalecane jest wybranie z dostępnych opcji tekstu przycisku CTA tagu amp-cta-type. W razie potrzeby AMP automatycznie zlokalizuje predefiniowane opcje.

Niestandardowy tekst jest dozwolony, ale trzeba będzie zaimplementować własną lokalizację.

## Wyliczenie tekstów przycisku wezwania do działania <a name="call-to-action-button-text-enum"></a>

Przycisk wezwania do działania można skonfigurować przy użyciu predefiniowanego zestawu opcji:

- `APPLY_NOW`: „Zastosuj teraz”
- `BOOK_NOW`: „Zarezerwuj”
- `BUY_TICKETS`: „Kup bilety”
- `DOWNLOAD`: „Pobierz”
- `EXPLORE`: „Sprawdź teraz”
- `GET_NOW`: „Uzyskaj teraz”
- `INSTALL`: „Zainstaluj teraz”
- `LISTEN`: „Posłuchaj teraz”
- `MORE`: „Więcej”
- `OPEN_APP`: „Otwórz aplikację”
- `ORDER_NOW`: „Zamów teraz”
- `PLAY`: „Zagraj”
- `READ`: „Przeczytaj teraz”
- `SHOP`: „Kup teraz”
- `SHOWTIMES`: „Godziny pokazów”
- `SIGN_UP`: „Zarejestruj się”
- `SUBSCRIBE`: „Subskrybuj teraz”
- `USE_APP`: „Użyj aplikacji”
- `VIEW`: „Wyświetl”
- `WATCH`: „Obejrzyj”
- `WATCH_EPISODE`: „Obejrzyj odcinek”


**UWAGA —** głębokie linki do aplikacji nie są obsługiwane, ale linki do strony App Store lub strony sklepu Google Play są obsługiwane przy użyciu protokołu http/https. Wyliczenie tekstów przycisku CTA jest określone w ładunku odpowiedzi na reklamę.
Jeśli potrzebna jest pomoc dotycząca wyliczania tekstów nowego przycisku CTA, otwórz [problem na GitHub](https://github.com/ampproject/amphtml/issues/new). ##Strona docelowa reklamy Można określić jedną z trzech opcji strony docelowej reklamy fabularnej AMP. - `STORY`: strona docelowa to [relacja sponsorowana](story_ads_best_practices.md#sponsored-story). - `AMP`: strona docelowa to prawidłowa strona AMP. - `NONAMP`: każdy inny typ strony internetowej ##Układ Relacje AMP są poziome i pełnoekranowe. Reklamy fabularne muszą być dopasowane do tego formatu, aby zapewnić spójne wrażenia użytkownika. ##Wymiary nakładki Etykieta reklamy nakładana jest na pasek z ciemnym gradientem na całej szerokości reklamy i rozciąga się od góry do 46 px w dół.
Nakładka reklamy znajduje się na górze
Przycisk CTA znajduje się 32 px od dołu i jest wyśrodkowany w poziomie. Ma wymiary 120 px na 36 px.
Przycisk CTA znajduje się blisko dołu
##Obrazy i filmy Obrazy i filmy zawarte w reklamie fabularnej AMP powinny być w standardzie pełnoekranowym 4:3. Reklamy zawierające filmy powinny mieć [plakat](https://gitlocalize.com/repo/4863/pl/pages/content/amp-dev/documentation/components/reference/amp-video.md#poster). Zalecane wymiary obrazu plakatu to 720p (720 szer. x 1280 wys.) . [sourcecode:html] {amp-video0}{/amp-video0} <source src="videos/kitten-playing.webm" type="video/webm"> <source src="videos/kitten-playing.mp4" type="video/mp4"> <div fallback=""> <p>Ta przeglądarka nie obsługuje elementu wideo.</p> </div>

Obrazy Obrazy tła można skalować do pełnego ekranu. Poniższy CSS to skuteczna metoda kadrowania i środkowania filmów oraz obrazów.

<style amp-custom=""> amp-img, amp-video { height: 100vh; } amp-video video { object-fit: cover; } amp-img img{ object-fit: cover; } </style>

Filmy

Stosowanie <source> i src Podczas określania źródła składnika amp-video

Przykład: określanie wielu plików źródłowych

 {amp-video0}{/amp-video0}

  <source src="https://amp-example.com/media/movie.m3u8" type="application/vnd.apple.mpegurl">   <source src="https://amp-example.com/media/movie.mp4" type="video/mp4">  

Rozmiar i długość filmu W celu zapewnienia optymalnej wydajności należy dążyć do stosowania filmów o rozmiarze nie większym niż 4 MB. Mniejsze rozmiary plików pozwalają na szybsze pobieranie, więc należy stosować jak najmniejsze rozmiary.

Formaty wideo Jeśli możesz podać tylko jeden format wideo, użyj formatu MP4. Jeśli jednak jest to możliwe, należy użyć protokołu HLS i określić MP4 jako ustawienie rezerwowe dla przeglądarek, które nie obsługują jeszcze protokołu HLS. Serwer HLS wykonuje transmisje strumieniowe z adaptacyjną szybkością transmisji bitów, w których jakość sygnału wideo można zmienić, aby jak najlepiej odpowiadała połączeniu sieciowemu użytkownika.

UWAGA — format wideo HLS nie jest obsługiwany w przeglądarce Chrome dla komputerów (nawet poprzez emulację), dlatego też dla ruchu z komputerów na stronie wymagane jest podanie rezerwowego formatu MP4. Aby debugować filmy HLS, należy użyć rzeczywistego urządzenia przenośnego i funkcji debugowania przez USB.

Rozdzielczość wideo

Filmy w relacjach AMP są zawsze wyświetlane w widoku pionowym, z oczekiwanym współczynnikiem proporcji 16:9. Należy stosować rozdzielczość zalecaną dla danego typu strumieniowej transmisji wideo:

Typ transmisji strumieniowej wideo Rozdzielczość
Nieadaptacyjna 720 x 1280 px
Adaptacyjna 720 x 1280 px
540 x 960 px
360 x 480 px

UWAGA — w przypadku urządzeń przenośnych, które mają współczynnik proporcji inny niż 16:9, obraz może być przycięty w poziomie lub pionie w celu dopasowania go do okienka.

Kodek wideo

  1. Do MP4 używaj kodeka H.264.
  2. Do WEBM używaj kodeka VP9.
  3. Do HLS lub DASH używaj kodeka H.264.

Jakość wideo

Optymalizacje transkodowania

Do kodowania filmów i dostosowywania jakości wideo podczas kodowania można używać różnych narzędzi. Oto tylko kilka z nich:

Narzędzie Uwagi
FFmpeg Zalecane optymalizacje:
  • Do MP4 używaj -crf 23.
  • Do WEBM używaj -b:v 1M.
avconv Zalecane optymalizacje:
  • Do MP4 używaj -crf 23.
  • Do WEBM używaj -b:v 1M.
Shaka Packager Koder, który może również generować wideo w formacie HLS, z listą odtwarzania włącznie.
Rozmiar segmentu HLS

Upewnij się, że rozmiar segmentów HLS zazwyczaj nie przekracza 10 sekund czasu trwania.

Animacja

Animacji w relacjach dotyczy kilka zastrzeżeń, takich jak koncepcja „widoczności”. Na przykład na naszym „3-okienkowym” pulpicie kreacja może być widoczna na stronie, ale nie jest jeszcze w centrum uwagi. Może sprawiać problemy, jeśli żądanym efektem jest uruchamianie animacji, gdy strona znajduje się w centrum uwagi.

Aby w tym pomóc, AMP doda specjalny atrybut amp-story-visible do treści kreacji, gdy będzie ona punktem centralnym we wszystkich kontekstach serwowania reklam. Zalecane jest uruchamianie animacji na podstawie tego sygnału.

Przykład: animacja ta zostanie uruchomiona, gdy strona uzyska fokus, a następnie ponownie zostanie uruchomiona, gdy użytkownik kliknie inną stronę relacji i powróci.

<style amp-custom="">&lt;br&gt;    body[amp-story-visible] .my-animation-class {&lt;br&gt;      animation: 2s my-animation-name;&lt;br&gt;    }&lt;br&gt;</style>

Relacja sponsorowana

Relacja sponsorowana istnieje jako adres URL w Internecie, umożliwiający kierowanie ruchu użytkowników do relacji sponsorowanej za pomocą przycisku wezwania do akcji w reklamie fabularnej AMP. Relacja sponsorowana to relacja AMP, ale z naciskiem na wciągające, ekspansywne wrażenia z reklamy.

Przycisk CTA kieruje do relacji sponsorowanej

Dowiedz się więcej o tworzeniu relacji AMP tutaj.