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

Tworzenie powłoki dla reklamy

Kod HTML wymagany dla reklamy AMPHTML jest wariantem kodu AMPHTML wymaganego dla strony AMP. Zapoznajmy się z wymaganym kodem, tworząc powłokę naszej reklamy AMPHTML.

Za pomocą swojego ulubionego edytora tekstów utwórz plik HTML o nazwie my-amphtml-ad.html. Skopiuj do tego pliku następujący znacznik HTML:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My amphtml ad</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
</body>
</html>

Są to znaczniki prostego, prawidłowego pliku HTML. Zauważ, że dołączyliśmy znacznik meta viewport, dzięki czemu mamy responsywne okienko na ekranie.

Zmodyfikujmy teraz kod HTML, aby uczynić z niego reklamę AMPHTML.

W sekcji <html>dodaj atrybut ⚡4ads, który identyfikuje dokument jako reklamę AMPHTML. Można też określić atrybut amp4ads, który jest również prawidłowy.

<!doctype html>
<html 4ads>
<head>
...

UWAGA — w odróżnieniu od stron AMP, reklamy AMPHTML nie wymagają znacznika <link rel="canonical">.

Reklamy AMPHTML wymagają własnej wersji środowiska uruchomieniowego AMP, więc dodaj następujący znacznik <script> do sekcji <head> dokumentu:

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

Kreacje reklamowe AMPHTML wymagają innej i znacznie prostszej linii stylu boilerplate niż strony AMP. Dodaj następujący kod do swojej sekcji <head>:

<style amp4ads-boilerplate>body{visibility:hidden}</style>

Aby nadać styl reklamie AMPHTML, kod CSS musi być osadzony w dokumencie AMPHTML przy użyciu znaczników <style amp-custom</style> w sekcji <head>. Jako że renderujemy prostą reklamę graficzną, nie wymagamy żadnego kodu CSS, więc nie będziemy dodawać tych znaczników.

UWAGA — w przypadku reklam AMPHTML maksymalny rozmiar arkusza stylów inline wynosi 20 kilobajtów. Dowiedz się więcej o wymaganiach dotyczących CSS w specyfikacji reklam AMPHTML.

Oto kompletny kod Twojego pliku HTML:

<!doctype html>
<html 4ads>
<head>
  <meta charset="utf-8">
  <title>My amphtml ad</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
  <style amp4ads-boilerplate>body{visibility:hidden}</style>
</head>
<body>
</body>
</html>

Masz teraz prawidłową reklamę AMPHTML, choć dość pustą. Utwórzmy reklamę graficzną.