Crear un diseño

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

Puede crear un diseño de Recommendations usando un diseño predeterminado o creando uno personalizado. La pantalla Recommendations > Diseños muestra las tarjetas de diseño predeterminadas y los diseños que se han creado en la cuenta.

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

• Puede crear un diseño de recomendaciones utilizando un diseño predeterminado o un diseño 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 luego editar la copia.

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

Esta ilustración muestra un 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 presupone 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 uno personalizado.

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

1. Haga clic en Recommendations > Diseños para mostrar la biblioteca Diseños.

   

2. Pase el ratón sobre la tarjeta del diseño que desea crear y, a continuación, haga clic en el icono Copiar.

   

   Aparece el cuadro de diálogo Crear diseño.

   

3. En el panel Información, añada un Nombre de contenido y una imagen de vista previa opcional para mostrarla en la tarjeta de diseño.

   Cuando se utiliza un diseño predeterminado, el nombre del diseño y "Copiar" aparecen en el campo Nombre de contenido. 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 según sus preferencias.

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

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

   NOTA

   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 Guardar.

Crear un diseño personalizado

1. Haga clic en Recommendations > Diseños para mostrar la biblioteca Diseños.

2. Haga clic en Crear diseño.

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

3. Agregue un Nombre de contenido y una imagen de vista previa opcional.

4. (Condicional) Edite el diseño Code según sus preferencias.

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

5. Haga clic en Guardar.

Editar, copiar o eliminar un diseño

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

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

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

Tenga en cuenta que los diseños están disponibles en toda la cuenta. Asegúrese de tener esto en cuenta antes de eliminar un diseño. Los diseños eliminados no se pueden recuperar.

Ejemplo de JSON

El siguiente ejemplo muestra cómo se pueden devolver las respuestas JSON al configurar una actividad mediante el editor basado en formularios.

1. Cree un diseño desde la biblioteca de diseño o dentro del flujo de trabajo basado en formularios. Si intenta hacerlo desde el flujo de trabajo del Compositor de experiencias visuales (VEC), solo podrá crear diseños HTML, que se engloban dentro de <div> para fines de seguimiento de clics.

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

   

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

       #* 
       * "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 utilice este diseño.

   1. Vaya a la página Actividades.
   2. Haga clic en Crear actividad > Recomendaciones.
   3. En Elegir Compositor de experiencias, seleccione Formulario y haga clic en Siguiente.
   4. En Ubicación, introduzca el texto: “Sample_Recs_Response”
   5. En Contenido predeterminado, haga clic en la flecha hacia abajo y, a continuación, haga clic en Añadir recomendación.
   6. Elija un tipo de página. Esto determina el filtrado inicial de la siguiente pantalla.
   7. Seleccione una tarjeta Criterios y, a continuación, haga clic en Siguiente.
   8. Seleccione el diseño que creó en el paso anterior y haga clic en Next.
   9. Complete el proceso de configuración.
   10. Haga clic en la flecha derecha situada junto a Inactivo y, a continuación, seleccione Activar.

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 tendrá que crear un modelo para admitir la configuración de criterios seleccionada. En función de una serie de factores, esto puede llevar cierto tiempo. Los resultados aparecen una vez creado el modelo.

   Por ejemplo:

   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

   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:

Sugerencias y trucos adicionales para objetos JSON

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: Crear diseños personalizados en Recommendations (3:20)

Este vídeo contiene la información siguiente:

• Crear un diseño personalizado
• Cómo hacer referencia a las variables de visualización en los diseños