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">
</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">
  <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ą.