DokumentationCampaignDokumentation för Campaign Classic v7

Integrering via JavaScript (klientsida) integration-via-javascript-client-side

Last update: Fri Jul 19 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Ämnen:

Om du vill anropa interaktionsmotorn på en webbsida infogar du ett anrop till en JavaScript-kod direkt på sidan. Det här anropet returnerar erbjudandeinnehållet i en riktad

-element.

Adobe rekommenderar att du använder JavaScript integreringsmetod.

Skriptet som anropar URL ser ut så här:

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

Parametern env tar emot det interna namnet på den aktiva miljön som är dedikerad till anonyma interaktioner.

För att kunna presentera ett erbjudande måste vi skapa en miljö och ett erbjudandeutrymme i Adobe Campaign och sedan konfigurera HTML-sidan.

I följande exempel beskrivs de möjliga alternativen för att integrera erbjudanden via JavaScript.

HTML, läge html-mode

Presentera ett anonymt erbjudande presenting-an-anonymous-offer

  1. Förbereder interaktionsmotorn

    Öppna Adobe Campaign gränssnitt och förbered en anonym miljö.

    Skapa ett erbjudandeutrymme som är länkat till den anonyma miljön.

    Skapa ett erbjudande och dess representation länkad till erbjudandeutrymmet.

  2. HTML sidans innehåll

    Sidan HTML måste innehålla en

    element med ett @id-attribut med värdet för det interna namnet på erbjudandeutrymmet ("i_internal name space"). Erbjudandet kommer att infogas i detta
    element efter interaktion.

    I vårt exempel får attributet @id värdet "i_SPC12", där "SPC12" är det interna namnet på det erbjudandeutrymme som skapats tidigare:

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

    I det här exemplet är URL:en för att anropa skriptet följande ("OE3" är det interna namnet på den aktiva miljön):

    code language-none 
    <script id="interactionProposalScript" src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" type="text/javascript"></script>
    note important
    IMPORTANT
    Taggen <script> får inte vara självstängande.

    Detta statiska anrop genererar automatiskt ett dynamiskt anrop som innehåller alla parametrar som behövs för interaktionsmotorn.

    Med det här beteendet kan du använda flera erbjudandemellanslag på samma sida, som hanteras av ett enda anrop till motorn.

  3. Resultat på HTML-sidan

    Innehållet i erbjudanderepresentationen returneras till HTML-sidan av interaktionsmotorn:

    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>

Presentera ett identifierat erbjudande presenting-an-identified-offer

Processen liknar den som beskrivs här för att presentera ett erbjudande till en identifierad kontakt: Visa ett anonymt erbjudande. I webbsidans innehåll måste du lägga till följande skript som identifierar kontakten under anropet till motorn:

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

  1. Gå till det erbjudandeutrymme som ska anropas av webbsidan, klicka på Advanced parameters och lägg till en eller flera identifieringsnycklar.

    I det här exemplet är identifieringsnyckeln sammansatt eftersom den baseras både på e-postadressen och mottagarens namn.

  2. När webbsidan visas kan du med skriptutvärderingen skicka ID:t till erbjudandemotorn. Om ID:t är sammansatt visas tangenterna i samma sekvens som de används i de avancerade inställningarna och avgränsas med en |.

    I följande exempel har kontakten loggat in på webbplatsen och identifierades under samtalet till interaktionsmotorn tack vare deras e-postadress och namn.

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

Använda en HTML-återgivningsfunktion using-an-html-rendering-function

Du kan använda en återgivningsfunktion om du vill generera representationen av HTML automatiskt.

  1. Gå till erbjudandeutrymmet och klicka på länken Edit functions.

  2. Välj Overload the HTML rendering function.

  3. Gå till fliken HTML rendering och infoga de variabler som matchar fälten som definierats för erbjudandeinnehållet i erbjudandeutrymmet.

    I det här exemplet visas erbjudandet i form av en banderoll på en webbsida och består av en klickbar bild och en titel som matchar fälten i erbjudandeinnehållet.

XML-läge xml-mode

Presentera ett erbjudande presenting-an-offer

Med interaktion kan du returnera en XML-nod till HTML-sidan som anropar erbjudandemotorn. Denna XML-nod kan bearbetas av funktioner som ska utvecklas på kundsidan.

Anropet till interaktionsmotorn ser ut så här:

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

Parametern env tar emot det interna namnet för den aktiva miljön.

Parametern cb tar emot namnet på funktionen som läser XML-noden som returneras av motorn som innehåller (återanrop). Den här parametern är valfri.

Parametern t tar emot värdet för målet, endast för en identifierad interaktion. Den här parametern kan också skickas med variabeln interactionTarget . Den här parametern är valfri.

Parametern c tar emot listan med interna namn för kategorierna. Den här parametern är valfri.

Parametern th tar emot listan med teman. Den här parametern är valfri.

Parametern gctx tar emot anropsdata globalt (kontext) till hela sidan. Den här parametern är valfri.

Den returnerade XML-noden ser ut så här:

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

Följande exempel visar vilka konfigurationer som ska utföras i Adobe Campaign för att aktivera XML-läget och sedan resultatet av anropet till motorn på HTML-sidan.

  1. Skapa en miljö och ett erbjudandeutrymme

    Mer information om hur du skapar en miljö finns i Live/Design-miljöer.

    Mer information om hur du skapar ett erbjudandeutrymme finns i Skapa erbjudandemellanslag.

  2. Utöka erbjudandeschemat för att lägga till nya fält

    Det här schemat definierar följande fält: Rubrik 2 och pris.

    Schemats namn i exemplet är 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 important
    IMPORTANT
    Varje element måste definieras två gånger. CDATA-tytelement ("_jst") kan innehålla anpassningsfält.
    Glöm inte att uppdatera databasstrukturen. Mer information om detta finns i det här avsnittet.
    note note
    NOTE
    Du kan utöka erbjudandeschemat för att lägga till nya fält både i gruppläge och enhetligt läge och i alla format (text, HTML och XML).

  3. Utöka erbjudandeformeln för att redigera nya fält och ändra ett befintligt fält

    Redigera indataformuläret Erbjudande (nsm).

    I avsnittet Vyer infogar du de två nya fälten med följande innehåll:

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

    Kommentera URL-fältet för målet:

    note important
    IMPORTANT
    Fälten i formuläret ( <input>) måste peka på elementen av CDATA-typ som definierats i det skapade schemat.

    Återgivningen i formuläret för erbjudanderepresentationer ser ut så här:

    Fälten Title 2 och Price har lagts till och fältet Destination URL visas inte längre.

  4. Skapa ett erbjudande

    Mer information om hur du skapar erbjudanden finns i Skapa ett erbjudande.

    I följande fall anges erbjudandet enligt följande:

  5. Godkänn ett erbjudande eller låt det godkännas av någon annan och aktivera det sedan på det erbjudandeutrymme som skapades i det sista steget så att det blir tillgängligt i den länkade live-miljön.

  6. Motoranrop och resultat på HTML-sidan

    Anropet till interaktionsmotorn på HTML-sidan ser ut så här:

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

    Värdet för parametern env är det interna namnet på den aktiva miljön.

    Värdet för parametern cb är namnet på funktionen som måste tolka XML-noden som returneras av motorn. I det här exemplet öppnar den anropade funktionen ett modalt fönster (funktionen alert()).

    XML-noden som returneras av interaktionsmotorn ser ut så här:

    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>

Använda en återgivningsfunktion using-a-rendering-function-

Det går att använda en XML-återgivningsfunktion för att skapa en erbjudandepresentation. Den här funktionen ändrar XML-noden som returneras till HTML-sidan under anropet till motorn.

  1. Gå till erbjudandeutrymmet och klicka på länken Edit functions.

  2. Välj Overload the XML rendering function.

  3. Gå till fliken XML rendering och infoga önskad funktion.

    Funktionen kan se ut så här:

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

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