Spécification de création HTML5 pour Advertising Creative

Last update: Wed Mar 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Rubriques :

Créé pour :

Utilisateur ou utilisatrice

Ce document décrit les exigences et la prise en charge de l’API pour les contenus publicitaires HTML5 dans Creative. L’API prend en charge le développement des contenus publicitaires HTML5 dont les attributs peuvent être configurés au moment de la diffusion des contenus publicitaires.

Champ d’application

Creative prend en charge les bannières HTML5 avec des contenus publicitaires non enrichis qui apparaissent dans des bordures définies sur une page. Vous pouvez utiliser les types de contenus publicitaires HTML5 suivants :

HTML5: prend en charge jusqu’à 5 URL de page de destination configurables lors de la création créative et du trafic.
Flexible HTML5: prend en charge jusqu’à 5 URL de page de destination pouvant être configurées lors de la création créative et du trafic. Il permet également de modifier les attributs créatifs lors de la création créative et du trafic.

Conditions requises

Exigences relatives aux dossiers et à la compression

Le contenu créatif doit être compressé dans un fichier ZIP (format .ZIP). Les fichiers ZIP imbriqués ne sont pas pris en charge. N’incluez donc pas de dossier compressé dans le dossier compressé externe.
Le fichier ZIP doit contenir au moins un fichier HTML, le fichier d’affichage HTML principal, qui inclut une référence à la bibliothèque JavaScript Creative. Le fichier HTML principal peut se trouver dans le dossier racine ou dans un sous-dossier.
Le fichier HTML principal peut être nommé comme bon vous semble, à condition qu’il n’inclue pas de caractères spéciaux, bien que index.html soit recommandé.
Toutes les ressources nécessaires au rendu de la création finale doivent se trouver dans le même dossier que le fichier d’affichage HTML ou dans des sous-dossiers du dossier principal.
N’incluez dans le contenu créatif aucun fichier auquel il ne fait pas référence.

Inclusion du fichier JavaScript Advertising Creative

Le fichier HTML principal (et aucun autre fichier) doit contenir une référence au fichier JavaScript AMOLibrary.js. Appelez le fichier à la première ligne de la section <head> en utilisant l’adresse suivante :

https://ads.everesttech.net/ads/static/local/AMOLibrary.js

Ce fichier contient des fonctions pour s’assurer que le test local des événements de sortie se produit sans problème.

Exigences créatives d’HTML5

Prise en charge des URL de clics publicitaires dans l’HTML statique 5

`amo.registerClick(clkVar, clkUrl)`

Enregistre les URL de clics publicitaires et le paramètre associé utilisé pour référencer chaque URL (connu sous le nom de clickTag). Cette API indique au serveur de publicités Creative où ajouter le suivi des clics. Vous pouvez utiliser cette API pour enregistrer jusqu’à cinq variables de balises de clic, chacune avec une URL de page de destination correspondante.

NOTE

Les URL statiques que vous incluez dans le contenu créatif d’HTML5 sont utilisées uniquement à des fins de test local et seront remplacées. Lorsque vous téléchargez un contenu créatif HTML5, vous définissez la page de destination par défaut pour chaque variable clickTag. Lorsque vous affectez un contenu créatif HTML5 chargé à une expérience publicitaire, vous pouvez éventuellement remplacer la page de destination par défaut pour chaque variable clickTag, et Creative ajoute le suivi des clics aux URL lorsque vous enregistrez l’expérience.

Paramètres

clkVar : nom de la variable de clic (généralement « clickTag »), entre guillemets.
clkUrl : URL de la page de destination de cette variable de clic, entre guillemets doubles.

Utilisation

Appelez amo.registerClick() dans la section <head> du fichier HTML principal.

Exemple

amo.registerClick("clickTag","http://www.example.com")

`amo.onAdClick(clk, event)`

Déclenche l’événement de sortie, qui redirige l’utilisateur vers la page de destination configurée pour le clickTag. Lors des tests locaux, cette fonction avertit les développeurs si l’URL transmise à la fonction a été enregistrée.

Paramètres

clkTag : nom de la variable de clic que vous utilisez pour attribuer l'URL de la page de destination à l'aide de la fonction amo.registerClick(), entre guillemets simples.
event — (Facultatif) Objet d’événement « clic » JavaScript. Cette option enregistre les coordonnées des clics, qui peuvent ensuite être utilisées pour analyser les performances créatives.

Utilisation

Appelez amo.onAdClick() dans la section <body> du fichier HTML principal.

Exemples

amo.onAdClick('clickTag') OU amo.onAdClick('clickTag',clickEvt)

Exigences de création HTML5 flexibles

Prise en charge des URL de clic publicitaire dans HTML5 flexible

`amo.registerClick(clkVar, clkUrl)`

NOTE

Paramètres

clkVar : nom de la variable de clic (généralement « clickTag »), entre guillemets.
clkUrl : URL de la page de destination de cette variable de clic, entre guillemets doubles.

Utilisation

Appelez amo.registerClick() dans la section <head> du fichier HTML principal.

Exemple

amo.registerClick("clickTag","http://www.example.com")

`amo.onAdClick(clk, event)`

Paramètres

clkTag : nom de la variable de clic que vous utilisez pour attribuer l'URL de la page de destination à l'aide de la fonction amo.registerClick(), entre guillemets simples.
event — (Facultatif) Objet d’événement « clic » JavaScript. Cette option enregistre les coordonnées des clics, qui peuvent ensuite être utilisées pour analyser les performances créatives.

Utilisation

Appelez amo.onAdClick() dans la section <body> du fichier HTML principal.

Exemples

amo.onAdClick('clickTag') OU amo.onAdClick('clickTag',clickEvt)

Prise en charge des attributs créatifs dans HTML5 flexible

`amo.registerAttribute(key, type, value)`

Définit les attributs des contenus publicitaires qui peuvent être modifiés au moment de la création ou de l’expérience. Vous pouvez définir jusqu’à 20 attributs de création configurables au moment de la création de contenu créatif ou d’expérience.

NOTE

Les valeurs définies dans cette méthode sont utilisées uniquement pour le développement local et ne sont pas utilisées dans les services de publicités en direct.

Paramètres

key : nom alphanumérique de l'attribut. Il doit commencer par un caractère alphabétique.
type — Type d'attribut (TEXT ou IMAGE).
value — Valeur de l'attribut pour le test. Pour les attributs de type IMAGE, la valeur doit être le chemin d’accès relatif au fichier image.

Utilisation

Appelez amo.registerAttribute() pour enregistrer un attribut créatif, un type et une valeur lors du test en mode local. Tous les fichiers image utilisés comme exemples de valeurs doivent être compressés dans le fichier ZIP avec le package chargé.

`amo.attributes`

Objet JSON pour interroger les noms et valeurs des variables d’attributs de création. Les clés d’objet sont les noms d’attribut et les valeurs sont les valeurs de ces attributs.

En mode de test local, les paires clé-valeur sont les paires enregistrées par l’API amo.registerAttribute. Pour la production, les noms et valeurs des variables d’attributs créatifs doivent être configurés au moment de la création créative et du trafic.

Exigences de contenu Creative

La plupart des échanges d’affichage disponibles dans Advertising DSP ont les exigences de création suivantes :

Une bordure pleine doit entourer toutes les images publicitaires.
L’extension des annonces n’est pas autorisée.
La page de destination doit s’ouvrir dans une nouvelle fenêtre.
Le domaine de la page de destination et ses sous-domaines ne doivent pas dépasser 35 caractères. Remarque : les URL de la page de destination finale sont définies dans le DSP et non dans les ressources HTML5 elles-mêmes.
Toutes les clauses de non-responsabilité concernant l’offre d’une publicité doivent être incluses dans la publicité elle-même, et pas seulement sur la page de destination.

Exemple de contenu en tant qu’objet et tableau JSON

Exemple de contenu en tant qu’objet JSON

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
}

Exemple de contenu en tant que tableau JSON

[{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-assets-720x472.png",
"product_url": "http://www.adobe.com/creativecloud.html?promoid=ZP46FD38&mv=other"
},

{
"name": "Adobe Creative",
"description": "Creative",
"picture_url": "http://wwwimages.adobe.com/content/dam/acom/en/products/creativecloud/max2016/images/cc-overview-mobile-720x520.png",
"product_url": "http://adobe.com/"
}

]

Exemple de contenu créatif HTML5

Exemple de structure de dossiers (après décompression)

index.html
/assets (dossier)
- bg.jpg (image JPG, PNG, SVG ou GIF)

Exemple de fichier HTML (index.html) pour les contenus publicitaires HTML5 simples

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>

Exemple de fichier HTML (index.html) pour les contenus publicitaires HTML5 statiques

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://ads.everesttech.net/ads/static/local/AMOLibrary.js"></script>
  <script type="text/javascript">
  amo.registerClick("clickTag","http://www.example.com");
  amo.registerClick("clickTag2","http://www.example2.com");
  amo.registerClick("clickTag3","http://www.example3.com");
  amo.registerClick("clickTag4","http://www.example4.com");
  amo.registerClick("clickTag5","http://www.example5.com");
  </script>
</head>
<body>
  <a href="javascript:amo.onAdClick('clickTag')">
  <img src="assets/bg.jpg" width="300" height="250" style="position:absolute;top:0px;left:0px;">
  </a>
</body>
</html>

recommendation-more-help

81c37de9-89dd-4749-9a04-e9f8c86dd51a