Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Les concepteurs de contenu fournissent à la fois un éditeur graphique et un éditeur de code HTML. Le code HTML qu’ils génèrent est compatible avec n’importe quel convertisseur HTML, mais il prend également en charge quelques attributs personnalisés qui prennent en charge les éléments de conception glisser-déplacer et les paramètres de style généraux fournis par l’éditeur graphique. Les modèles de message par défaut et les modèles de page fournis avec Dynamics 365 Customer Insights - Journeys utilisent ces attributs personnalisés pour faciliter leur personnalisation de manière spécifique. Vous pouvez également utiliser ces attributs personnalisés lors de la conception de vos propres modèles.
Conseil / Astuce
Microsoft ne prend pas en charge le code HTML personnalisé dans les e-mails.
Résumé des balises et des attributs
Le tableau suivant fournit une référence rapide aux attributs personnalisés et aux balises meta décrites dans cet article.
| Attribut personnalisé | Descriptif |
|---|---|
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document"> |
Lorsque cette balise est présente dans le <head> document, l’onglet Concepteur fournit des fonctionnalités de glisser-déplacer. Si cette balise n’est pas présente, l’onglet Concepteur fournit l’éditeur de page complète simplifié. Pour en savoir plus : Afficher la boîte à outils et activer l'édition glisser-déposer |
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>"> |
Lorsque cette balise est présente dans le <head> document, les polices répertoriées dans la <liste> de polices (séparées par des points-virgules) sont ajoutées au menu de police dans la barre d’outils de mise en forme des éléments de texte. Plus d’informations : Ajouter de nouvelles polices à la barre d’outils de l’élément de texte |
<div data-container="true"> … </div> |
Marque le début et la fin d’un conteneur où les utilisateurs peuvent faire glisser et déposer des éléments de conception. Plus d’informations : Créer un conteneur dans lequel les utilisateurs peuvent ajouter des éléments de conception |
<div data-editorblocktype="<element-type>"> … </div> |
Marque le début et la fin d’un élément de conception. La valeur de l’attribut identifie le type d’élément qu’il contient (texte, image, bouton, etc.). Certains éléments de conception prennent en charge des attributs supplémentaires ici. Plus d’informations : Identifier les éléments de conception et verrouiller les éléments en mode Concepteur |
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>"> |
Cette balise définit un paramètre de style à l’échelle du document que les utilisateurs peuvent modifier à l’aide de l’ongletStyles>. Plus d’informations : Ajouter des paramètres à l’onglet Styles |
/* @<tag-name> */ … /* @<tag-name> */ |
Utilisez des commentaires CSS comme ceux-ci pour entourer une valeur CSS à contrôler par un paramètre de style, où <tag-name> est la valeur de l’attribut de nom pour la balise meta qui a établi le paramètre. Plus d’informations : Ajouter des commentaires CSS pour implémenter des paramètres de style dans la tête |
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …" |
Placez cet attribut dans n’importe quelle balise HTML pour placer un attribut avec une valeur contrôlée par un paramètre de style, où <attr> est le nom de l’attribut à créer et <tag-name> est la valeur de l’attribut name pour la balise meta qui a établi le paramètre. Plus d’informations : Ajouter des attributs de référence de propriété pour implémenter des paramètres de style dans le corps |
Les sections restantes de cet article fournissent plus d’informations sur l’utilisation de chacune des fonctionnalités résumées dans le tableau.
Afficher la boîte à outils et activer l'édition par glisser-déposer
Vous pouvez coller du code HTML développé dans n’importe quel outil tiers directement dans l’onglet HTML du concepteur pour commencer à créer rapidement une conception. Toutefois, lorsque vous effectuez cette opération, l’onglet Concepteur s’affiche sous la forme d’un éditeur de texte unique qui fournit une barre d’outils de mise en forme de texte et affiche toutes les images, liens et styles inclus dans votre code HTML, mais ne fournit pas d’onglets Boîte à outils, Propriétés ou Styles , ou toute fonctionnalité de glisser-déplacer (ce mode Concepteur simplifié est parfois appelé éditeur de page complète). Toutefois, vous pouvez activer la fonctionnalité glisser-déplacer pour toute conception collée en ajoutant la balise meta suivante à la <head> section de votre document :
<meta type="xrm/designer/setting" name="type" value="marketing-designer-content-editor-document">
L’image suivante montre la même conception en mode d’édition de page complète (à gauche) et en mode glisser-déplacer (à droite). La seule différence est que la conception à droite inclut la balise meta, de sorte que le glisser-déplacer est activé, et le panneau latéral est affiché.
Note
Lorsque vous utilisez l’éditeur de page complète, vous pouvez toujours sélectionner, modifier et styler du texte à l’aide de la barre d’outils de mise en forme du texte (illustré) et double-cliquer sur des images, des liens et d’autres éléments pour définir leurs propriétés à l’aide d’une boîte de dialogue contextuelle. La barre d’outils inclut également le bouton d’aide à modifier
pour ajouter du contenu dynamique, tel que des valeurs de champ tirées de l’enregistrement de contact de chaque destinataire.
Créer un conteneur dans lequel les utilisateurs peuvent ajouter des éléments de conception
Sous l’onglet Concepteur , les utilisateurs peuvent uniquement modifier le contenu contenu dans un élément de conception et peuvent uniquement faire glisser de nouveaux éléments de conception dans les parties du document configurées en tant que conteneurs de données. Par conséquent, vous pouvez créer des modèles où certaines zones (en dehors des conteneurs) sont verrouillées à la modification sous l'onglet Création, tandis que d'autres zones (à l'intérieur de conteneurs déverrouillés) acceptent les modifications et le contenu glissé-déposé.
Utilisez <div> des balises qui incluent l’attribut data-container="true" pour créer des conteneurs de données, tels que :
<table aria-role="presentation">
<tbody><tr>
<td>
LOCKED
</td>
<td>
<div data-container="true">
<!-- DRAG HERE -->
</div>
</td>
</tr>
</tbody></table>
Tout texte ou balises HTML imbriquées dans une paire de balises div data-container et qui ne font pas partie d’un élément de conception, créeront une zone non éditable et non déplaçable entre deux zones déplaçables. Par exemple:
<div data-container="true">
<!-- DRAG HERE --> <p> LOCKED </p> <!-- DRAG HERE -->
</div>
Note
Lorsque l’éditeur de page complète est activé, toutes les fonctionnalités de glisser-déplacer sont désactivées et vous pouvez modifier tout le contenu de l’onglet Concepteur , y compris le contenu en dehors des data-container balises div (qui n’ont aucun effet dans l’éditeur de page complète).
Verrouiller un conteneur en mode Concepteur
Vous pouvez verrouiller un conteneur pour rendre tout son contenu en lecture seule sous l’onglet Concepteur . Si un conteneur verrouillé contient des éléments de conception, tout le contenu et les paramètres de ces éléments restent verrouillés, et l’onglet Propriétés ne s’affiche jamais pour eux, même si vous les sélectionnez.
Vous pouvez utiliser la fonctionnalité de verrouillage de conteneur pour verrouiller un conteneur une fois que vous avez terminé d’ajouter et de configurer des composants de conception pour celui-ci.
Pour verrouiller un conteneur, ajoutez l’attribut data-locked="hard" à la balise de conteneur, comme suit :
<div data-container="true" data-locked="hard">
<!-- All elements and content here are locked, with no properties shown -->
</div>
Note
Vous pouvez également verrouiller le contenu au niveau de l’élément de conception. Si le contenu est verrouillé au niveau du conteneur, ce paramètre remplace l’état verrouillé/déverrouillé de tous les éléments de conception à l’intérieur de ce conteneur. Plus d’informations : Verrouiller les éléments en mode Concepteur
Pour appliquer davantage le verrouillage de conteneur, vous pouvez limiter l’accès à l’onglet HTML , ce qui empêchera les utilisateurs sélectionnés d’accéder au code (où ils pourraient autrement vaincre ce paramètre). Plus d’informations : Contrôler l’accès aux fonctionnalités du concepteur
Identifier les éléments de conception
Chaque fois que vous ajoutez un élément de conception à l’aide de l’onglet Concepteur , l’éditeur insère une paire de <div> balises pour marquer le début et la fin de l’élément, et crée le code HTML requis pour afficher l’élément comme spécifié dans ses paramètres sous l’onglet Propriétés .
Les éléments de conception sont marqués avec <div> des balises qui incluent un attribut du formulaire data-editorblocktype="<element-type>", où la valeur de cet attribut identifie le type d’élément qu’il est. Par exemple, la balise suivante <div> crée un élément de texte :
<div data-editorblocktype="Text">
...
<!-- Don't edit the element content here -->
...
</div>
Le tableau suivant répertorie les valeurs disponibles pour l’attribut data-editorblocktype .
| Nom de l’élément de design | Type d’élément |
data-editorblocktype valeur d’attribut |
|---|---|---|
| Élément Texte | Élément de conception commun | Texto |
| Élément image | Élément de conception commun | Image |
| Élément séparateur | Élément de conception commun | Diviseur |
| Élément bouton | Élément de conception commun | Bouton |
| Élément de bloc de contenu | Élément de conception commun | Content (Ce type d’élément de conception inclut également un data-block-datatype="<block-type>" attribut, qui identifie le type de bloc de contenu qu’il est, où <le type> de bloc a une valeur de textimage.) |
| Élément de page marketing | Messagerie électronique | Page de Marketing |
| Événement élément | Messagerie électronique | Événement |
| Élément de sondage | Messagerie électronique | Survey |
| élément de formulaire | Formulaire | FormBlock |
| Field, élément | Contenu du formulaire | Champ-nom-du-champ<>, par exemple : Champ-email |
| Élément de la liste d'abonnement | Contenu du formulaire | SubscriptionListBlock |
| Élément Transférer à un ami | À partir du contenu | ForwardToFriendBlock |
| Élément Ne pas envoyer de courrier électronique et élément Se souvenir de moi | Contenu du formulaire | Case à cocher de champ (Ces éléments créent chaque case à cocher et sont autrement différenciés par leurs paramètres internes.) |
| Élément Submit-button | Contenu du formulaire | BlocBoutonSoumettre |
| Élément bouton de réinitialisation | Contenu du formulaire | BlocBoutonRéinitialiser |
| Élément Captcha | Contenu du formulaire | CaptchaBlock |
Pour plus d’informations sur chacun de ces éléments de conception, consultez référence des éléments de conception.
Important
Lorsque vous travaillez sur l’onglet HTML , vous devez éviter de modifier le contenu entre les <div> balises de vos éléments de conception, car les résultats de cette opération peuvent être imprévisibles et vos modifications sont susceptibles d’être remplacées par le concepteur de toute façon. Utilisez plutôt l’onglet Concepteur pour gérer le contenu et les propriétés de votre élément de conception.
Verrouiller des éléments en mode Concepteur
Vous pouvez verrouiller le contenu et les propriétés de n’importe quel élément de conception en ajoutant l’attribut suivant à sa balise d’ouverture <div> :
data-protected="true"
Par exemple:
<div data-editorblocktype="Divider" data-protected="true">
…
<!-- Don't edit the element content here -->
…
</div>
Lorsqu’un élément de conception est marqué comme protégé, les utilisateurs travaillant sous l’onglet Concepteur pour une page ou un e-mail ne pourront pas modifier les propriétés ou le contenu de l’élément. Cet attribut est toujours inclus pour l’élément content-block, mais vous pouvez l’ajouter à n’importe quel type d’élément de conception pour le protéger. Tout élément de conception qui inclut cet attribut est affiché comme ombré sous l’onglet HTML pour indiquer qu’il est protégé, mais vous pouvez toujours le modifier si vous insistez. Définissez cet attribut sur « false » (ou supprimez-le simplement) pour supprimer la protection d’un élément de conception.
Note
Vous pouvez également verrouiller le contenu au niveau du conteneur, ce qui remplace l’état verrouillé/déverrouillé de tous les éléments de conception à l’intérieur de ce conteneur. Plus d’informations : Verrouiller un conteneur en mode Concepteur
Pour appliquer davantage le verrouillage du contenu, vous pouvez limiter l’accès à l’onglet HTML , ce qui empêchera les utilisateurs sélectionnés d’accéder au code (où ils pourraient autrement vaincre ce paramètre). Plus d’informations : Contrôler l’accès aux fonctionnalités du concepteur
Importer du code HTML créé en externe dans le concepteur
Vous pouvez utiliser n’importe quel outil que vous souhaitez créer la disposition HTML initiale et le contenu d’un e-mail marketing, d’une page ou d’un formulaire. Lorsque votre code HTML est prêt, collez-le dans le concepteur approprié, puis ajoutez les fonctionnalités Dynamics 365 Customer Insights - Journeys dont vous avez besoin comme décrit dans les sous-sections suivantes.
Importer votre code HTML
Pour importer du code HTML créé en externe dans le concepteur, commencez par effectuer les opérations suivantes :
- Créez un e-mail marketing, une page ou un formulaire dans Dynamics 365 Customer Insights - Journeys.
- Accédez à l’onglet Design>HTML du concepteur.
- Effacez tout le contenu de l’onglet HTML et collez le code HTML que vous avez créé en externe.
- Accédez à l’onglet Création> duCréateur et inspectez votre projet.
- Si vous travaillez avec un e-mail marketing, veillez à utiliser l’aide pour placer tout le contenu et les liens requis (y compris un lien du centre d’abonnements et votre adresse d’expéditeur physique).
Conseil / Astuce
Étant donné que vous venez de coller dans le code HTML externe, votre conception n'inclut probablement pas de code spécifique à Dynamics 365 Customer Insights - Journeys, ainsi, le Designer affiche l'éditeur de page full-page, qui fournit des fonctionnalités pour la mise en forme de texte de base, la mise en forme d'image et (pour les e-mails) assistance edit pour ajouter du contenu dynamique. Pour plus d’informations sur l’utilisation de l’éditeur de page complète, consultez Afficher la boîte à outils et activer la modification glisser-déplacer. Si l’éditeur de page complète fournit toutes les fonctionnalités dont vous avez besoin, utilisez-le pour affiner votre conception, puis vivre avec elle comme d’habitude. Si vous préférez utiliser l’éditeur glisser-déplacer pour affiner votre conception, consultez la section suivante pour plus d’informations sur son activation.
Activer l’éditeur de glisser-déplacer après l’importation
Si vous souhaitez activer l’éditeur de glisser-déplacer complet et/ou ajouter des éléments de conception avancés tout en travaillant en mode Concepteur , vous pouvez facilement le faire en modifiant davantage votre code HTML importé comme suit :
Revenez à l’onglet Design>HTML du concepteur.
Activez l’éditeur de glisser-déplacer en ajoutant la balise meta requise à la section <head> de votre document, comme décrit dans Afficher la boîte à outils et activer l'édition par glisser-déplacer.
Procédez comme suit lors de l’utilisation de l’onglet Design>HTML :
- Dans chaque partie de votre conception où vous souhaitez être en mesure de faire glisser un ou plusieurs éléments de conception, ajoutez du code pour créer un conteneur de données, comme décrit dans Créer un conteneur où les utilisateurs peuvent ajouter des éléments de conception.
- Si vous préférez positionner des éléments de conception directement dans votre code sans utiliser de glisser-déplacer, vous pouvez entrer le code requis directement dans l'onglet Design>HTML. Les éléments que vous ajoutez de cette façon ne prennent pas en charge le glisser-déplacer, mais ils fournissent des paramètres dans le volet Propriétés de l'onglet Concepteur>Design. Vous pouvez uniquement placer du texte, une image, un séparateur et des éléments de bouton à l’aide de cette technique (créer des conteneurs, et utiliser le glisser-déplacer pour d’autres types d’éléments de conception). Consultez le tableau suivant cette procédure pour les structures HTML requises pour créer chacun de ces éléments ; copiez/collez ce code directement à partir de la table en fonction des besoins.
Vous pouvez maintenant accéder à l’onglet>Concepteur de conception et faire glisser les éléments de conception dans chacun des conteneurs que vous avez configurés, puis utiliser le panneau Propriétés pour configurer chaque élément de conception que vous avez déplacé ou collé directement dans votre code.
| Type d’élément de conception | Coller ce code | Remarques |
|---|---|---|
| Texto | <div data-editorblocktype="Text"><p> Enter your text here</p></div> |
Vous pouvez entrer du contenu HTML entre les <p> balises directement ici ou accéder au Concepteur pour utiliser l’éditeur de texte enrichi pour le faire. |
| Image | <div data-editorblocktype="Image"><div align="Center" class="imageWrapper"><a href="example.com" title="example.com"><img alt="Some alt text" height="50" src="about:blank" width="50"></a></div></div> |
Le moyen le plus simple de modifier votre source d’image et/ou le lien d’image consiste à accéder au Concepteur et à utiliser le panneau Propriétés . Toutefois, vous pouvez également modifier les attributs suivants directement dans le code HTML :
|
| Diviseur | <div data-editorblocktype="Divider"><div align="center" class="dividerWrapper"><table aria-role="presentation" style="padding: 0px; margin: 0px; width: 100%"><tbody><tr style="padding: 0px;"> <td style="margin:0px; padding-left: 0px; padding-right: 0px; padding-top: 5px; padding-bottom: 5px; vertical-align:top;"> <p style="margin: 0px; padding: 0px; border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: rgb(0, 0, 0); line-height: 0px; width: 100%;"><span> </span></p></td></tr></tbody></table></div></div> |
Ne modifiez pas ce code directement dans l’éditeur HTML. Au lieu de cela, accédez au Concepteur et utilisez le panneau Propriétés . |
| Bouton | <div data-editorblocktype="Button"><!--[if mso]><div align="center"><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" |
Ne modifiez pas ce code directement dans l’éditeur HTML. Au lieu de cela, accédez au Concepteur et utilisez le panneau Propriétés . |
Pour plus d’informations sur la façon dont les éléments de conception apparaissent dans le code, consultez Identifier les éléments de conception.
Ajouter de nouvelles polices à la barre d’outils de l’élément de texte
Les éléments de texte fournissent une barre d’outils de mise en forme contextuelle dans le concepteur, qui inclut un menu permettant d’appliquer une police au texte sélectionné.
Pour ajouter de nouvelles polices à ce sélecteur de polices, ajoutez une <meta> balise qui utilise le formulaire suivant au <head> document :
<meta type="xrm/designer/setting" name="additional-fonts" datatype="font" value="<font-list>">
Où <font-list> est une liste séparée par des points-virgules de noms de polices.
Ajouter des paramètres à l’onglet Styles
Une fonctionnalité pratique des modèles prêtes à l’emploi est qu’ils fournissent des paramètres de style globaux sous l’onglet Styles , ce qui permet aux utilisateurs d’ajuster rapidement la famille de polices, la palette de couleurs et d’autres paramètres globaux activés pour le modèle. Chaque modèle inclut uniquement les paramètres de style qui sont pertinents pour cette conception spécifique, et vous pouvez également concevoir des modèles qui fournissent uniquement les paramètres de style appropriés pour vous et vos utilisateurs.
Pour ajouter un paramètre à l’onglet Styles , vous devez effectuer les opérations suivantes :
- Ajoutez une
<meta>balise à votre<head>document pour créer le paramètre. - Configurez des styles et/ou des balises HTML qui appliquent les paramètres créés par la balise meta.
Les sous-sections suivantes expliquent comment effectuer chacune de ces opérations.
Ajouter une balise meta pour créer le paramètre
La balise requise <meta> prend la forme suivante :
<meta type="xrm/designer/setting" name="<name>" value="<initial-value>" datatype="<data-type>" label="<label>">
Where:
- <nom> identifie la balise meta, que vous devez également référencer dans les styles et les balises HTML où le paramètre sera appliqué.
- <initial-value> est une valeur par défaut appropriée pour le style.
- <le type> de données identifie le type de valeur fourni par les utilisateurs. Ce paramètre affecte le type de contrôle présenté sous l’onglet Styles . Vous devez utiliser l’une des valeurs répertoriées dans le tableau suivant.
- <l’étiquette> spécifie le texte à afficher sous l’onglet Styles du paramètre.
| Valeur de type de données | Descriptif |
|---|---|
| color | Définit une couleur à l’aide de valeurs de balise de hachage comme #000 ou #1a32bf. Crée un contrôle sélecteur de couleurs sous l’onglet Styles . |
| police | Définit un nom de famille de polices. Vous pouvez également configurer des piles de polices à l’aide d’une liste séparée par des virgules de noms de police dans l’ordre de préférence. Crée un champ d’entrée simple sous l’onglet Styles . |
| nombre | Définit une valeur numérique sans unité (utilisez du texte pour autoriser les unités telles que px ou em à spécifier avec la valeur). Crée un champ d’entrée avec des boutons haut/bas qui peuvent également être utilisés pour incrémenter/décrémenter la valeur actuelle sous l’onglet Styles . |
| image | Définit une source d’image (sous forme d’URL). Crée un champ d’entrée simple sous l’onglet Styles . |
| texte | Définit une valeur qui peut inclure à la fois du texte et des nombres. Utilisez également ce type de données pour les valeurs numériques qui peuvent inclure une unité (comme px ou em). Crée un champ d’entrée simple sous l’onglet Styles . |
Note
L’étiquette affichée sous l’onglet Styles peut apparaître entre crochets, par exemple « [Mon style] ». Les crochets indiquent que le texte affiché n’a pas de traduction disponible. Si vous choisissez une valeur prise en charge par l’un des modèles prêtes à l’emploi (par exemple, « Couleur 1 »), une traduction sera disponible, de sorte que les crochets n’apparaissent pas.
Note
Un paramètre de style établi à l’aide d’une <meta> balise, comme décrit ici, est affiché uniquement sous l’onglet Styles lorsque ce paramètre est également référencé dans au moins un style réel ou une balise HTML, comme décrit dans les sections suivantes.
Ajouter des commentaires CSS pour implémenter des paramètres de style dans la tête
Les paramètres effectués sous l’onglet Styles peuvent être appliqués aux styles CSS établis dans le <head> document HTML en entourant une valeur CSS avec deux commentaires CSS qui contiennent la valeur de l’attribut name pour la balise meta correspondante xrm/designer/setting . La paire de commentaires CSS prend la forme suivante :
/* @<tag-name> */ <value> /* @<tag-name> */
Where:
- <tag-name> est l'attribut nom de la balise meta xrm/designer/setting qui établit le paramètre approprié de l'onglet Styles.
- <la valeur> est une valeur qui est remplacée lorsqu’un utilisateur modifie le paramètre d’onglet Styles approprié.
Important
Vous ne pouvez utiliser ces paires de commentaires CSS que dans les styles et les classes définis dans <style> les balises de la <head> section. Il ne doit en outre y avoir qu’un seul ensemble de <style> balises, avec tous les styles CSS configurés ici.
Voici un exemple dans lequel vous pouvez voir une xrm/designer/setting balise meta qui crée un contrôle de sélecteur de couleurs appelé « Couleur 1 » sous l’onglet Styles . Un style CSS applique ensuite ce paramètre pour établir la couleur de texte des <h1> éléments.
<head>
<meta type="xrm/designer/setting" name="color1" value="#ff0000" datatype="color" label="Color 1">
<style>
h1 {color: /* @color1 */ #ff0000 /* @color1 */;}
</style>
</head>
Ajouter des attributs de référence de propriété pour implémenter des paramètres de style dans le corps
Les paramètres effectués sous l’onglet Styles peuvent être appliqués en tant que valeurs d’attribut à n’importe quelle balise HTML dans le <body> document en ajoutant un attribut du formulaire suivant à chaque balise appropriée :
property-reference= "<attr>:@< tag-name >;<attr>:@< tag-name >; …"
Where:
- <attr> est le nom de l’attribut à créer.
-
<tag-name> est la valeur de l’attribut
namede la balise meta qui a établi le paramètre. - Plusieurs attributs, si nécessaire, doivent être séparés par un point-virgule dans un attribut de référence de propriété unique.
Voici un exemple dans lequel vous pouvez voir xrm/designer/setting les balises meta qui créent deux paramètres pour contrôler une image héros (bannière) dans le document, avec des contrôles appelés « Image héros » et « Hauteur de l’image héros » sous l’onglet Styles . La property-reference propriété est ensuite utilisée dans une <img> balise pour implémenter ces paramètres.
<head>
<meta type="xrm/designer/setting" name="hero-image" value="picture.jpg" datatype="picture" label="Hero image">
<meta type="xrm/designer/setting" name="hero-image-height" value="100px" datatype="text" label="Hero image height">
</head>
<body>
<img property-reference="src:@hero-image;height:@hero-image-height;">
</body>
Par conséquent, dans cet exemple, la <img> balise est résolue en quelque chose comme suit :
<img src="picture.jpg" height="100px">
Utiliser des attributs sur des liens et des boutons en HTML brut
Si vous mettez à jour ou créez des liens en HTML brut, vous devez comprendre la signification de certains attributs internes que le moteur de messagerie Customer Insights - Journeys utilise.
Utilisez l’attribut
data-msdyn-tracking-idsi vous souhaitez que le service de suivi traite deux liens comme étant identiques. En règle générale, utilisez cet attribut lorsque vous créez deux liens physiques en HTML, mais qu’un seul affiche pour les utilisateurs en fonction du client de messagerie. Dans ce scénario, définissez l’attributdata-msdyn-tracking-idsur la même valeur pour les deux liens. Lorsque l’attribut a la même valeur, un seul lien apparaît dans les insights d’e-mail, et les interactions sur les liens cliqués sont les mêmes pour les deux liens. Voici un exemple de deux liens utilisant le même attribut.<!--[if gte mso 9]><v:shape xmlns:v="urn:schemas-microsoft-com:vml" data-msdyn-tracking-id="a50219d489b91583158608851" href="https://www.microsoft.com">LINK TEXT</v:shape><![endif]--> <!--[if !mso]> <!----><a class="buttonClass" data-msdyn-tracking-id="a50219d489b91583158608851" href="https://www.microsoft.com">LINK TEXT</a><!--<![endif]-->Les deux liens ci-dessus créent les mêmes interactions en cliquant sur le lien. Le premier lien est visible dans Outlook. Le deuxième lien est visible dans les clients non Outlook comme Gmail.
Un autre attribut important est
data-msdyn-tracking. Cet attribut booléen contrôle le suivi des liens. S’il est défini sur false, le lien n’est pas suivi et vous ne pouvez pas voir si un utilisateur a cliqué sur le lien.