Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal

Concevoir une création dynamique au format HTML5

Pour concevoir une création dynamique, vous devez associer les données dynamiques qui sont intégrées dans la création à différents "conteneurs" incluant du texte, des images, des vidéos et des variables. Ces "conteneurs" correspondent à des tags div ou à d'autres éléments HTML.

Si vous voulez générer une création dans Google Web Designer, consultez plutôt notre guide de conception de créations dynamiques avec Google Web Designer.

Avant de commencer

Vérifiez que les conditions suivantes sont remplies :

  • Vous disposez d'une création HTML5 déjà configurée pour Studio (elle charge le fichier Enabler.js, inclut des statistiques de suivi, etc.), conformément aux directives des guides de conception de créations HTML5.
  • Vous connaissez déjà la procédure de conception d'une création dynamique (pour en savoir plus, consultez l'article du centre d'aide intitulé Créations dynamiques de base et avancées).

Adobe Edge Animate n'est pas compatible avec les créations dynamiques et n'est plus activement développé. Veuillez utiliser Google Web Designer ou un autre outil de création.

Étape 1 : Coller le code de configuration à partir de Studio

Après avoir configuré un profil dans Studio, vous devez l'associer à votre création HTML5 afin de créer une fonctionnalité dynamique. Pour ce faire, copiez le code de configuration obtenu à l'Étape 4 : Générer le code dans l'onglet "Contenu dynamique" de Studio. Sélectionnez le bouton HTML5, puis copiez et collez dans la création le code HTML5 que vous avez généré. Cette étape n'est pas obligatoire pour les créations conçues dans Google Web Designer.

Les exemples de code JavaScript présentés ci-dessous peuvent être intégrés au fichier .html ou placés dans un fichier .js distinct.

Exemple de code de configuration obtenu à l'Étape 4 : Générer le code
<!-- DynamicContent Start: HTML5 invocation code. -->
// Variables de contenu dynamique et exemples de valeurs
Enabler.setProfileId(12345);
var devDynamicContent = {};
devDynamicContent.SampleElement = [{}];
devDynamicContent.SampleElement[0]._id = 0;
devDynamicContent.SampleElement[0].headline = "Titre";
devDynamicContent.SampleElement[0].image_url = {};
devDynamicContent.SampleElement[0].image_url.Url =
"http://yourServer/sample.jpg";
devDynamicContent.SampleElement[0].landing_url = {};
devDynamicContent.SampleElement[0].landing_url.Url =
"http://www.yoursite.com";
Enabler.setDevDynamicContent(devDynamicContent);

 

<!--
* Vous pouvez accéder aux variables comme suit :
* APRÈS l'initialisation du composant Enabler de Studio :
* var price = dynamicContent.Product[0].price;
* Remarque : Veillez à utiliser "dynamicContent", et non "devDynamicContent".
-->

Étape 2 : Associer les données dynamiques

Ajoutez le code permettant d'associer les données dynamiques aux différents éléments de la création (par exemple, texte, images et URL de sortie). Veillez à effectuer cette opération une fois que le composant Enabler a été initialisé.

Lorsque vous écrivez du code permettant d'accéder à des données dynamiques, utilisez dynamicContent, et non devDynamicContent, comme indiqué dans le code de configuration ci-dessus et illustré dans les exemples ci-dessous.

Exemple de code utilisant des données dynamiques

Exemple : Définition de texte dynamique


document.getElementById('headline').innerHTML =
    dynamicContent.SampleElement[0].headline;

Exemple : Définition d'une image dynamique

document.getElementById('background').src =
    dynamicContent.SampleElement[0].image_url.Url

Exemple : Définition d'une URL de destination dynamique

document.getElementById('cta').addEventListener('click', ctaHandler);

function ctaHandler() {
  Enabler.exitOverride(
      "yourExitID",
      dynamicContent.SampleElement[0].landing_url.Url);

}

Dans les exemples ci-dessus, le contenu dynamique est référencé directement. Une autre approche consiste à créer un objet, à lui ajouter les éléments dynamiques sous la forme de propriétés, puis à référencer directement les propriétés de l'objet. Cette méthode peut rendre le code plus lisible et plus facile à modifier. Consultez l'exemple ci-dessous.

Exemple :

var data = {};
data.headline = dynamicContent.SampleElement[0].headline;

Suite du code :

document.getElementById('headline').innerHTML = data.headline;

Étape 3 : Tester différentes valeurs dynamiques

Avant d'importer votre création dans Studio, vous devez tester différentes valeurs possibles pour le contenu dynamique. Dans le flux, recherchez une plage de valeurs à tester. Il peut par exemple s'agir de différentes URL d'images dynamiques ou de différentes chaînes de texte, en particulier pour les "cas limites" faisant intervenir du texte très long ou très court. Intégrez chaque valeur dans le code de configuration de votre création, puis prévisualisez les résultats. Vous pourrez ainsi détecter les problèmes à l'avance au lieu d'attendre qu'ils soient identifiés lors du contrôle qualité.

Par ailleurs, si vous le souhaitez, vous pouvez modifier les valeurs du code de configuration pour indiquer clairement qu'il s'agit de valeurs de développement :

<!-- DynamicContent Start: HTML5 invocation code. -->
// Variables de contenu dynamique et exemples de valeurs
// ...
devDynamicContent.SampleElement[0].headline = "Titre par défaut";

De cette façon, lorsque vous visualisez la création dans un aperçu dynamique (ou avec un tag actif), vous pouvez déterminer si elle utilise les valeurs de développement du code de configuration, plutôt que les données dynamiques "réelles".

Cet article vous a-t-il été utile ?