Integração via JavaScript (lado do cliente) integration-via-javascript-client-side

Last update: Wed Oct 02 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Para chamar o mecanismo do Interaction em uma página da Web, insira uma chamada para um código JavaScript diretamente na página. Essa chamada retorna o conteúdo da oferta em um elemento

direcionado.

A Adobe recomenda o uso do método de integração JavaScript.

O URL de chamada de script tem essa aparência:

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

O parâmetro "env" recebe o nome interno do ambiente ativo dedicado às interações anônimas.

Para apresentar uma oferta, precisamos criar um ambiente e um espaço de oferta no Adobe Campaign e, em seguida, configurar a página HTML.

Os seguintes casos de uso detalham as possíveis opções para integrar ofertas via JavaScript.

Modo HTML html-mode

Apresentação de uma oferta anônima presenting-an-anonymous-offer

  1. Preparação do mecanismo de interação

    Abra a interface do Adobe Campaign e prepare um ambiente anônimo.

    Crie um espaço de oferta vinculado ao ambiente anônimo.

    Crie uma oferta e sua representação vinculada ao espaço de oferta.

  2. Conteúdo da página HTML

    A página HTML deve incluir um

    elemento com um atributo @id com o valor do nome interno do espaço de oferta criado ("i_internal name space"). A oferta será inserida neste
    elemento pelo Interaction.

    No nosso exemplo, o atributo @id recebe o valor "i_SPC12", onde "SPC12" é o nome interno do espaço de oferta criado anteriormente:

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

    No nosso exemplo, a URL para chamar o script é a seguinte ("OE3" é o nome interno do ambiente ativo):

    code language-none 
    <script id="interactionProposalScript" src="https://instance.adobe.org:8080/nl/interactionProposal.js?env=OE3" type="text/javascript"></script>
    note important
    IMPORTANT
    A tag <script> não deve fechar automaticamente.

    Essa chamada estática gerará automaticamente uma chamada dinâmica contendo todos os parâmetros necessários do mecanismo do Interaction.

    Esse comportamento permite usar vários espaços de oferta na mesma página gerenciados por uma única chamada do mecanismo.

  3. Resultados na página HTML

    O conteúdo da representação da oferta é retornado para a página HTML pelo mecanismo do 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>

Apresentação de uma oferta identificada presenting-an-identified-offer

Para apresentar uma oferta a um contato identificado, o processo é semelhante ao processo detalhado aqui: Presenting an anonymous offer. No conteúdo da página da Web, é necessário adicionar o script a seguir para identificar o contato durante a chamada do mecanismo:

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

  1. Vá para o espaço de oferta que será chamado pela página da Web, clique em Advanced parameters e adicione uma ou mais chaves de identificação.

    Neste exemplo, a chave de identificação é composta por ser baseada no e-mail e no nome do destinatário.

  2. Durante a exibição da página da Web, a avaliação do script permite passar a ID do destinatário no mecanismo de oferta. Se a ID for composta, as chaves serão exibidas na mesma sequência usada nas configurações avançadas e separadas por um |.

    No exemplo a seguir, o contato fez logon no site e foi reconhecido durante a chamada do mecanismo do Interaction graças ao e-mail e ao nome.

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

Uso de uma função de renderização HTML using-an-html-rendering-function

Para gerar a representação de oferta HTML automaticamente, é possível usar uma função de renderização.

  1. Vá para o espaço da oferta e clique no link Edit functions.

  2. Selecione Overload the HTML rendering function.

  3. Vá para a guia HTML rendering e insira as variáveis que correspondem aos campos definidos para o conteúdo da oferta no espaço de oferta.

    Neste exemplo, a oferta é exibida no formato de um banner na página da Web e é composta de uma imagem clicável e um título que corresponde aos campos definidos no conteúdo da oferta.

Modo XML xml-mode

Apresentação de uma oferta presenting-an-offer

O Interaction permite retornar um nó XML para a página HTML que chama o mecanismo de oferta. Este nó XML pode ser processado por funções a serem desenvolvidas no lado do cliente.

A chamada para o mecanismo do Interaction tem esta aparência:

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

O parâmetro "env" recebe o nome interno do ambiente ativo.

O parâmetro "cb" recebe o nome da função que lê o nó XML retornado pelo mecanismo que contém a(s) proposta(s) (de retorno de chamada). Este parâmetro é opcional.

O parâmetro "t" recebe o valor do target, somente para uma interação identificada. Esse parâmetro também pode ser passado com a variável interactionTarget. Este parâmetro é opcional.

O parâmetro "c" recebe a lista de nomes internos das categorias. Este parâmetro é opcional.

O parâmetro "th" recebe a lista de temas. Este parâmetro é opcional.

O parâmetro "gctx" recebe a chamada dos dados globais (contexto) para a página inteira. Este parâmetro é opcional.

O nó XML retornado tem esta aparência:

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

O caso de uso a seguir detalha as configurações a serem feitas no Adobe Campaign para permitir que o modo XML mostre o resultado da chamada na página HTML.

  1. Criação de um ambiente e um espaço de oferta

    Para obter mais informações sobre como criar um ambiente, consulte Ambientes ao vivo/de design.

    Para obter mais informações sobre a criação de um espaço de oferta, consulte Criação de espaços de oferta.

  2. Extensão do schema de ofertas para adicionar novos campos

    Esse esquema definirá os seguintes campos: Title number 2 e price.

    O nome do schema no exemplo é 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
    Cada elemento precisa ser definido duas vezes. Os elementos do tipo CDATA ("_jst") podem conter campos de personalização.
    Não esqueça de atualizar a estrutura do banco de dados. Para obter mais informações, consulte esta seção.
    note note
    NOTE
    Você pode estender o schema de ofertas para adicionar novos campos em modo de lote e unitário e em qualquer formato (texto, HTML e XML).

  3. Extensão da fórmula de oferta para editar novos campos e modificar um campo existente

    Edite o formulário de entrada Offer (nsm).

    Na seção "Views", insira os dois novos campos com o seguinte conteúdo:

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

    Comente o campo URL de destino:

    note important
    IMPORTANT
    Os campos do formulário (<input>) devem apontar para os elementos do tipo CDATA definidos no esquema criado.

    A renderização nas representações de oferta é semelhante a esta:

    Os campos Title 2 e Price foram adicionados e o campo Destination URL não é mais exibido.

  4. Criação de uma oferta

    Para obter mais informações sobre como criar ofertas, consulte Criação de uma oferta.

    No caso de uso a seguir, a oferta é inserida da seguinte maneira:

  5. Aprove uma oferta ou solicite a outra pessoa a aprovar, então ative-a no espaço de oferta criado na última etapa para que ela fique disponível no ambiente ativo vinculado.

  6. O mecanismo chama e mostra o resultado na página HTML.

    A chamada para o mecanismo do Interaction na página HTML tem a seguinte aparência:

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

    O valor do parâmetro "env" é o nome interno do ambiente ativo.

    O valor do parâmetro "cb" é o nome da função que precisa interpretar o nó XML retornado pelo mecanismo. No nosso exemplo, a função chamada abre uma janela modal (alert() função).

    O nó XML retornado pelo mecanismo do Interaction tem esta aparência:

    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>

Utilização de uma função de renderização using-a-rendering-function-

É possível usar uma função de renderização XML para criar uma apresentação de ofertas. Essa função modificará o nó XML retornado à página HTML durante a chamada para o mecanismo.

  1. Vá para o espaço da oferta e clique no link Edit functions.

  2. Selecione Overload the XML rendering function.

  3. Vá para a guia XML rendering e insira a função desejada.

    A função pode ter esta aparência:

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

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