PREMIUM Criar um design

Um design define como as recomendações são exibidas em uma página.

Você pode criar um design de recomendações usando um design padrão ou criando um design personalizado. A tela Recommendations > Designs exibe os cartões de design padrão e quaisquer designs que foram criados em sua conta.

Lembre-se das seguintes informações ao trabalhar com designs:

  • Você pode criar um design de recomendações usando um design padrão ou pode criar um design personalizado.
  • Não é possível editar ou excluir um design padrão.
  • Você pode editar, copiar ou excluir um design personalizado.
  • Para criar um design com base em um design padrão, primeiro copie o design e edite a cópia.

Esta ilustração mostra o design padrão 1 x 4:

1 x 4 design padrão

Esta ilustração mostra um design personalizado:

Design personalizado

Você pode criar um design durante o processo de criação de atividades a partir do Visual Experience Composer (VEC) ou da biblioteca de design fora da criação de atividades. As seções a seguir supõem que você esteja criando designs a partir da biblioteca, mas as etapas são semelhantes.

Criar designs

Você pode criar um design com base em um design padrão ou pode criar um design personalizado.

Criar um design com base em um design padrão

  1. Clique em Recommendations > Designs para exibir a biblioteca de Designs .

    Biblioteca de designs

  2. Passe o mouse sobre o cartão para o design que deseja criar e clique no ícone Copiar .

    A caixa de diálogo Criar design é exibida.

  3. No painel Informações , adicione um Nome de conteúdo e uma imagem de pré-visualização opcional para exibição no cartão de design.

    When you use a default design, the design name and "Copy" appears in the Content Name field. Você pode editar o nome. Você também pode selecionar uma imagem para exibir no cartão de design.

  4. (Condicional) Edite o código de design, conforme desejado.

    Os designs de recomendação usam o idioma de design da Velocity de fonte aberta. Informações sobre a velocidade podem ser encontradas em https://velocity.apache.org e em Personalizar um design usando a Velocity.

    Um design pode ser HTML ou não-HTML. Por padrão, os designs em HTML são envolvidos com uma tag <div> para permitir o rastreamento de cliques em um ambiente da Web. Designs não-HTML são para ambientes que não sejam da Web onde click-tracking não é possível. Deslize a opção Design HTML para alternar para a posição "desligado" para usar código não HTML.

    Observação

    O número máximo de entidades que podem ser referenciadas em um design, seja em código fixo ou via loops, é 99.

  5. Clique em Salvar.

Criar um design personalizado

  1. Clique em Recommendations > Designs para exibir a biblioteca de Designs .

  2. Clique em Criar design.

    Se você quiser basear seu novo design personalizado em um design existente, passe o mouse sobre o design desejado e clique no ícone Copiar . Em seguida, você pode editar a cópia para criar um novo design personalizado.

  3. Adicione um Nome de conteúdo e uma imagem de pré-visualização opcional.

  4. (Condicional) Edite o código de design, conforme desejado.

    Consulte as informações na Etapa 4 acima para obter mais informações.

  5. Clique em Salvar.

Editar, copiar ou excluir um design

Lembre-se de que não é possível editar ou copiar um design padrão; você só pode copiar designs padrão.

Passe o mouse sobre o design desejado na biblioteca de design e clique no ícone apropriado: editar, copiar ou excluir.

Ícones de flutuação para um design

Você pode copiar um design existente para criar um design de duplicado que você pode modificar. Isso permite que você crie um design semelhante com menos esforço.

Esteja ciente de que os designs estão disponíveis em toda a conta. Considere isso antes de excluir um design. Os designs excluídos não podem ser recuperados.

Exemplo de JSON

O exemplo a seguir mostra como as respostas JSON podem ser retornadas ao configurar uma atividade por meio do editor baseado em formulário.

  1. Crie um design na biblioteca de design ou no fluxo de trabalho baseado em formulário. Se você tentar fazer isso dentro do fluxo de trabalho do Visual Experience Composer (VEC), poderá criar nada além de um design de HTML, que está envolvido com uma <div> para fins de rastreamento de cliques.

  2. Verifique se a opção "HTML Design" está desativada:

  3. O código a seguir é um exemplo do que você poderia colar no design:

        #* 
        * "Return a simple list of recommended entity ids"   
        *#
    
        {   
          "notes":{   
          "purpose": "Return a simple list of recommended entity ids",   
          "use-case": "Use this approach if you prefer to do a real-time lookup of entity attribute details (such as inventory, price, rating) from another system (such as a CMS, PIM or ecommerce platform)",   
          "version": "01"   
          },   
          "recommendedItems": {   
            "key": "$key.id",   
            "slot-01": "$entity1.id",   
            "slot-02": "$entity2.id",   
            "slot-03": "$entity3.id",   
            "slot-04": "$entity4.id",   
            "slot-05": "$entity5.id",   
            "slot-06": "$entity6.id",   
            "slot-07": "$entity7.id",   
            "slot-08": "$entity8.id",   
            "slot-09": "$entity9.id",   
            "slot-10": "$entity10.id"   
          }   
        }  
    
  4. Set up a form-based Recommendations activity that uses this design.

    1. Navigate to the Activities page.
    2. Clique em Criar atividade > Recomendações.
    3. Em Escolher o Experience Composer, selecione Formulário e clique em Avançar.
    4. Em localização, digite o texto: "Sample_Recs_Response"
    5. Em Conteúdo padrão, clique na seta para baixo e depois clique em Adicionara recomendação.
    6. Selecione um tipo de página. Isso determina a filtragem inicial da próxima tela.
    7. Selecione um cartão de Critérios e depois clique em Próximo.
    8. Select the design you created in the previous step, then click Next.
    9. Complete o processo de configuração.
    10. Clique na seta à direita próximo a Inativo e depois selecione Ativar.
  5. Depois que sua atividade estiver configurada e ativada, você pode configurar uma solicitação de amostra para recuperar a resposta limpa do JSON.

    From the time that you save your activity, Target will need to build a model to support the selected criteria configuration. Dependendo de vários fatores, isso pode levar algum tempo. Os resultados aparecem quando o modelo tiver sido criado.

    Por exemplo:

    https://[YOUR_CLIENT_CODE].tt.omtrdc.net/m2/YOUR_CLIENT_CODE/ubox/raw?mbox=[YOUR_MBOX_NAME]&mboxContentType=text/html&mboxXDomain=disabled&entity.id=[ENTITY_ID]&mboxHost=rawbox_sample&at_property=[AT_PROPERTY_TOKEN]&mboxNoRedirect=true&mboxPC=1234-4321&mboxSession=9876-7000
    

    onde

    Parâmetro Valor
    [YOUR_CLIENT_CODE] Código do cliente do público alvo (disponível em /help/target/products.html#recsSettings > Token da API do Recommendations > Código do cliente).
    [YOUR_MBOX_NAME] O nome selecionado na seção "Locais" do Recommendations baseado em formulário, neste caso Sample_Recs_Response.
    [ENTITY_ID O entity.id de um item em seu catálogo.
    [AT_PROPERTY_TOKEN] (Opcional) Adicionar se você selecionou uma Propriedade (parte das Permissões da empresa) durante a configuração de sua atividade.

Depois que seu algoritmo for executado e você obter os resultados, sua resposta deve ser:

Additional JSON object tips and tricks

Você também pode simplesmente enviar de volta uma lista simples de itens delimitados por vírgula, configurando um design com a seguinte sintaxe:

entity1.id, $entity2.id, $entity3.id, $entity4.id, $entity5.id, 

Como alternativa, você pode enviar informações adicionais na resposta. O seguinte arquivo de código é um exemplo mais complexo que retorna muito mais do que as IDs de entidade com seus slots associados (ordem). This design example also returns activity details, Target Profile details (as applicable), and other entity.attributes associated with the items returned.

    {   
     "adobeRecommendations": {   
      "notes": {   
       "purpose": "Return a list of entity ids with their associated entity.attributes",   
       "use-case": "Use this approach to avoid looking up attribute details after receiving a response from Target",   
       "version": "01"   
      },   
      "recommendedItems": {   
       "slot-01": "$entity1.id",   
       "slot-02": "$entity2.id",   
       "slot-03": "$entity3.id",   
       "slot-04": "$entity4.id",   
       "slot-05": "$entity5.id",   
       "slot-06": "$entity6.id",   
       "slot-07": "$entity7.id",   
       "slot-08": "$entity8.id",   
       "slot-09": "$entity9.id",   
       "slot-10": "$entity10.id"   
      },   
      "activityDetails": {   
       "mbox.name": "email-mbox",   
       "campaign.name": "\${campaign.name}",   
       "campaign.id": "\${campaign.id}",   
       "campaign.recipe.name": "\${campaign.recipe.name}",   
       "campaign.recipe.id": "\${campaign.recipe.id}",   
       "offer.name": "\${offer.name}",   
       "offer.id": "\${offer.id}",   
       "criteria.title": "$criteria.title",   
       "algorithm.name": "$algorithm.name",   
       "algorithm.dayCount": "$algorithm.dayCount"   
      },   
      "visitorProfile": {   
       "profile.favorite-category": "\${profile.favorite-category}",   
       "profile.test": "\${profile.test}",   
       "user.endpoint.lastPurchasedEntity": "\${user.endpoint.lastPurchasedEntity}",   
       "user.endpoint.lastViewedEntity": "\${user.endpoint.lastViewedEntity}",   
       "user.endpoint.mostViewedEntity": "\${user.endpoint.mostViewedEntity}",   
       "user.endpoint.categoryAffinity": "\${user.endpoint.categoryAffinity}",   
       "profile.geolocation.city": "\${profile.geolocation.city}",   
       "profile.geolocation.dma": "\${profile.geolocation.dma}",   
       "profile.geolocation.state": "\${profile.geolocation.state}",   
       "profile.geolocation.country": "\${profile.geolocation.country}",   
       "profile.sessionCount": "\${profile.sessionCount}",   
       "profile.averageDaysBetweenVisits": "\${profile.averageDaysBetweenVisits}",   
       "profile.browserTime": "\${profile.browserTime}",   
       "user.activeActivities": "\${user.activeActivities}",   
       "user.pcId": "\${user.pcId}",   
       "user.isFirstSession": "\${user.isFirstSession}",   
       "user.isNewSession": "\${user.isNewSession}",   
       "user.header": "\${user.header}",   
       "user.parameter": "\${user.parameter}"   
      },   
      "recKey": {   
       "recKeyDetails": {   
        "id": "$key.id",   
        "name": "$key.name",   
        "category": "$key.category",   
        "pageUrl": "$key.pageUrl",   
        "thumbnailUrl": "$key.thumbnailUrl"   
       }   
      },   
      "recDetailedResults": {   
       "recEntity1Details": {   
        "id": "$entity1.id",   
        "name": "$entity1.name",   
        "category": "$entity1.category",   
        "pageUrl": "$entity1.pageUrl",   
        "thumbnailUrl": "$entity1.thumbnailUrl"   
       },   
       "recEntity2Details": {   
        "id": "$entity2.id",   
        "name": "$entity2.name",   
        "category": "$entity2.category",   
        "pageUrl": "$entity2.pageUrl",   
        "thumbnailUrl": "$entity2.thumbnailUrl"   
       },   
       "recEntity3Details": {   
        "id": "$entity3.id",   
        "name": "$entity3.name",   
        "category": "$entity3.category",   
        "pageUrl": "$entity3.pageUrl",   
        "thumbnailUrl": "$entity3.thumbnailUrl"   
       },   
       "recEntity4Details": {   
        "id": "$entity4.id",   
        "name": "$entity4.name",   
        "category": "$entity4.category",   
        "pageUrl": "$entity4.pageUrl",   
        "thumbnailUrl": "$entity4.thumbnailUrl"   
       },   
       "recEntity5Details": {   
        "id": "$entity5.id",   
        "name": "$entity5.name",   
        "category": "$entity5.category",   
        "pageUrl": "$entity5.pageUrl",   
        "thumbnailUrl": "$entity5.thumbnailUrl"   
       },   
       "recEntity6Details": {   
        "id": "$entity6.id",   
        "name": "$entity6.name",   
        "category": "$entity6.category",   
        "pageUrl": "$entity6.pageUrl",   
        "thumbnailUrl": "$entity6.thumbnailUrl"   
       },   
       "recEntity7Details": {   
        "id": "$entity7.id",   
        "name": "$entity7.name",   
        "category": "$entity7.category",   
        "pageUrl": "$entity7.pageUrl",   
        "thumbnailUrl": "$entity7.thumbnailUrl"   
       },   
       "recEntity8Details": {   
        "id": "$entity8.id",   
        "name": "$entity8.name",   
        "category": "$entity8.category",   
        "pageUrl": "$entity8.pageUrl",   
        "thumbnailUrl": "$entity8.thumbnailUrl"   
       },   
       "recEntity9Details": {   
        "id": "$entity9.id",   
        "name": "$entity9.name",   
        "category": "$entity9.category",   
        "pageUrl": "$entity9.pageUrl",   
        "thumbnailUrl": "$entity9.thumbnailUrl"   
       },   
       "recEntity10Details": {   
        "id": "$entity10.id",   
        "name": "$entity10.name",   
        "category": "$entity10.category",   
        "pageUrl": "$entity10.pageUrl",   
        "thumbnailUrl": "$entity10.thumbnailUrl"   
       }   
      }   
     }   
    }  

Training video: Create custom designs in Recommendations (3:20) Overview badge

Este vídeo contém as seguintes informações:

  • Criar um design personalizado
  • Saiba como fazer referência às variáveis de exibição nos designs

Nesta página