DocumentationCampaignDocumentation de Campaign Classic v7

Intégration via JavaScript (côté client) integration-via-javascript-client-side

Last update: Fri Oct 04 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

L'appel du moteur d'Interaction dans une page web est effectué par l'insertion d'un appel à un code JavaScript directement dans la page. Cet appel renvoie le contenu de l'offre dans un élément ciblé

element.

Adobe recommande d'utiliser la méthode d'intégration JavaScript.

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.

Mode HTML html-mode

Présenter une offre anonyme presenting-an-anonymous-offer

  1. Préparation du moteur d'interaction

    Dans l'interface d'Adobe Campaign, préparez un environnement anonyme.

    Créez un emplacement rattaché à l'environnement anonyme.

    Créez une offre et sa représentation associée à l'emplacement.

  2. 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’espace d’offre 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éé :

    code language-none 
    <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) :

    code language-none 
    <script id="interactionProposalScript" src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" type="text/javascript"></script>
    note important
    IMPORTANT
    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'Interaction.

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

  3. Résultat dans la page HTML

    Le contenu de la représentation de l'offre est renvoyé à la page HTML par le moteur d'Interaction :

    code language-none 
    <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ésenter une offre identifiée presenting-an-identified-offer

Pour présenter une offre à un contact identifié, le processus est similaire à celui détaillé ici : Présenter une offre anonyme. Dans le contenu de la page web, vous devez ajouter le script suivant qui identifie le contact lors de l’appel au moteur :

<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 le même ordre que celui utilisé 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'Interaction via son email et son nom de famille.

    code language-none 
    <script type="text/javascript">
  interactionTarget = myEmail|myName;
</script>

Utiliser une fonction de rendu HTML using-an-html-rendering-function

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.

Mode XML xml-mode

Présenter une offre presenting-an-offer

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

L'appel au moteur d'Interaction 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 la section Environnements en ligne/édition.

    Pour plus d’informations sur la création d'un emplacement, consultez la section Créer des emplacements.

  2. Etendre le schéma des offres pour ajouter des 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

    code language-none 
    <srcSchema _cs="Marketing offers (cus)" created="2 AAAA-MM-DD HH:MM:SS.762Z" createdBy-id="0"
           desc="" entitySchema="xtk:srcSchema" extendedSchema="nms:offer" img="nms:offer.png"
           label="Marketing offers" labelSingular="Marketing offers" lastModified="AAAA-MM-DD HH:MM:SS.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>
    note important
    IMPORTANT
    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.
    N'oubliez pas de mettre à jour la structure de la base de données. Pour plus d’informations, consultez cette section.
    note note
    NOTE
    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. Etendre 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 :

    code language-none 
    <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 :

    note important
    IMPORTANT
    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éer une offre

    Pour plus d’informations sur la création d’offres, voir Créer une offre.

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

  5. 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'interaction dans la page HTML est le suivant :

    code language-none 
    <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 noeud XML retourné par le moteur d'Interaction est de cette forme :

    code language-none 
    <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 using-a-rendering-function-

Vous pouvez utiliser une fonction de rendu XML pour créer la présentation d'une offre. Cette fonction modifiera le noeud XML qui est renvoyé vers la page HTML lors de l'appel au moteur.

  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 :

    code language-none 
    function (proposition) {
  delete proposition.@id;
  proposition.@newAttribute = "newValue";
}

recommendation-more-help
601d79c3-e613-4db3-889a-ae959cd9e3e1