Pour concevoir une création dynamique, vous devez associer une liste des différentes options de contenus (généralement enregistrées dans une feuille de calcul) qui sont intégrées dans la création à différents "conteneurs" incluant du texte, des images ou des vidéos. Ces "conteneurs" correspondent à des tags div ou à d'autres éléments HTML.
Vous pouvez également transmettre d'autres informations de la feuille de calcul vers une variable dans votre création, qui sera utilisée pour contrôler l'apparence de cette dernière. Par exemple, vous pouvez enregistrer trois palettes de couleurs (bleu, vert et violet) dans votre feuille de calcul, puis appliquer des règles qui sélectionnent l'une de ces palettes pour une audience spécifique conformément aux règles définies dans votre profil dynamique. Lorsque l'annonce est diffusée, la règle transmet l'une des palettes de couleur à votre création, et le code de cette dernière affiche un contenant correspondant à cette palette.
Avant de commencer
Avant de connecter des données dynamiques à votre création, vous devez concevoir la structure de base de la création, prévoir le texte du titre, les images et les autres éléments de conception qui forment votre annonce.
Si vous n'utilisez pas Google Web Designer, votre création doit inclure le composant Enabler de Studio et le code doit déjà être ajouté pour suivre les sorties, les compteurs ou les minuteurs. Pour en savoir plus, consultez nos guides de création.
Les étapes ci-dessous présentent la conception de créations à l'aide d'autres logiciels d'édition HTML.
Déterminer quels éléments de la création sont dynamiques
Lors de la conception de la création, il vous faut identifier les éléments d'annonce à permuter de façon dynamique et déterminer leur nombre. Également appelés éléments dynamiques, ils incluent généralement, mais sans s'y limiter, les composants suivants :
- Texte
- Images
- URL de sortie
- Vidéos
Créer une mise en correspondance dynamique
Afin de mieux visualiser la façon dont le contenu du flux est intégré dans la création, générez un plan du contenu dynamique, c'est-à-dire une maquette de l'annonce qui met clairement en évidence les éléments dynamiques. La mise en correspondance dynamique ci-dessous, par exemple, inclut les éléments dynamiques suivants : un texte de titre, une image de produit, une incitation à l'action et un message publicitaire. Des remarques utiles s'affichent également sur le côté.
É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é.
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 séparé.
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 valeursEnabler.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 : 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);
}
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".