Le module Dynamic Content (contenu dynamique) vous permet de remplacer les composants web statiques et de les transformer en expériences dynamiques en les contrôlant directement à partir de la console Experience OS. Les cas d’utilisation de Dynamic Content incluent des bannières dynamiques basées sur des règles, des renvois intelligents vers du contenu supplémentaire (plutôt que des listes statiques devant être mises à jour manuellement), des curseurs dynamiques avec du contenu basé sur des flux de données, et bien d’autres choses encore.
Créer une campagne Dynamic Content
- Allez dans Personnalisation du site › Nouvelle campagne et cliquez sur Dynamic Content.
- Saisissez un nom et ajoutez éventuellement des notes et des étiquettes.
- Spécifiez les paramètres de la campagne, tels que la mise en page, l’emplacement et les paramètres avancés. Pour plus de détails, consultez Paramètres de la campagne Dynamic Content.
- Configurez les paramètres de ciblage de l’expérience pour déterminer quand, où et pour qui l’expérience est affichée.
- Créez des variations à l’aide de modèles, en vous basant sur d’autres expériences ou en utilisant un flux de données. Lorsque vous avez terminé avec chaque variation, cliquez sur Enregistrer la variation.
- Définissez les paramètres d’allocation, de mesure principale, et d’expérience avancée.
- Configurez la quantité de trafic à allouer à chaque variation et au groupe témoin.
- Cliquez sur Enregistrer l’expérience.
- Vous pouvez créer des expériences supplémentaires dans cette campagne en cliquant sur l’icône Plus.
- Pour les campagnes utilisant un code d’intégration comme emplacement, copiez et collez le code dans le code source de votre site. Pour récupérer le code, après avoir enregistré une campagne, survolez le nom de la campagne et cliquez sur l’icône de code pour la boîte de dialogue du code d’intégration.
Paramètres de la campagne Dynamic Content.
Mise en page
Après avoir donné un nom unique à la campagne, sélectionnez son type de mise en page.
- Unique : une variation parmi toutes les variations disponibles est affichée au visiteur.
- Liste d’éléments : un groupe de bannières présentées ensemble. Le rendement dynamique choisira le meilleur ensemble de variations, en les triant automatiquement par performance (la meilleure variation en premier, et ainsi de suite), en fonction de l’indicateur principal.
- Diaporama : semblable à la liste d’éléments, mais présentée sous la forme d’un carrousel.
Emplacement
Le contenu dynamique peut être inséré et placé sur n’importe quelle page de votre site web à l’aide des méthodes suivantes :
- Remplacer l’élément : le rendement dynamique présente le contenu dynamique en remplaçant un élément existant sur votre site sans ressource technique ou informatique. Vous spécifiez l’élément à remplacer sous la forme d’un sélecteur CSS.
- Ajouter après l’élément : cette méthode est identique à celle du remplacement d’élément, mais l’élément est placé juste après un sélecteur CSS spécifique.
- Ajouter avant l’élément : identique à la méthode Remplacer l’élément, mais l’élément est placé juste avant un sélecteur CSS spécifique.
- Intégrer avec du code : intégrez le contenu dynamique directement dans le code source de votre site web (il ne sera pas rendu par le rendement dynamique). Après avoir publié la campagne, survolez le nom de la campagne et cliquez sur l’icône de code pour localiser le code.
Pour les trois premières options, vous devez spécifier les pages sur lesquelles le rendement dynamique doit rendre la campagne.
Définition de la mise en page de la liste d’éléments
Vous pouvez configurer une liste d’éléments pour qu’elle affiche les variations horizontalement ou verticalement à l’aide des options de mise en page prédéfinies de la liste d’éléments.
Toutefois, si vous souhaitez configurer une présentation différente, telle qu’une grille, ou ajouter du code HTML à la présentation, vous pouvez créer votre propre présentation personnalisée comme suit :
(Consultez les exemples de code de mise en page personnalisée)
- Lors de la création ou de la modification d’une liste d’éléments de Dynamic Content, sélectionnez Personnalisée dans la zone Mise en page de la liste d’éléments.
- Effectuez l’une des opérations suivantes
- Définir une balise enveloppant toutes les variations pour remplacer la balise <div> par défaut enveloppant toutes les variations par une balise HTML différente. Par exemple : <ul>
- Définir une balise enveloppant chaque variation pour remplacer la balise <div> par défaut, enveloppant chaque variation par une balise HTML différente. Par exemple : <li>
- Ajoutez du CSS ou du JS au conteneur de la liste d’éléments. Ceci s’applique à toutes les variations dans l’éditeur de code.
- Ajouter du code HTML avant les éléments or du code HTML après les éléments. Ceci est utile pour les textes d’en-tête et de pied de page.
- Définir une balise enveloppant toutes les variations pour remplacer la balise <div> par défaut enveloppant toutes les variations par une balise HTML différente. Par exemple : <ul>
Paramètres avancés
| Paramètre | Description |
|---|---|
| Déclencher l’événement Google Analytics |
Visible uniquement si l’intégration de Google Analytics est activée. Cette option est activée par défaut, mais vous pouvez la désactiver pour empêcher la transmission à Google Analytics de données relatives à un contenu dynamique spécifique. |
| Exécuter des intégrations personnalisées | Exécuter un code JavaScript personnalisé lorsqu’une variation est rendue. Les intégrations personnalisées sont gérées sur l’écran d’intégration, dans les paramètres du site. Cette option n’est visible que si une intégration personnalisée est activée. |
| Rendre sur chaque événement SPA |
Pertinent pour les applications à page unique qui ne génèrent pas de rafraîchissement du navigateur à chaque changement d’écran. Si vous souhaitez que Dynamic Content relance ou réévalue ses conditions de ciblage à chaque changement d’écran dans votre application monopage, déclenchez un événement track_pageview et activez cette option. Pour plus d’informations sur les applications monopage, veuillez consulter cet article. |
| Optimiser le temps de chargement du site | Stocker l’expérience hors site pour maximiser la vitesse de chargement du site. Recommandé principalement pour les expériences en dessous du pli afin de réduire le risque de scintillement. |
| Attendre |
Empêche le rendu du contenu dynamique tant qu’un élément n’a pas été chargé ou qu’une condition n’a pas été remplie. Utilisé principalement à des fins de dépannage ou pour s’assurer que Google Analytics assure correctement le suivi du contenu dynamique. Sélectionnez l’une des options suivantes : |
|
Ne rien attendre avant d’afficher le contenu dynamique. |
|
Attendre le chargement d’un élément sur la page, défini comme un sélecteur CSS. |
|
Attendre que la bibliothèque JQuery charge |
|
Attente que Google Analytics (Classic) charge |
|
Attendre que Google Analytics (Universal) charge |
|
Attendre que les données de Dynamic Yield (telles que les mesures de preuve sociale) charge |
|
Attendre qu’une fonction JavaScript personnalisée charge la page |
Épingler une variation
Lorsque vous utilisez des listes d’éléments et des présentations de type curseur, vous pouvez sélectionner une variante pour qu’elle soit toujours la première à apparaître. Sous les actions de variation, sélectionnez Épingler une variation. Une seule variation peut être épinglée dans chaque expérience.
Remarque : l’épinglage de variations n’est pas pris en charge pour les variations créées à l’aide du flux de variations.
Exemples de code pour la mise en page personnalisée de la liste d’éléments
Vous pouvez utiliser les exemples de code CSS suivants pour créer votre propre mise en page de liste d’éléments personnalisée.
Disposition horizontale
Affichez les éléments les uns à côté des autres sur une seule ligne :
CSS :
.dy-container-${dyTagId} {
display: flex;
}
.dy-item-${dyTagId} {
flex:1;
margin-right:20px;
}
.dy-item-${dyTagId}:last-of-type {
margin-right:0px;
}
Disposition verticale
Affiche les éléments les uns au-dessus des autres dans une seule colonne :
CSS :
.dy-item-${dyTagId} {
margin-bottom:20px;Disposition en grille : grandes bannières
Affiche les éléments dans une grille avec un maximum de trois éléments par ligne. Le nombre d’éléments par ligne peut être inférieur en fonction de la taille de l’écran.
- 768 px ou plus : 3 éléments par ligne
- De 321 px à 767 px : 2 éléments par ligne
- 320 px ou moins : 1 élément par ligne
Cet exemple est conçu pour des expériences comportant au moins 6 variations.
CSS :
.dy-container-${dyTagId} {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
}
@media only screen and (max-width: 767px) {
.dy-container-${dyTagId} {
grid-template-columns: auto auto;
}
}
@media only screen and (max-width: 320px) {
.dy-container-${dyTagId} {
grid-template-columns: auto;
}
}
Disposition en grille : petites bannières
Affiche les éléments dans une grille avec un maximum de 6 éléments par ligne. Le nombre d’éléments par ligne peut être inférieur en fonction de la taille de l’écran :
- 1681 px ou plus : 6 éléments par ligne
- De 1023 px à 1366 px : 5 éléments par ligne
- De 768 px à 1024 px : 4 éléments par ligne
- De 321 px à 767 px : 3 éléments par ligne
- 320 px ou moins : 2 éléments par ligne
Cet exemple est conçu pour des expériences comportant au moins 12 variations.
CSS :
.dy-container-${dyTagId} {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-gap: 20px;
}
@media only screen and (max-width: 1366px) {
.dy-container-${dyTagId} {
grid-template-columns: auto auto auto auto auto;
}
}
@media only screen and (max-width: 1024px) {
.dy-container-${dyTagId} {
grid-template-columns: auto auto auto auto;
}
}
@media only screen and (max-width: 767px) {
.dy-container-${dyTagId} {
grid-template-columns: auto auto auto;
}
}
@media only screen and (max-width: 320px) {
.dy-container-${dyTagId} {
grid-template-columns: auto;
}
}