Ajouter des champs supplémentaires pour l'incrustation pour l'inscription Responsys

Important : Cette fonction est disponible uniquement si elle est activée pour votre compte et si vous disposez d'Oracle Maxymiser.

Par défaut, le modèle Incrustation pour l'inscription par courriel ne comporte que le champ Emailaddress. Vous pouvez ajouter des caractéristiques supplémentaires tels que prénom, nom ou pays en modifiant manuellement le code de l'incrustation.

L'exemple suivant montre comment ajouter les champs prénom et nom à votre incrustation pour l'inscription par courriel :

Dans le schéma de liste Responsys, cochez les noms des champs que vous voulez ajouter à votre incrustation, car ils doivent correspondre aux noms des champs dans l'incrustation Oracle Maxymiser. Dans cet exemple, les noms de champ sont les suivants :
1. FIRST_NAME
2. LAST_NAME

Créer une incrustation pour l'inscription Oracle Responsys
Cliquez sur Editeur de code.

Remarque : Si vous modifiez manuellement le code de l'incrustation dans l'éditeur de code et que vous repassez au panneau Interactions pour effectuer des modifications, les modifications manuelles apportées à la fonction formSubmit sont remplacées par le panneau Interactions.

Dans la balise <form> :

Recherchez la balise <input> pour le champ emailaddress :

<input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-email-input" name="EMAIL_ADDRESS_" type="text" style="display: block; margin: 47px auto 0px; height: 28px; width: 280px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Email address..." title="Enter Email address." required="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}">

Après la balise ci-dessus, ajoutez une nouvelle balise <input> pour le prénom :

<input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-firstname-input" name="FIRST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="First name..." title="Enter First name." required="" pattern="^[a-zA-Z]+$">

Modifiez les attributs <input> comme suit :

Id : ID unique composé de l'ID de votre incrustation et du nom et du type du champ d'entrée. Par exemple : lightbox1565788422675-lightbox-firstname-input.

Remarque : Lorsque vous créez une incrustation, nous lui affectons un ID unique en tant qu'attribut div externe de l'incrustation ou partie de l'attribut id pour le champ de courriel décrit ci-dessus.

Nom : Nom du champ dans votre table Responsys provenant de l'étape 1.
Espace réservé : Texte du conseil qui apparaît lorsque la zone de texte est vide.
Modèle : Expression régulière qui détermine les caractères pouvant être entrés dans la zone de texte. Dans cet exemple, les caractères a-z ou A-Z sont autorisés, mais vous pouvez autoriser d'autres caractères tels que les tirets et les espaces.

Ajoutez et modifiez une autre balise <input> pour le nom :

<input oninvalid="window.mm_onInvalid(event)" id="lightbox1565788422675-lightbox-lastname-input" name="LAST_NAME" type="text" style="display: block; margin: 5px auto 0px; height: 28px; width: 280px; border-radius: 2px; border: none; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; background-color: rgb(248, 248, 248); color: rgba(0, 0, 0, 0.87); font-family: Helvetica; font-size: 12px; line-height: 15px;" placeholder="Last name..." title="Enter Last name." required="" pattern="^[a-zA-Z]+$">

Lorsque le formulaire est soumis, assurez-vous que les nouveaux champs d'entrée sont ajoutés à l'URL de soumission :
1. Recherchez la fonction window.onFormSubmit et la ligne de code suivante :
2. Sous cette ligne, ajoutez les lignes suivantes pour stocker le prénom et le nom dans les variables :
Les valeurs stockées dans ces variables sont utilisées lors de la vérification des erreurs et de la soumission du formulaire :

Le code de vérification des erreurs doit être mis à jour pour valider le contenu des champs prénom et nom.

Pour cet exemple, nous allons remplacer le code existant :

var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;

if (!re.test(emailInput.value)) {

oops.style.display = 'block';

emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");

emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");

return;

Par le code suivant :

var re = /[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}/;
var reName = /^[a-zA-Z]+$/;
emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: none;");
 
if (!re.test(emailInput.value) || !reName.test(firstnameInput.value) || !reName.test(lastnameInput.value)) {
	oops.style.display = 'block';
	if (!re.test(emailInput.value)) {
		emailInput.style.cssText = emailInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
		emailInput.style.cssText = emailInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
	}
 
	if (!reName.test(firstnameInput.value)) {
		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
		firstnameInput.style.cssText = firstnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
	}
 
	if (!reName.test(lastnameInput.value)) {
		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border:[^;]*;/, "border: 1px solid #B71C1C;");
		lastnameInput.style.cssText = lastnameInput.style.cssText.replace(/border-radius:[^;]*;/, "border-radius: 2px;");
	}
 
return;
}

To ensure the new values get submitted when the visitor clicks the Subscribe button, find the following code:

parameters.push(encodeURIComponent('EMAIL_ADDRESS_') + '=' + encodeURIComponent(emailInput.value));

Après ce code, ajoutez les lignes suivantes pour ajouter le prénom et le nom à l'URL de soumission du formulaire :

parameters.push(encodeURIComponent('FIRST_NAME') + '=' + encodeURIComponent(firstnameInput.value));

parameters.push(encodeURIComponent('LAST_NAME') + '=' + encodeURIComponent(lastnameInput.value));

Passez au panneau Prévisualiser pour tester les nouveaux champs créés dans votre incrustation.

Documentation connexe

Configurer l'intégration à Oracle Maxymiser

Lancer une campagne intégrée Maxymiser-Responsys

Créer une incrustation pour l'inscription à l'aide de Maxymiser

Intégration à Oracle Responsys (Centre d'aide Oracle Maxymiser)

intégration Maxymiser, incrustation, formulaires d'inscription par courriel