DocumentaciónTargetGuía de Target

[Premium]{class="badge positive" title="Consulte qué se incluye en Target Premium."}

Crear un diseño

Last update: Tue Jul 30 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Un diseño define el modo en que las recomendaciones aparecen en una página.

Puede crear un diseño de Recommendations mediante un diseño predeterminado o un diseño personalizado. La pantalla Recommendations > Designs muestra tanto las tarjetas de diseño predeterminadas como los diseños que se hayan creado en su cuenta.

Tenga en cuenta la siguiente información cuando trabaje con diseños:

  • Puede crear un diseño de Recommendations utilizando un diseño predeterminado o puede crear uno personalizado.
  • No se puede editar ni eliminar un diseño predeterminado.
  • Puede editar, copiar o eliminar un diseño personalizado.
  • Para crear un diseño basado en un diseño predeterminado, primero debe copiar el diseño y, a continuación, editar la copia.

Esta ilustración muestra el diseño predeterminado 1 x 4:

1 x 4 diseño predeterminado

Esta ilustración muestra un diseño personalizado:

Diseño personalizado

Puede crear un diseño durante el proceso de creación de actividades desde el Compositor de experiencias visuales (VEC) o desde la biblioteca de diseño fuera de la creación de actividades. En las secciones siguientes se da por hecho que está creando diseños a partir de la biblioteca, pero los pasos son similares.

Creación de diseños

Puede crear un diseño basado en un diseño predeterminado o puede crear uno personalizado.

Crear un diseño basado en un diseño predeterminado

  1. Haga clic en Recommendations > Designs para mostrar la biblioteca Designs.

    Biblioteca de diseños

  2. Pase el ratón sobre la tarjeta del diseño que quiera crear y luego haga clic en el icono Copy.

    Imagen Card_CopyDesign

    Se muestra el cuadro de diálogo Create Design.

    imagen createDesign

  3. En el panel Information, agregue Content Name y una imagen de vista previa opcional para que se muestre en la tarjeta de diseño.

    Cuando se usa un diseño predeterminado, el nombre del diseño y "Copiar" aparecen en el campo Content Name. Puede editar el nombre. También puede seleccionar una imagen para mostrarla en la tarjeta de diseño.

  4. (Condicional) Edite el diseño Code como desee.

    Los diseños de Recommendations utilizan el lenguaje de diseño de código abierto Velocity. Encontrará información sobre Velocity en https://velocity.apache.org y en Personalizar un diseño con Velocity.

    Un diseño puede ser HTML o no HTML. De manera predeterminada, los diseños de HTML se encapsulan con una etiqueta <div> para permitir el rastreo de clics en un entorno web. Los diseños que no son de HTML son para entornos que no son de web donde el rastreo de clics no es posible. Deslice el conmutador HTML Design a la posición "desactivado" para utilizar código que no sea de HTML.

    note note
    NOTE
    El número máximo de entidades a las que se puede hacer referencia en un diseño, tanto codificadas como mediante bucles, es de 99.

  5. Haga clic en Save.

Crear un diseño personalizado

  1. Haga clic en Recommendations > Designs para mostrar la biblioteca Designs.

  2. Haga clic en Create Design.

    Si desea basar el nuevo diseño personalizado en uno existente, pase el ratón sobre el diseño deseado y luego haga clic en el icono Copy. A continuación, puede editar la copia para crear un nuevo diseño personalizado.

  3. Agregar Content Name y una imagen de vista previa opcional.

  4. (Condicional) Edite el diseño Code como desee.

    Consulte la información del paso 4 anterior para obtener más información.

  5. Haga clic en Save.

Editar, copiar o eliminar un diseño

Recuerde que no puede editar ni copiar un diseño predeterminado; sólo puede copiar diseños predeterminados.

Pase el ratón sobre el diseño que quiera en la biblioteca Design y luego haga clic en el icono correspondiente: editar, copiar o eliminar.

Iconos de desplazamiento para un diseño

Puede copiar un diseño existente para crear un diseño duplicado que luego pueda modificar. Este proceso permite crear un diseño similar con menos esfuerzo.

Tenga en cuenta que los diseños están disponibles en toda la cuenta. Considere el uso en otras cuentas antes de eliminar un diseño. Los diseños eliminados no se pueden recuperar.

Ejemplo de JSON section_75BFB2537CFF4FBD9B560F59EB32C8DD

El siguiente ejemplo muestra cómo se pueden devolver las respuestas JSON al configurar una actividad a través del editor basado en formularios.

  1. Cree un diseño desde la biblioteca de diseños o desde el flujo de trabajo basado en formularios. Si intenta crear un diseño dentro del flujo de trabajo Visual Experience Composer (VEC), no podrá crear nada más que un diseño de HTML, que está dentro de un <div> para fines de rastreo de clics.

  2. Compruebe que la opción “Diseño HTML” esté desactivada:

    imagen html_design_toggle

  3. El siguiente código es un ejemplo de lo que puede pegar en el diseño:

    code language-javascript 
        #*
    * "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. Configure una actividad Recommendations basada en formularios que use este diseño.

    1. Vaya a la página Activities.
    2. Haga clic en Create Activity > Recommendations.
    3. En Choose Experience Composer, seleccione Form y haga clic en Next.
    4. En Ubicación, introduzca el texto: “Sample_Recs_Response”
    5. En Default Content, haga clic en la flecha hacia abajo y luego haga clic en Add Recommendation.
    6. Elija un tipo de página. Esto determina el filtrado inicial de la siguiente pantalla.
    7. Seleccione una tarjeta Criterios y luego haga clic en Next.
    8. Seleccione el diseño que creó en el paso anterior y luego haga clic en Next.
    9. Complete el proceso de configuración.
    10. Haga clic en la flecha derecha junto a Inactive y luego seleccione Activate.

  5. Una vez configurada y activada la actividad, puede configurar una solicitud de muestra para recuperar la respuesta JSON limpia.

    Desde el momento en que guarda la actividad, Target necesita generar un modelo para admitir la configuración de criterios seleccionada. Dependiendo de una serie de factores, este proceso podría llevar algún tiempo. Los resultados aparecen una vez creado el modelo.

    Por ejemplo:

    code language-none 
    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

    donde

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    Parámetro Valor
    [YOUR_CLIENT_CODE] Código de cliente de Target (disponible en /help/target/products.html#recsSettings > Token de la API de Recommendations > Código de cliente).
    [YOUR_MBOX_NAME] El nombre que ha seleccionado en la sección "ubicaciones" de Recommendations basado en formularios, en este caso Sample_Recs_Response.
    [ENTITY_ID El entity.id de un artículo del catálogo.
    [AT_PROPERTY_TOKEN] (Opcional) Añada este parámetro si ha seleccionado una Propiedad (parte de los permisos de empresa) durante la configuración de la actividad.

Cuando se haya ejecutado el algoritmo y tenga los resultados, su respuesta tendría que parecerse a esta:

imagen json_recommendation {width="575px"}

Trucos y consejos adicionales sobre objetos JSON section_C305673C68944749969DB239E3221DC2

También puede enviar una sencilla lista de elementos delimitada por comas configurando un diseño con la sintaxis siguiente:

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

Alternativamente, también puede enviar información adicional en la respuesta. El siguiente archivo de código es un ejemplo más complejo que devuelve mucho más que los identificadores de la entidad con sus espacios asociados (solicitud). Este ejemplo de diseño también devuelve detalles de la actividad, detalles del perfil de Target (según corresponda) y otros entity.attributes asociados con los elementos devueltos.

    {
     "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"
       }
      }
     }
    }

Vídeo de formación: Creación de diseños personalizados en Recommendations (3:20) Distintivo de información general

Este vídeo contiene la información siguiente:

  • Crear un diseño personalizado
  • Aprenda a hacer referencia a las variables de visualización en sus diseños

https://video.tv.adobe.com/v/35325?captions=spa

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654