Avec NiftyImages, vous pouvez afficher une image unique pour chaque destinataire dans votre e-mail — par exemple, en y intégrant le prénom ou le nom de l'entreprise de la personne de contact. Dans ce guide, nous vous expliquons la procédure étape par étape.
Contenu
Comment ça marche ? #
NiftyImages ne génère l'image qu'au moment où le destinataire ouvre l'e-mail, en fonction des paramètres figurant dans l'URL de l'image. La personnalisation ne s'effectue donc pas dans le générateur d'e-mails MyMIP lui-même, mais dans l'URL que MyMIP complète pour chaque destinataire lors de l'envoi avec les données personnelles correspondantes.
Le déroulement :
- Dans NiftyImages, vous créez un modèle (arrière-plan + calques de texte que vous pourrez remplir dynamiquement par la suite).
- NiftyImages vous fournit une URL comportant des paramètres, par exemple :
?voornaam={$ContactData.firstName} - Vous devez insérer cette URL sous forme de bloc HTML dans votre e-mail MyMIP.
- Lors de l'expédition, MyMIP remplace
{$ContactData.firstName}par le prénom réel de chaque destinataire. - Lorsque le destinataire ouvre l'e-mail, NiftyImages affiche l'image personnalisée.
Étape 1: Créer un modèle dans NiftyImages #
- Connectez-vous à votre compte NiftyImages.
- Créez une nouvelle image personnalisée.
- Téléchargez l'image d'arrière-plan de votre choix.
- Ajoutez un calque de texte à l'endroit où doit figurer le texte personnalisé. Positionnez-le et personnalisez-le comme vous le souhaitez (police, couleur, alignement).
Étape 2: Configurer la balise Mer ge #
Après avoir cliqué sur le calque de texte, la fenêtre de configuration de la balise de fusion s'ouvre. Remplissez-la comme suit :
| Champ | Que faut-il indiquer ? | Exemple |
|---|---|---|
| Balise de fusion | Un nom de paramètre simple, sans espaces. C'est ainsi que NiftyImages reconnaît la valeur dans l'URL. | voornaam |
| Type de balise | Type de contenu de la balise « merge ». | Text |
| Texte de secours | Ce que NiftyImages affiche lorsque la valeur est manquante. Indiquez toujours une valeur neutre. | Beste klant |
| Valeur du design | Uniquement pour l'aperçu dans l'éditeur. N'a aucune incidence sur l'image publiée. | Kris |
| Balise de fusion ESP | Le tag personnel MyMIP qui fournit la valeur lors de l'envoi. | {$ContactData.firstName} |
{$ContactData.firstName} pour le prénom. D'autres balises couramment utilisées sont {$ContactData.lastName}, {$ContactData.company} et {$ContactData.email}. Consultez ici la liste complète des balises de fusion dans votre environnement MyMIP.
Étape 3: Générer et tester l'URL #
Cliquez sur « Save », puis générez l'URL de votre modèle. Elle se présente comme suit :
https://img1.niftyimages.com/xxxx/yyyy/zzzz?voornaam={$ContactData.firstName}Testez d'abord le modèle directement dans votre navigateur en remplaçant la balise de fusion par une valeur réelle :
https://img1.niftyimages.com/xxxx/yyyy/zzzz?voornaam=KrisL'image portant la mention « Kris » s'affiche-t-elle au bon endroit ? Si oui, le modèle fonctionne correctement et vous pouvez passer à l'étape suivante. Vous voyez-vous toujours la valeur de conception ou la solution de secours ? Dans ce cas, vérifiez que le nom de la balise de fusion dans NiftyImages correspond exactement au nom du paramètre dans votre URL (sensible à la casse).
Étape 4: Ajouter un bloc HTMLdans l'éditeur d'e-mails MyMIP #
Ouvrez votre e-mail dans l'éditeur d'e-mails MyMIP et suivez ces étapes :
- Faites glisser un bloc HTML à l'endroit souhaité dans votre e-mail. N'utilisez donc pas de bloc d'image standard, car celui-ci interprète différemment la balise de fusion et perturbe la personnalisation.
- Cliquez sur le bloc HTML et collez le code ci-dessous dans la zone d'édition. Remplacez l'URL par votre propre URL NiftyImages.
<img src="https://img1.niftyimages.com/xxxx/yyyy/zzzz?voornaam={$ContactData.firstName}"
alt="Welkom"
width="600"
style="display:block; width:100%; max-width:600px; height:auto; margin:0 auto; border:0;" />{$ContactData.firstName} littéralement dans le code HTML. Utilisez pas le sélecteur de balises de fusion de l'éditeur d'e-mails pour l'insérer — ce qui génère une structure de code interne qui rend l'URL NiftyImages inutilisable.
Étape 5 : Dimensionset affichage adaptatif #
Le code HTML de l'étape précédente permet à votre image de s'adapter correctement à toutes les tailles d'écran. Voici le rôle de chaque élément :
| Attribut / style | Fonction |
|---|---|
width="600" | Attribut HTML destiné aux versions d'Outlook qui ne prennent pas en charge la propriété CSS « width ». |
width:100% | L'image occupe toute la largeur de la colonne. |
max-width:600px | Sur ordinateur, ne jamais dépasser 600 px (largeur standard d'un e-mail). |
height:auto | Le format d'image est conservé lors du redimensionnement. |
margin:0 auto | Centre l'image si le conteneur est plus large. |
border:0 | Supprime la bordure par défaut affichée par certains clients. |
alt="Welkom" | Affiche un texte descriptif lorsque les images sont bloquées. |
Utiliser d'autres largeurs #
Vous souhaitez un affichage plus étroit ou plus large ? Dans ce cas, réglez à la fois width si max-width . Par exemple, pour une demi-largeur :
width="300"
style="display:block; width:100%; max-width:300px; height:auto; margin:0 auto; border:0;"Test final via un envoi test #
L'aperçu dans l'éditeur d'e-mails n'affiche pas les balises de personnalisation sous forme de valeurs réelles — c'est normal. Vous voyez donc le texte de secours ou la valeur de conception provenant de NiftyImages. Pour vérifier la personnalisation réelle :
- Envoyez-vous un e-mail de test via la fonction d'envoi de test de MyMIP, en associant ce message à un contact dont le prénom a été renseigné.
- Ouvrez l'e-mail que vous avez reçu et vérifiez que le prénom figure correctement sur l'image.
- Testez également un contact dont le prénom n'est pas renseigné afin de vérifier que le texte de secours s'affiche correctement.
Problèmes courants #
L'image affiche le texte de secours à la place du prénom #
Le nom du paramètre dans votre URL ne correspond pas à la balise de fusion dans NiftyImages. Vérifiez que les deux sont écrits exactement de la même manière (sensible à la casse). De plus, effectuez un test avec un contact dont le prénom a bien été renseigné dans MyMIP.
La balise « perso » apparaît littéralement dans l'image (par exemple : {$ContactData.firstName}) #
MyMIP n'a pas remplacé la balise lors de l'envoi. Cela est généralement dû à une erreur de saisie de la balise ou à la conversion des accolades en codes URL (%7B, %7D). Supprimez le bloc HTML et retapez le code — si nécessaire, collez-le d'abord dans un fichier texte (Bloc-notes) afin d'éliminer les balises de mise en forme cachées.
L'image est déformée ou trop grande sur mobile #
Le heightL'attribut - dans votre code HTML provoque une déformation lors de la mise à l'échelle. Supprimez-le et laissez le navigateur calculer la hauteur de manière proportionnelle via height:auto dans le style.
L'image est masquée par le client de messagerie #
Certains clients de messagerie (par exemple Outlook, l'application Gmail) bloquent par défaut les images externes. Le destinataire doit alors cliquer manuellement sur « Afficher les images ». Veillez donc toujours à inclure une description pertinente alt- du texte afin que l'e-mail reste lisible même sans image.
L'aperçu dans l'éditeur d'e-mails n'affiche aucune personnalisation #
C'est normal, ce n'est pas une erreur. L'aperçu ne remplace pas les balises de personnalisation : vous voyez le texte de secours ou la valeur par défaut. Ce n'est qu' lors d'un envoi réel (de test) que vous verrez le résultat personnalisé.
