Ajouter une offre sur une page web

Pour appeler le moteur d'offres dans une page web, insérez un appel à un code JavaScript directement dans la page. Cet appel renvoie le contenu de l'offre dans un élément ciblé.

L'URL d'appel au script est de la forme suivante :

<script id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=" type="text/javascript"></script>

Le paramètre "env" reçoit le nom interne de l'environnement en ligne dédié aux interactions anonymes.

Pour présenter une offre, il faut donc créer un environnement ainsi qu'un emplacement pour l'offre dans Adobe Campaign, puis configurer la page HTML.

Les cas d'utilisations suivants présentent les différentes options possibles dans l'intégration d'offres via Javascript.

Option 1 : mode HTML

Présentation d'une offre anonyme

Étape 1 : préparation du moteur d'offres

  1. Dans l'interface d'Adobe Campaign, préparez un environnement anonyme.
  2. Créez un emplacement rattaché à l'environnement anonyme.
  3. Créez une offre et sa représentation associée à l'emplacement.

Étape 2 : mise à jour du contenu de la page HTML

La page HTML doit inclure un élément avec un attribut @id avec la valeur du nom interne de l'emplacement créé ("i_internal name space"). L'offre sera insérée dans cet élément par Interaction.

Dans l'exemple, l'attribut @id reçoit la valeur "i_SPC12" où "SPC12" est le nom interne de l'emplacement précédemment créé :

<div id="i_SPC12"></div>

Dans l'exemple, l'URL d'appel au script est la suivante ("OE3" est le nom interne de l'environnement en ligne) :

<script id="interactionProposalScript" src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" type="text/javascript"></script>
ATTENTION

La balise <script> ne doit pas être auto-fermante.

Cet appel statique va automatiquement générer un appel dynamique contenant tous les paramètres nécessaires au moteur d'offres.

Ce comportement permet d'avoir plusieurs emplacements sur la même page gérés par un seul appel au moteur d'offres.

Étape 3 : affichage des résultats dans la page HTML

Le contenu du rendu de l'offre est renvoyé à la page HTML par le moteur d'offres :

<div id="banner_header">
 <div id="i_SPC12">
   <table>
    <tbody>
        <tr>
            <td><h3>Fly to Japan!</h3></td>
        </tr>
        <tr>
            <td><img width="150px" src="https://instance.adobe.org/res/Track/874fdaf72ddc256b2d8260bb8ec3a104.jpg"></td>
            <td>
            <p>Discover Japan for 2 weeks at an unbelievable price!!</p>
            <p><b>2345 Dollars - All inclusive</b></p>
        </td>
        </tr>
    </tbody>
    </table>
 </div>
<script src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" id="interactionProposalScript" type="text/javascript"></script>
</div>

Présentation d'une offre identifiée

Pour présenter une offre à un contact identifié, le processus est similaire à celui détaillé dans cette section.

Dans le contenu de la page web, vous devez ajouter le script suivant qui permettra d'identifier le contact lors de l'appel au moteur d'offres :

<script type="text/javascript">
  interactionTarget = <contact_identifier>;
</script>
  1. Dans l'emplacement destiné à être appelé par la page web, cliquez sur Paramètres avancés et ajoutez une ou plusieurs clés d'identification.

    Dans cet exemple, la clé d'identification est composite puisqu'elle s'appuie à la fois sur l'email et le nom du destinataire.

  2. Lors de l'affichage de la page web, l'évaluation du script permet de passer l'identifiant du destinataire au moteur d'offres. Si l'identifiant est composite, les clés sont affichées dans la même séquence que celle utilisée dans les paramètres avancés et sont séparées par un |.

    Dans l'exemple suivant, le contact s'est identifié sur le site web et a été reconnu lors de l'appel au moteur d'offres via son adresse e-mail et son nom de famille.

    <script type="text/javascript">
      interactionTarget = myEmail|myName;
    </script>
    

Utilisation d'une fonction de rendu HTML

Vous pouvez utiliser une fonction de rendu afin que la représentation HTML de l'offre soit automatiquement générée.

  1. Dans l'emplacement de l'offre, cliquez sur le lien Editer les fonctions.

  2. Sélectionnez Surcharger la fonction de rendu HTML.

  3. Dans l'onglet Rendu HTML, insérez les variables correspondant aux champs définis pour le contenu de l'offre dans l'emplacement.

    Dans cet exemple, l'offre s'affiche sous forme de bannière dans une page web et est composée d'une image cliquable sous laquelle se trouve un titre conformément aux champs définis dans le contenu de l'offre.

Option 2 : mode XML

Présentation d'une offre

Le module Interaction de Campaign vous permet de renvoyer un nœud XML à la page HTML qui appelle le moteur d'offres. Ce nœud XML peut être traité par des fonctions à développer côté client.

L'appel au moteur d'offres est de la forme suivante :

<script type="text/javascript" id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=&cb="></script>
  • Le paramètre "env" reçoit le nom interne de l'environnement en ligne.

  • Le paramètre "cb" reçoit le nom de la fonction qui va interpréter le noeud XML renvoyé par le moteur contenant la ou les propositions (callback). Ce paramètre est optionnel.

  • Le paramètre "t" reçoit l'identifiant de la cible, pour une interaction identifiée uniquement. Ce paramètre peut également être passé avec la variable interactionTarget. Ce paramètre est optionnel.

  • le paramètre "c" reçoit la liste des noms internes des catégories. Ce paramètre est optionnel.

  • Le paramètre "th" reçoit la liste des thèmes. Ce paramètre est optionnel.

  • Le paramètre "gctx" reçoit les données d'appel globales (contexte) à toute la page. Ce paramètre est optionnel.

Le noeud XML retourné est de la forme suivante :

<propositions>
 <proposition id="" offer-id="" weight="" rank="" space="" div=""> //proposition identifiers
   ...XML content defined in Adobe Campaign...
 </proposition>
 ...
</propositions>

Le cas d'utilisation suivant décrit les paramétrages à effectuer dans Adobe Campaign pour activer le mode XML, puis montre le résultat de l'appel au moteur dans la page HTML.

  1. Créer un environnement et un emplacement

    Pour plus d'informations sur la création d'un environnement, consultez cette page.

    La création d'un emplacement est détaillée sur cette page.

  2. Étendre le schéma des offres pour ajouter de nouveaux champs

    Ce schéma va définir les champs suivants : titre N°2 et prix.

    Le nom du schéma dans l'exemple est cus:offer

    <srcSchema _cs="Marketing offers (cus)" created="2013-01-18 17:14:20.762Z" createdBy-id="0"
               desc="" entitySchema="xtk:srcSchema" extendedSchema="nms:offer" img="nms:offer.png"
               label="Marketing offers" labelSingular="Marketing offers" lastModified="2013-01-18 15:20:18.373Z"
               mappingType="sql" md5="F14A7AA009AE1FCE31B0611E72866AC3" modifiedBy-id="0"
               name="offer" namespace="cus" xtkschema="xtk:srcSchema">
      <createdBy _cs="Administrator (admin)"/>
      <modifiedBy _cs="Administrator (admin)"/>
      <element img="nms:offer.png" label="Marketing offers" labelSingular="Marketing offer"
               name="offer">
        <element label="Content" name="view">
          <element label="Price" name="price" type="long" xml="true"/>
          <element label="Title 2" name="title2" type="string" xml="true"/>
    
          <element advanced="true" desc="Price calculation script." label="Script price"
                   name="price_jst" type="CDATA" xml="true"/>
          <element advanced="true" desc="Title calculation script." label="Script title"
                   name="title2_jst" type="CDATA" xml="true"/>
        </element>
      </element>
    </srcSchema>
    
    ATTENTION

    Il est nécessaire de définir deux fois chaque élément. Les éléments de type CDATA ("_jst") peuvent contenir des champs de personnalisation.

    Ne pas oublier de mettre à jour la structure de la base de données.

    Vous pouvez étendre le schéma des offres afin d'ajouter des champs à la fois dans les modes batch et unitaire, et dans n'importe quel format (texte, HTML et XML).

  3. Étendre le formulaire des offres pour éditer les nouveaux champs et modifier un champ existant

    Editer le formulaire de saisie Offre (nms).

    Insérer dans la partie intitulée "Views", les deux nouveaux champs avec le contenu suivant :

    <input label="Title 2" margin-right="5" prebuildSubForm="false" type="subFormLink" xpath="title2_jst">
         <form label="Edit title 2" name="editForm" nothingToSave="true">
             <input nolabel="true" toolbarAlign="horizontal" type="jstEdit" xpath="." xpathInsert="/ignored/customizeTitle2">
             <container>
                 <input menuId="viewMenuBuilder" options="inbound" type="customizeBtn" xpath="/ignored/customizeTitle2"/>
             </container>
             </input>
         </form>
     </input>
     <input nolabel="true" type="edit" xpath="title2_jst"/>
     <input label="Price" margin-right="5" prebuildSubForm="false" type="subFormLink" xpath="price_jst">
         <form label="Edit price" name="editForm" nothingToSave="true">
         <input nolabel="true" toolbarAlign="horizontal" type="jstEdit" xpath="." xpathInsert="/ignored/customizePrice">
             <container>
                 <input menuId="viewMenuBuilder" options="inbound" type="customizeBtn" xpath="/ignored/customizePrice"/>
             </container>
         </input>
         </form>
     </input>
     <input colspan="2" label="Prix" nolabel="true" type="number" xpath="price_jst"/>
    

    Mettre en commentaire le champ URL de destination :

    ATTENTION

    Les champs du formulaire (<input>) doivent pointer vers les éléments de type CDATA définis dans le schéma créé.

    Le rendu dans le formulaire des représentations des offres est le suivant :

    Les champs Titre 2 et Prix ont été ajoutés et le champ URL de destination n'est plus affiché.

  4. Création d'une offre

    Pour plus d'informations sur la création d'offres, consultez cette page.

    Dans le cas d'utilisation suivant, l'offre est remplie de cette manière :

  5. Valider l'offre

    Validez ou faites valider l'offre puis activez là sur l'emplacement créé à l'étape précédente afin qu'elle soit disponible dans l'environnement en ligne associé.

  6. Appel du moteur et résultat dans la page HTML

    L'appel au moteur d'offres dans la page HTML est le suivant :

    <script id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=OE7&cb=alert" type="text/javascript">
    

    Le paramètre "env" a pour valeur le nom interne de l'environnement en ligne.

    Le paramètre "cb" a pour valeur le nom de la fonction qui doit interpréter le noeud XML renvoyé par le moteur. Dans notre exemple, la fonction appelée ouvre une fenêtre modale (fonction alert() ).

    Le nœud XML renvoyé par le moteur d'offres a la forme suivante :

    <propositions>
     <proposition id="a28002" offer-id="10322005" weight="1" rank="1" space="SPC14" div="i_SPC14">
      <xmlOfferView>
       <title>Travel to Russia</title>
       <price>3456</price>
       <description>Discover this vacation package!INCLUDES 10 nights. FEATURES buffet breakfast daily. BONUS 5th night free.</description>
       <image>
        <path>https://myinstance.com/res/Track/ae1d2113ed732d58a3beb441084e5960.jpg</path>
        <alt>Travel to Russia</alt>
       </image>
      </xmlOfferView>
     </proposition>
    </propositions>
    

Utiliser une fonction de rendu

Il est possible d'utiliser une fonction de rendu XML pour créer une présentation d'offre. Cette fonction modifie le nœud XML renvoyé à la page HTML lors de l'appel au moteur d'offres.

  1. Dans l'emplacement de l'offre, cliquez sur le lien Editer les fonctions.

  2. Sélectionnez Surcharger la fonction de rendu XML.

  3. Dans l'onglet Rendu XML, insérez la fonction voulue.

    La fonction peut ressembler à l'exemple ci-dessous :

    function (proposition) {
      delete proposition.@id;
      proposition.@newAttribute = "newValue";
    }
    

Configuration d'une intégration SOAP

Les services web SOAP fournis pour la gestion des offres sont différents de ceux habituellement utilisés dans Adobe Campaign. Ils sont accessibles via l'URL d'interaction décrite dans la section précédente et permettent de proposer ou mettre à jour des offres pour un contact donné.

Proposition d'offres

Pour une proposition d'offres via SOAP, vous devez ajouter la commande nms:proposition#Propose, suivie des paramètres suivants :

  • targetId : clé primaire du destinataire (il peut s'agir d'une clé composite).
  • maxCount : indique le nombre de propositions d'offre pour le contact.
  • context : vous permet d'ajouter des informations contextuelles dans le schéma d'espace. Si le schéma utilisé est nms:interaction, <empty> doit être ajouté.
  • categories : indique la ou les catégories auxquelles doivent appartenir la ou les offres proposées.
  • themes : indique la ou les thèmes auxquelles doivent appartenir la ou les offres proposées.
  • uuid : valeur du cookie permanent Adobe Campaign ("uuid230").
  • nlid : valeur du cookie de session Adobe Campaign ("nlid").
  • noProp : utilisez la valeur "true" pour désactiver l'insertion de propositions.
REMARQUE

Les paramètres targetId et maxCount sont obligatoires. Les autres sont optionnels.

En réponse à la requête, le service SOAP renverra les paramètres suivants :

  • interactionId : id de l'interaction.
  • propositions : élément XML, contient la liste des propositions, chacune ayant un id et une représentation HTML propre.

Mise à jour d'une offre

Ajoutez la commande nms:interaction#UpdateStatus dans l'URL, puis les paramètres suivants :

  • proposition : chaîne de caractères, contient l'identifiant de la proposition donnée en sortie lors d'un appel au moteur. Voir Proposition d'offres.
  • status : nombre, indique le nouveau statut de l'offre. Les valeurs possibles sont listées dans l'énumération propositionStatus, dans le schéma nms:common. Par exemple, d'usine, le nombre 3 correspond au statut Acceptée.
  • Context : élément XML, vous permet d'ajouter des informations contextuelles dans le schéma d'espace. Si le schéma utilisé est nms:interaction, <empty> doit être ajouté.

Exemple d'utilisation d'un appel SOAP

Voici un exemple de code pour un appel SOAP :

<%
  var space = request.parameters.sp
  var cnx = new HttpSoapConnection(
    "https://" + request.serverName + ":" + request.serverPort + "/interaction/" + env + "/" + space,
    "utf-8",
    HttpSoapConnection.SOAP_12)
  var session = new SoapService(cnx, "nms:interaction")
  var action = request.parameters.a
  if( action == undefined )
    action = 'propose'

  try
  {
    switch( action )
    {
    case "update":
      var proposition = request.parameters.p
      var status      = request.parameters.st
      session.addMethod("UpdateStatus", "nms:interaction#UpdateStatus",
       ["proposition", "string",
        "status",      "string",
        "context",     "NLElement"],
       [])
      session.UpdateStatus(proposition, status, <undef/>)
      var redirect = request.parameters.r
      if( redirect != undefined )
        response.sendRedirect(redirect)
      break;

    case "propose":
      var count = request.parameters.n
      var target = request.parameters.t
      var categorie = request.parameters.c
      var theme = request.parameters.th
      var layout = request.parameters.l
      if( count == undefined )
        count = 1
      session.addMethod("Propose", "nms:proposition#Propose",
       ["targetId",      "string",
        "maxCount",      "string",
         "categories",    "string",
         "themes",        "string",
        "context",       "NLElement"],
       ["interactionId", "string",
        "propositions",  "NLElement"])
      response.setContentType("text/html")
      var result = session.Propose(target, count, category, theme, <empty/>)
      var props = result[1]
  %><table><tr><%
      for each( var propHtml in props.proposition.*.mdSource )
      {
        %><td><%=propHtml%></td><%
      }
  %></tr></table><%
      break;
    }
  }
  catch( e )
  {
  }
  %>

Sur cette page