Créer la coquille d'annonce

Le code HTML requis pour une annonce AMPHTML est une variante du code AMPHTML requis pour une page AMP. Familiarisons-nous avec le code requis en créant la coquille de notre annonce AMPHTML.

À l'aide de votre éditeur de texte préféré, créez un fichier HTML nommé my-amphtml-ad.html. Copiez le balisage HTML suivant dans ce fichier:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

Ce balisage concerne un fichier HTML de base valide. Notez que nous avons inclus la balise de fenêtre meta afin d'avoir une fenêtre interactive.

Maintenant, modifions le code HTML pour en faire une annonce AMPHTML.

Dans la balise <html>, ajoutez l'attribut ⚡4ads, qui identifie le document en tant qu'annonce AMPHTML. Vous pouvez également spécifier l'attribut amp4ads, qui est également valide.

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    ...
  </head>
</html>

REMARQUE– Contrairement aux pages AMP, les annonces AMPHTML ne nécessitent pas une balise <link rel="canonical">.

Les annonces AMPHTML nécessitent leur propre version du runtime AMP. Ajoutez donc la balise <script> suivante à la section <head> de votre document:

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

Les créations publicitaires AMPHTML nécessitent un modèle de ligne de style différent et considérablement plus simple que les pages AMP. Ajoutez le code suivant à votre section <head>:

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

Pour ajouter des styles à votre annonce AMPHTML, votre CSS doit être intégré dans le document AMPHTML à l'aide des balises <style amp-custom> dans la section <head>. Comme nous affichons une annonce illustrée de base, nous n'avons pas besoin de CSS, et n'ajouterons donc pas ces balises.

REMARQUE – Pour les annonces AMPHTML, la taille maximale pour une feuille de style intégrée est de 20 ko. Plus de détails sur les exigences CSS dans les spécifications d'annonce AMPHTML.

Voici le code complet de votre fichier 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>

Vous avez maintenant une annonce AMPHTML valide, quoique plutôt vide. Créons l'annonce illustrée.

Commencer