Show Menu
ARGOMENTI×

Integrazione tramite JavaScript (lato client)

Per chiamare il motore di interazione in una pagina Web, inserire una chiamata a un codice JavaScript direttamente nella pagina. Questa chiamata restituisce il contenuto dell'offerta in un oggetto
element.
Adobe consiglia di utilizzare il metodo di integrazione JavaScript.
Lo script che richiama l'URL avrà l'aspetto seguente:
<script id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=" type="text/javascript"></script>

Il parametro " env " riceve il nome interno dell'ambiente live dedicato alle interazioni anonime.
Per presentare un'offerta, è necessario creare un ambiente e uno spazio di offerta in Adobe Campaign, quindi configurare la pagina HTML.
I seguenti casi di utilizzo descrivono le possibili opzioni per l'integrazione delle offerte tramite JavaScript.

Modalità HTML

Presentazione di un'offerta anonima

  1. Preparazione del motore di interazione
    Aprite l'interfaccia Adobe Campaign e preparate un ambiente anonimo.
    Create uno spazio di offerta collegato all'ambiente anonimo.
    Create un'offerta e la relativa rappresentazione collegata allo spazio dell'offerta.
  2. Contenuto della pagina HTML
    La pagina HTML deve includere un
    con un attributo @id con il valore del nome interno dello spazio delle offerte creato ("spazio dei nomi i_internal"). L'offerta verrà inserita in questo elemento tramite Interazione.
    Nel nostro esempio, l'attributo @id riceve il valore "i_SPC12", dove "SPC12" è il nome interno dello spazio delle offerte creato in precedenza:
    <div id="i_SPC12"></div>
    
    
    Nel nostro esempio, l'URL per la chiamata dello script è il seguente ("OE3" è il nome interno dell'ambiente live):
    <script id="interactionProposalScript" src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" type="text/javascript"></script>
    
    
    Il <script> tag non deve chiudersi automaticamente.
    Questa chiamata statica genererà automaticamente una chiamata dinamica contenente tutti i parametri richiesti dal motore di interazione.
    Questo comportamento consente di utilizzare diversi spazi di offerta sulla stessa pagina, da gestire con una singola chiamata al motore.
  3. Risultati nella pagina HTML
    Il contenuto della rappresentazione dell'offerta viene restituito alla pagina HTML dal motore di interazione:
    <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>
    
    

Presentazione di un'offerta identificata

Per presentare un'offerta a un contatto identificato, il processo è simile a quello descritto qui: Presentazione di un'offerta anonima. Nel contenuto della pagina Web, è necessario aggiungere il seguente script che identificherà il contatto durante la chiamata al motore:
<script type="text/javascript">
  interactionTarget = <contact_identifier>;
</script>

  1. Andate allo spazio delle offerte che verrà richiamato dalla pagina Web, fate clic su Advanced parameters e aggiungete una o più chiavi di identificazione.
    In questo esempio, la chiave di identificazione è composita in quanto si basa sia sull'e-mail che sul nome del destinatario.
  2. Durante la visualizzazione della pagina Web, la valutazione dello script consente di trasmettere l'ID destinatario al motore delle offerte. Se l’ID è composito, i tasti vengono visualizzati nella stessa sequenza utilizzata nelle impostazioni avanzate e separati da un |
    Nell'esempio seguente, il contatto ha eseguito l'accesso al sito Web ed è stato riconosciuto durante la chiamata al motore di interazione grazie alla propria e-mail e nome.
    <script type="text/javascript">
      interactionTarget = myEmail|myName;
    </script>
    
    

Utilizzo di una funzione di rendering HTML

Per generare automaticamente la rappresentazione dell'offerta HTML, potete utilizzare una funzione di rendering.
  1. Andate nello spazio delle offerte e fate clic sul Edit functions collegamento.
  2. Seleziona Overload the HTML rendering function .
  3. Andate alla HTML rendering scheda e inserite le variabili che corrispondono ai campi definiti per il contenuto dell'offerta nello spazio dell'offerta.
    In questo esempio, l'offerta viene visualizzata sotto forma di banner in una pagina Web e comprende un'immagine su cui è possibile fare clic e un titolo che corrisponde ai campi definiti nel contenuto dell'offerta.

Modalità XML

Presentazione di un'offerta

L'interazione consente di restituire un nodo XML alla pagina HTML che richiama il motore delle offerte. Questo nodo XML può essere elaborato da funzioni da sviluppare sul lato cliente.
La chiamata al motore di interazione si presenta così:
<script type="text/javascript" id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=&cb="></script>

Il parametro " env " riceve il nome interno dell'ambiente live.
Il parametro " cb " riceve il nome della funzione che leggerà il nodo XML restituito dal motore contenente le proposizioni (callback). Questo parametro è facoltativo.
Il parametro " t " riceve il valore del target, solo per un'interazione identificata. Questo parametro può essere trasmesso anche con la variabile interactiveTarget . Questo parametro è facoltativo.
Il parametro " c " riceve l'elenco dei nomi interni delle categorie. Questo parametro è facoltativo.
Il parametro " th " riceve l'elenco dei temi. Questo parametro è facoltativo.
Il parametro " gctx " riceve i dati della chiamata globali (contestuali) sull’intera pagina. Questo parametro è facoltativo.
Il nodo XML restituito è simile al seguente:
<propositions>
 <proposition id="" offer-id="" weight="" rank="" space="" div=""> //proposition identifiers
   ...XML content defined in Adobe Campaign...
 </proposition>
 ...
</propositions>

Il seguente caso d’uso descrive le configurazioni da eseguire in Adobe Campaign per abilitare la modalità XML, quindi mostra il risultato della chiamata al motore nella pagina HTML.
  1. Creazione di un ambiente e di uno spazio di offerta
    Per ulteriori informazioni sulla creazione di un ambiente, vedere Ambienti Ambienti di progettazione/in tempo reale Live/Design.
    Per ulteriori informazioni sulla creazione di uno spazio per le offerte, consultate Creazione di spazi per le offerte.
  2. Estensione dello schema delle offerte per aggiungere nuovi campi
    Questo schema definisce i campi seguenti: Titolo numero 2 e prezzo.
    Il nome dello schema nell'esempio è 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>
    
    
    Ogni elemento deve essere definito due volte. Gli elementi di tipo CDATA ("_jst") possono contenere campi di personalizzazione.
    Non dimenticare di aggiornare la struttura del database. Per ulteriori informazioni al riguardo, consulta questa sezione .
    Potete estendere lo schema delle offerte per aggiungere nuovi campi sia in modalità batch che unitaria, nonché in qualsiasi formato (testo, HTML e XML).
  3. Estensione della formula dell'offerta per modificare nuovi campi e modificare un campo esistente
    Modificate il modulo di input Offer (nsm) .
    Nella sezione "Viste", inserite i due nuovi campi con il seguente contenuto:
    <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"/>
    
    
    Aggiungete un commento al campo URL di destinazione:
    I campi del modulo ( <input> ) devono puntare agli elementi del tipo CDATA definiti nello schema creato.
    Il rendering nel modulo delle rappresentazioni delle offerte è simile al seguente:
    I campi Title 2 e Price sono stati aggiunti e il Destination URL campo non viene più visualizzato.
  4. Creazione di un’offerta
    Per ulteriori informazioni sulla creazione di offerte, consultate Creazione di un'offerta .
    Nel caso di utilizzo seguente, l'offerta è inserita come segue:
  5. Approvare un'offerta o farla approvare da qualcun altro, quindi attivarla nello spazio dell'offerta creato all'ultimo passaggio in modo che sia disponibile nell'ambiente live collegato.
  6. Chiamate del motore e risultati sulla pagina HTML
    La chiamata al motore di interazione nella pagina HTML si presenta come segue:
    <script id="interactionProposalScript" src="https://<SERVER_URL>/nl/interactionProposal.js?env=OE7&cb=alert" type="text/javascript">
    
    
    Il valore del parametro " env " è il nome interno dell'ambiente live.
    Il valore del parametro " cb " è il nome della funzione che deve interpretare il nodo XML restituito dal motore. Nel nostro esempio, la funzione richiamata apre una finestra modale (funzione alert()).
    Il nodo XML restituito dal motore di interazione ha l'aspetto seguente:
    <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>
    
    

Utilizzo di una funzione di rendering

È possibile utilizzare una funzione di rendering XML per creare una presentazione di offerta. Questa funzione modificherà il nodo XML che viene restituito alla pagina HTML durante la chiamata al motore.
  1. Andate nello spazio delle offerte e fate clic sul Edit functions collegamento.
  2. Seleziona Overload the XML rendering function .
  3. Passare alla XML rendering scheda e inserire la funzione desiderata.
    La funzione può essere simile alla seguente:
    function (proposition) {
      delete proposition.@id;
      proposition.@newAttribute = "newValue";
    }