Caso de uso de personalización: correo electrónico de abandono del carro de compras

En este ejemplo, personalizará el cuerpo de un mensaje de correo electrónico. Este mensaje está dirigido a los clientes que han dejado artículos en el carro de compras, pero no han completado su compra.

Utilizará estos tipos de funciones de ayuda:

  • La variable upperCase función de cadena, para insertar el nombre del cliente en mayúsculas. Más información.
  • La variable each ayuda, para enumerar los elementos que están en el carro de compras. Más información.
  • La variable if para insertar una nota específica del producto si el producto relacionado está en el carro de compras. Más información.

Antes de comenzar, asegúrese de que sabe cómo configurar estos elementos:

Siga estos pasos:

  1. Creación de un mensaje de correo electrónico.
  2. Inserte el nombre del cliente en mayúsculas.
  3. Crear el evento inicial y el recorrido.
  4. Añadir el contenido del carro de compras al correo electrónico.
  5. Insertar una nota específica del producto.
  6. Prueba y publicación del recorrido.

Paso 1: Creación del correo electrónico

  1. Cree o modifique un mensaje de correo electrónico y, a continuación, haga clic en Email Designer.

  2. En la paleta izquierda de la página principal del Diseñador de correo electrónico, arrastre y suelte tres componentes de estructura en el cuerpo del mensaje.

  3. Arrastre y suelte un componente de contenido de HTML en cada componente de estructura nuevo.

Paso 2: Inserte el nombre del cliente en mayúsculas

  1. En la página de inicio del Diseñador de correo electrónico, haga clic en el componente HTML en el que desea agregar el nombre del cliente.

  2. En la barra de herramientas contextual, haga clic en Show the source code.

  3. En el Edit HTML , añada la variable upperCase función de cadena:

    1. En la lista, seleccione Helper functions.

    2. Utilice el campo de búsqueda para buscar "mayúsculas".

    3. En los resultados de la búsqueda, añada la variable upperCase función. Para ello, haga clic en el signo más (+) situado junto a {%= upperCase(string) %}: string.

      El editor de expresiones muestra esta expresión:

      {%= upperCase(string) %}
      

  4. Elimine el marcador de posición "cadena" de la expresión.

  5. Añada el token de nombre:

    1. En la lista, seleccione Profile.

    2. Seleccione Profile > Person > Full name.

    3. Agregue la variable First name token a la expresión.

      El editor de expresiones muestra esta expresión:

      {%= upperCase(profile.person.name.firstName) %}
      

      Obtenga más información sobre el tipo de datos de nombre de persona Documentación de Adobe Experience Platform.

  6. Haga clic en Validate, luego en Save.

  7. Guarde el mensaje.

Paso 3: Crear el evento inicial y el recorrido relacionado

El contenido del carro de compras es información contextual del recorrido. Por lo tanto, debe añadir un evento inicial y el correo electrónico a un recorrido para poder añadir al correo electrónico información específica del carro de compras.

  1. Cree un evento cuyo esquema incluya la variable productListItems matriz.

  2. Defina todos los campos de esta matriz como campos de carga útil para este evento.

    Obtenga más información sobre el tipo de datos del elemento de la lista de productos Documentación de Adobe Experience Platform.

  3. Cree un recorrido que comience con este evento.

  4. Añada el mensaje al recorrido.

  5. Finalice el recorrido con una actividad final.

    Como aún no ha publicado el mensaje, no puede probar ni publicar el recorrido.

  6. Haga clic en OK.

    Un mensaje le informa de que el contexto del recorrido se ha pasado al mensaje.

Paso 4: Inserte la lista de elementos del carro de compras

  1. Vuelva a abrir el mensaje.

  2. En la página de inicio del Diseñador de correo electrónico, haga clic en el componente HTML en el que desea enumerar el contenido del carro de compras.

  3. En la barra de herramientas contextual, haga clic en Show the source code.

  4. En el Edit HTML , añada la variable each ayuda:

    1. En la lista, seleccione Helper functions.

    2. Utilice el campo de búsqueda para encontrar "cada uno".

    3. En los resultados de la búsqueda, añada la variable each ayuda.

      El editor de expresiones muestra esta expresión:

      {{#each someArray as |variable|}} {{/each}}
      

  5. Agregue la variable productListItems a la expresión:

    1. Elimine el marcador de posición "someArray" de la expresión.

    2. En la lista, seleccione Context.

      La variable Context solo está disponible una vez que el contexto de recorrido se ha pasado al mensaje.

    3. Select Journey Orchestration > Events > event_name y, a continuación, expanda la variable productListItems nodo .

      En este ejemplo, event_name representa el nombre del evento.

    4. Agregue la variable Product token a la expresión.

      El editor de expresiones muestra esta expresión:

      {{#each context.journey.events.event_ID.productListItems.product as |variable|}} {{/each}}
      

      En este ejemplo, event_ID representa el ID del evento.

    5. Modifique la expresión:

      1. Elimine la cadena ".product".
      2. Reemplace el marcador de posición "variable" por "product".

      Este ejemplo muestra la expresión modificada:

      {{#each context.journey.events.event_ID.productListItems as |product|}}
      
  6. Pegue este código entre la etiqueta de apertura {{#each}} y la {/each}} etiqueta:

    <table>
       <tbody>
          <tr>
             <td><b>#name</b></td>
             <td><b>#quantity</b></td>
             <td><b>$#priceTotal</b></td>
          </tr>
       </tbody>
    </table>
    
  7. Agregue los tokens de personalización para el nombre del artículo, la cantidad y el precio:

    1. Elimine el marcador de posición "#name" de la tabla HTML.
    2. A partir de los resultados de búsqueda anteriores, añada la variable Name token a la expresión.

    Repita estos pasos dos veces:

    • Sustituya el marcador de posición "#quantity" por el Quantity token.
    • Sustituya el marcador de posición "#priceTotal" por el Total price token.

    Este ejemplo muestra la expresión modificada:

    {{#each context.journey.events.event_ID.productListItems as |product|}}
       <table>
          <tbody>
             <tr>
                <td><b>{{context.journey.events.event_ID.productListItems.name}}</b></td>
                <td><b>{{context.journey.events.event_ID.productListItems.quantity}}</b></td>
                <td><b>${{context.journey.events.event_ID.productListItems.priceTotal}}</b></td>
             </tr>
          </tbody>
       </table>
    {{/each}}
    
  8. Haga clic en Validate, luego en Save.

Paso 5: Insertar una nota específica del producto

  1. En la página de inicio del Diseñador de correo electrónico, haga clic en el componente HTML en el que desea insertar la nota.

  2. En la barra de herramientas contextual, haga clic en Show the source code.

  3. En el Edit HTML , añada la variable if ayuda:

    1. En la lista, seleccione Helper functions.

    2. Utilice el campo de búsqueda para encontrar "if".

    3. En los resultados de la búsqueda, añada la variable if ayuda.

      El editor de expresiones muestra esta expresión:

      {%#if condition1%} render_1
         {%else if condition2%} render_2
         {%else%} default_render
      {%/if%}
      

  4. Elimine esta condición de la expresión:

    {%else if condition2%} render_2
    

    Este ejemplo muestra la expresión modificada:

    {%#if condition1%} render_1
       {%else%} default_render
    {%/if%}
    
  5. Agregue el token del nombre del producto a la condición:

    1. Elimine el marcador de posición "condición1" de la expresión.

    2. En la lista, seleccione Context.

    3. Select Journey Orchestration > Events > event_name y, a continuación, expanda la variable productListItems nodo .

      En este ejemplo, event_name representa el nombre del evento.

    4. Agregue la variable Name token a la expresión.

      El editor de expresiones muestra esta expresión:

      {%#if context.journey.events.`event_ID`.productListItems.name%}
         render_1
         {%else%} default_render
      {%/if%}
      

  6. Modifique la expresión:

    1. En el editor de expresiones, especifique el nombre del producto después de la variable name token.

      Utilice esta sintaxis, donde product_name representa el nombre del producto:

      = "product_name"
      

      En este ejemplo, el nombre del producto es "Juno Jacket":

      {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %}
         render_1
         {%else%} default_render
      {%/if%}
      
    2. Reemplace el marcador de posición "render_1" por el texto de la nota.

      Ejemplo:

      {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %}
         Due to longer than usual lead times on the Juno Jacket, please expect item to ship two weeks after purchase.
         {%else%} default_render
      {%/if%}
      
    3. Elimine el marcador de posición "default_render" de la expresión.

  7. Haga clic en Validate, luego en Save.

  8. Guarde y publique el mensaje.

Paso 6: Prueba y publicación del recorrido

  1. Abra el recorrido. Si el recorrido ya está abierto, actualice la página.

  2. Active la Test alterne y haga clic en Trigger an event.

    Solo puede activar el modo de prueba después de publicar el mensaje.

  3. En el Event configuration , introduzca los valores de entrada y, a continuación, haga clic en Send.

    El modo de prueba solo funciona con perfiles de prueba.

    El correo electrónico se envía a la dirección del perfil de prueba.

    En este ejemplo, el correo electrónico contiene la nota sobre la Chaqueta Juno porque este producto está en el carro de compras:

  4. Compruebe que no haya error y, a continuación, publique el recorrido.

Temas relacionados

Funciones de Handlebars

Casos de uso

Tutorial en vídeo

En esta página