Add an offer in a web page add-an-offer-in-web

To call the Offer engine in a web page, insert a call to a JavaScript code directly into the page. This call returns the offer content in a targeted element.

The script calling URL looks like this:

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

The “env” parameter receives the internal name of the live environment dedicated to anonymous interactions.

To present an offer, we need to create an environment and an offer space in Adobe Campaign, then configure the HTML page.

The following use cases detail the possible options for integrating offers via JavaScript.

Option 1: HTML mode html-mode

Present an anonymous offer presenting-an-anonymous-offer

Step 1: Prepare the Offer engine

  1. Open the Adobe Campaign interface and prepare an anonymous environment.
  2. Create an offer space linked to the anonymous environment.
  3. Create an offer and its representation linked to the offer space.

Step 2: Update the content of the HTML page

The HTML page must include an element with an @id attribute with the value of the internal name of the created offer space (“i_internal name space”). The offer will be inserted into this element by Interaction.

In our example, the @id attribute receives the “i_SPC12” value, where “SPC12” is the internal name of the previously created offer space:

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

In our example, the URL for calling the script is as follows (“OE3” is the internal name of the live environment):

<script id="interactionProposalScript" src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" type="text/javascript"></script>
CAUTION
The <script> tag must not be self-closing.

This static call will automatically generate a dynamic call containing all the parameters needed by the Offer engine.

This behavior lets you use several offer spaces on the same page, to be managed by a single call to the Offer engine.

Step 3: Display the results in the HTML page

The content of the offer representation is returned to the HTML page by the Offer engine:

<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>

Present an identified offer presenting-an-identified-offer

To present an offer to an identified contact, the process is similar as the one detailed in this section.

In the content of the web page, you need to add the following script that will identify the contact during the call to the Offer engine:

<script type="text/javascript">
  interactionTarget = <contact_identifier>;
</script>
  1. Go to the offer space that will be called up by the web page, click Advanced parameters and add one or more identification keys.

    In this example, the identification key is composite since it is based both on the email and the recipient name.

  2. During the web page display, the script evaluation lets you pass the recipient ID on to the Offer engine. If the ID is composite, the keys are displayed in the same sequence as used in the advanced settings and are separated by a |.

    In the following example, the contact has logged on to the website and was recognized during the call to the Offer engine thanks to their email and name.

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

Use an HTML rendering function using-an-html-rendering-function

To generate the HTML offer representation automatically, you can use a rendering function.

  1. Go to the offer space and click the Edit functions link.

  2. Select Overload the HTML rendering function.

  3. Go to the HTML rendering tab and insert the variables that match the fields defined for the offer content in the offer space.

    In this example, the offer is displayed in the form of a banner in a web page and is made up of a clickable image and a title that match the fields defined in the offer content.

Option 2: XML mode xml-mode

Present an offer presenting-an-offer

Campaign Interaction module lets you return an XML node to the HTML page which calls up the Offer engine. This XML node can be processed by functions to be developed on the customer side.

The call to the Offer engine looks like this:

<script type="text/javascript" id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=&cb="></script>
  • The “env” parameter receives the internal name of the live environment.

  • The “cb” parameter receives the name of the function which will read the XML node returned by the engine containing the (callback) proposition(s). This parameter is optional.

  • The “t” parameter receives the value of the target, only for an identified interaction. This parameter can also be passed with the interactionTarget variable. This parameter is optional.

  • The “c” parameter receives the list of internal names of the categories. This parameter is optional.

  • The “th” parameter receives the list of themes. This parameter is optional.

  • The “gctx” parameter receives the call data global (context) to the entire page. This parameter is optional.

The returned XML node looks like this:

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

The use case below details the configurations to carry out in Adobe Campaign to enable XML mode then show the result of the call to the engine in the HTML page.

  1. Create an environment and an offer space

    For more on creating an environment, refer to this page.

    For more on creating an offer space, refer to this page.

  2. Extend the offer schema to add new fields

    This schema will define the following fields: Title number 2 and price.

    The name of the schema in the example is cus:offer

    code language-none
    <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>
    
    note caution
    CAUTION
    Each element needs to be defined twice. CDATA (“_jst”) type elements can contain personalization fields.
    Don’t forget to update the database structure.

    You can extend the offer schema to add new fields both in batch and unitary mode, and in any format (text, HTML, and XML).

  3. Extend the offer formula to edit new fields and modify an existing field

    Edit the Offer (nsm) input form.

    In the “Views” section, insert the two new fields with the following content:

    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"/>
    

    Comment out the destination URL field:

    note caution
    CAUTION
    The fields of the ( <input>) form must point to the CDATA type elements defined in the created schema.

    The rendering in the offer representations form looks like this:

    The Title 2 and Price fields have been added and the Destination URL field is no longer displayed.

  4. Create an offer

    For more on creating offers, refer to this page.

    In the following use case, the offer is entered as follows:

  5. Approve the offer

    Approve an offer or have it approved by somebody else, then activate it on the offer space created at the last step so that it is made available in the linked live environment.

  6. Engine calls and result on the HTML page

    The call to the Offer engine in the HTML page looks like this:

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

    The value of the “env” parameter is the internal name of the live environment.

    The value of the “cb” parameter is the name of the function which needs to interpret the XML node returned by the engine. In our example, the called up function opens a modal window (alert() function).

    The XML node returned by the Offer engine looks like this:

    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>
    

Use a rendering function using-a-rendering-function-

It’s possible to use an XML rendering function to create an offer presentation. This function will modify the XML node that is returned to the HTML page during the call to the Offer engine.

  1. Go to the offer space and click the Edit functions link.

  2. Select Overload the XML rendering function.

  3. Go to the XML rendering tab and insert the desired function.

    The function can look like this:

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

Set up a SOAP integration

The SOAP web services provided for offer management are different from those usually used in Adobe Campaign. They can be accessed via the interaction URL described in the previous section and let you present or update offers for a given contact.

Offer proposition offer-proposition

For an offer proposition via SOAP, add the nms:proposition#Propose command followed by the following parameters:

  • targetId: primary key of the recipient (can be a composite key).
  • maxCount: specifies the number of offer propositions for the contact.
  • context: lets you add context information in the space schema. If the schema used is nms:interaction, <empty> should be added.
  • categories: specifies the category/ies that the offers must belong to.
  • themes: specifies the theme(s) that the offer(s) must belong to.
  • uuid: value of the Adobe Campaign permanent cookie (“uuid230”).
  • nli: value of the Adobe Campaign session cookie (“nlid”).
  • noProp: use the “true” value to deactivate proposal insertion.
NOTE
The targetId and maxCount settings are compulsory. The others are optional.

In response to the query, the SOAP service will return the following parameters:

  • interactionId: ID of the interaction.
  • propositions: XML element, contains the list of propositions, each with their own ID and HTML representation.

Offer update offer-update

Add the nms:interaction#UpdateStatus command to the URL, followed by these parameters:

  • proposition: string of characters, it contains the proposition ID given as an output during an offer proposition. Refer to Offer proposition.
  • status: string type, it specifies the new status of the offer. The possible values are listed in the propositionStatus enumeration, in the nms:common schema. For example, out-of-the-box, the number 3 corresponds to the Accepted status.
  • context: XML element, lets you add context information in the space schema. If the schema used is nms:interaction, <empty> should be added.

Example using a SOAP call example-using-a-soap-call

Here is an example of code for a SOAP call:

<%
  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 )
  {
  }
  %>
recommendation-more-help
35662671-8e3d-4f04-a092-029a056c566b