DocumentatieCampaignDocumentatie voor Campaign Classic v7

Integratie via JavaScript (clientzijde) integration-via-javascript-client-side

Last update: Fri Apr 12 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Als u de interactie-engine op een webpagina wilt aanroepen, voegt u een aanroep van een JavaScript-code rechtstreeks in op de pagina. Deze vraag keert de aanbiedingsinhoud in gerichte terug

element.

Adobe raadt u aan de JavaScript-integratiemethode te gebruiken.

Het script dat URL aanroept ziet er als volgt uit:

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

De "env" de parameter ontvangt de interne naam van het levende milieu gewijd aan anonieme interactie.

Om een aanbieding te presenteren, moeten wij een milieu en een aanbiedingsruimte in Adobe Campaign creëren, dan de pagina van de HTML vormen.

In de volgende gebruiksgevallen worden de mogelijke opties beschreven voor het integreren van aanbiedingen via JavaScript.

HTML, modus html-mode

Een anonieme aanbieding presenteren presenting-an-anonymous-offer

  1. De interactie-engine voorbereiden

    Open de Adobe Campaign-interface en bereid een anonieme omgeving voor.

    Maak een aanbiedingsruimte die is gekoppeld aan de anonieme omgeving.

    Maak een aanbieding en geef deze weer in verband met de aanbiedingsruimte.

  2. Inhoud van de pagina HTML

    De pagina HTML moet een

    element met een @id-kenmerk met de waarde van de interne naam van de gemaakte aanbiedingsruimte ("i_internal name space"). Het aanbod zal in dit element door Interaction worden opgenomen.

    In ons voorbeeld ontvangt het kenmerk @id de waarde "i_SPC12", waarbij "SPC12" de interne naam is van de eerder gemaakte aanbiedingsruimte:

    code language-none 
    <div id="i_SPC12"></div>

    In ons voorbeeld is de URL voor het aanroepen van het script als volgt ("OE3" is de interne naam van de live omgeving):

    code language-none 
    <script id="interactionProposalScript" src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" type="text/javascript"></script>
    note important
    IMPORTANT
    De <script> -tag mag niet zelfsluitend zijn.

    Deze statische vraag zal automatisch een dynamische vraag produceren die alle parameters bevat nodig door de motor van de Interactie.

    Dit gedrag laat u verscheidene aanbiedingsruimten op de zelfde pagina gebruiken, die door één enkele vraag aan de motor worden beheerd.

  3. Resultaten in de pagina HTML

    De inhoud van de aanbiedingsvertegenwoordiging is teruggekeerd aan de pagina van de HTML door de motor van de Interactie:

    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>

Een geïdentificeerd aanbod presenteren presenting-an-identified-offer

Om een aanbieding aan een geïdentificeerde contact voor te stellen, is het proces gelijkaardig zoals hier beschreven: Een anonieme aanbieding presenteren. In de inhoud van de webpagina moet u het volgende script toevoegen waarmee de contactpersoon tijdens de aanroep naar de engine wordt geïdentificeerd:

<script type="text/javascript">
  interactionTarget = <contact_identifier>;
</script>

  1. Ga naar de aanbiedingsruimte die door de webpagina wordt aangeroepen, en klik op Advanced parameters en voeg een of meer identificatietoetsen toe.

    In dit voorbeeld is de identificatiesleutel samengesteld omdat deze zowel op de e-mail als op de naam van de ontvanger is gebaseerd.

  2. Tijdens de Web-pagina vertoning, laat de manuscriptevaluatie u ontvankelijke identiteitskaart op de aanbiedingsmotor overgaan. Als de id een samenstelling heeft, worden de toetsen weergegeven in dezelfde volgorde als in de geavanceerde instellingen en worden ze van elkaar gescheiden door een |.

    In het volgende voorbeeld is de contactpersoon aangemeld bij de website en is deze via e-mail en naam herkend tijdens het aanroepen naar de Interaction-engine.

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

Een HTML-renderfunctie gebruiken using-an-html-rendering-function

Als u de representatie van de HTML-aanbieding automatisch wilt genereren, kunt u een renderfunctie gebruiken.

  1. Ga naar de aanbiedingsruimte en klik op de knop Edit functions koppeling.

  2. Selecteer Overload the HTML rendering function.

  3. Ga naar de HTML rendering en voegt de variabelen die overeenkomen met de velden die voor de aanbiedingsinhoud zijn gedefinieerd, in de aanbiedingsruimte in.

    In dit voorbeeld wordt de aanbieding weergegeven in de vorm van een banner op een webpagina en bestaat deze uit een klikbare afbeelding en een titel die overeenkomen met de velden die zijn gedefinieerd in de inhoud van de aanbieding.

XML-modus xml-mode

Een voorstel presenteren presenting-an-offer

De interactie laat u een knoop van XML aan de pagina terugkeren van de HTML die de aanbiedingsmotor omhoog roept. Dit XML-knooppunt kan worden verwerkt door functies die aan de kant van de klant moeten worden ontwikkeld.

De vraag aan de motor van de Interactie kijkt als dit:

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

De "env" parameter ontvangt de interne naam van de live omgeving.

De "cb" parameter ontvangt de naam van de functie die het XML-knooppunt zal lezen dat wordt geretourneerd door de engine die de (callback) propositie(s) bevat. Deze parameter is optioneel.

De "t"parameter ontvangt de waarde van het doel, slechts voor een geïdentificeerde interactie. Deze parameter kan ook worden doorgegeven met de interactionTarget variabele. Deze parameter is optioneel.

De "c" de parameter ontvangt de lijst van interne namen van de categorieën. Deze parameter is optioneel.

De "th" de parameter ontvangt de lijst van thema's. Deze parameter is optioneel.

De "gctx" parameter ontvangt de vraaggegevens globaal (context) aan de volledige pagina. Deze parameter is optioneel.

Het geretourneerde XML-knooppunt ziet er als volgt uit:

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

Het volgende gebruiksgeval specificeert de configuraties om in Adobe Campaign uit te voeren om de wijze van XML toe te laten dan het resultaat van de vraag aan de motor op de pagina van de HTML tonen.

  1. Een omgeving en een aanbiedingsruimte maken

    Raadpleeg voor meer informatie over het maken van een omgeving Live/Design-omgevingen.

    Raadpleeg voor meer informatie over het maken van een aanbiedingsruimte Aanbiedingsruimten maken.

  2. Het aanbiedingsschema uitbreiden om nieuwe velden toe te voegen

    In dit schema worden de volgende velden gedefinieerd: Titel nummer 2 en prijs.

    De naam van het schema in het voorbeeld is focus:aanbieding

    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 important
    IMPORTANT
    Elk element moet tweemaal worden gedefinieerd. CDATA-typeelementen ("_jst") kunnen personalisatievelden bevatten.
    Vergeet niet de databasestructuur bij te werken. Raadpleeg deze sectie voor meer informatie.
    note note
    NOTE
    U kunt het aanbiedingsschema uitbreiden om nieuwe velden zowel in batch- als eenheidsmodus en in elke gewenste indeling (tekst, HTML en XML) toe te voegen.

  3. De aanbiedingsformule uitbreiden om nieuwe velden te bewerken en een bestaand veld te wijzigen

    Bewerk de Voorstel (nsm) invoerformulier.

    Voeg in de sectie Weergaven de twee nieuwe velden in met de volgende inhoud:

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

    Opmerking toevoegen aan het doel-URL-veld:

    note important
    IMPORTANT
    De velden van de ( <input>) moet het formulier verwijzen naar de CDATA-typeelementen die zijn gedefinieerd in het gemaakte schema.

    De rendering in het formulier met aanbiedingsweergaven ziet er als volgt uit:

    De Title 2 en Price zijn toegevoegd en Destination URL wordt niet meer weergegeven.

  4. Een aanbieding maken

    Raadpleeg voor meer informatie over het maken van aanbiedingen Een aanbieding maken.

    In het volgende gebruiksgeval wordt de aanbieding als volgt vermeld:

  5. Goedkeuren of laten goedkeuren door iemand anders, dan activeren op de aanbiedingsruimte die bij de laatste stap is gecreëerd, zodat deze beschikbaar wordt gesteld in de gekoppelde live omgeving.

  6. De vraag van de motor en het resultaat op de pagina van de HTML

    De vraag aan de interactiemotor in de pagina van de HTML ziet als volgt:

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

    De waarde van "env" parameter is de interne naam van de live omgeving.

    De waarde van "cb" parameter is de naam van de functie die het XML-knooppunt moet interpreteren dat door de engine wordt geretourneerd. In ons voorbeeld opent de aangeroepen functie een modaal venster (alert() functie).

    Het XML-knooppunt dat door de Interaction-engine wordt geretourneerd, ziet er als volgt uit:

    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>

Een renderfunctie gebruiken using-a-rendering-function-

Het is mogelijk een XML-renderfunctie te gebruiken om een aanbiedingspresentatie te maken. Deze functie wijzigt de knoop van XML die aan de pagina van de HTML tijdens de vraag aan de motor is teruggekeerd.

  1. Ga naar de aanbiedingsruimte en klik op de knop Edit functions koppeling.

  2. Selecteer Overload the XML rendering function.

  3. Ga naar de XML rendering en voegt u de gewenste functie in.

    De functie kan er als volgt uitzien:

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

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