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 va dirigido a los clientes que han dejado artículos en el carro de compras, pero que aún no han finalizado su compra.

Utilizará estos tipos de funciones de ayuda:

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

➡️ Aprenda a utilizar las funciones de ayuda en este vídeo

Antes de empezar, asegúrese de saber cómo configurar estos elementos:

Siga estos pasos:

  1. Creación del evento inicial y del recorrido.
  2. Crear un mensaje de correo electrónico.
  3. Introduzca el nombre del cliente en mayúsculas.
  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: crear el evento inicial y el recorrido relacionado

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

  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 de elemento de lista de productos en Documentación de Adobe Experience Platform.

  3. Cree un recorrido que comience con este evento.

  4. Añadir un Correo electrónico actividad al recorrido.

Paso 2: crear el correo electrónico

  1. En el Correo electrónico actividad, haga clic en Editar contenido, luego haga clic en Diseñador de correo electrónico.

  2. En la paleta izquierda de la página de inicio 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 nuevo componente de estructura.

Paso 3: Insertar 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 donde desea agregar el nombre del cliente.

  2. En la barra de herramientas contextual, haga clic en Mostrar el código fuente.

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

    1. En el menú izquierdo, seleccione Funciones de ayuda.

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

    3. En los resultados de búsqueda, agregue upperCase función. Para ello, haga clic en el signo más (+) 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 el menú izquierdo, seleccione Atributos de perfil.

    2. Seleccionar Persona > Nombre completo.

    3. Añada el Nombre token para la expresión.

      El editor de expresiones muestra esta expresión:

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

      Obtenga más información acerca del tipo de datos de nombre de persona en Documentación de Adobe Experience Platform.

  6. Clic Validate, luego haga clic en Guardar.

  7. Guarde el mensaje.

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

  1. Vuelva a abrir el contenido del mensaje.

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

  3. En la barra de herramientas contextual, haga clic en Mostrar el código fuente.

  4. En el Editar HTML , añada la each ayudante:

    1. En el menú izquierdo, seleccione Funciones de ayuda.

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

    3. En los resultados de búsqueda, agregue each ayudante.

      El editor de expresiones muestra esta expresión:

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

  5. Añada el productListItems matriz a la expresión:

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

    2. En el menú izquierdo, seleccione Atributos contextuales.

      Atributos contextuales solo están disponibles después de que el contexto de recorrido se haya pasado al mensaje.

    3. Seleccionar Journey Optimizer > Eventos > event_name y, a continuación, expanda productListItems nodo.

      En este ejemplo, event_name representa el nombre del evento.

    4. Añada el Product token para 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 "producto".

      Este ejemplo muestra la expresión modificada:

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

  6. Pegue este código entre las etiquetas de apertura {{#each}} y la de cierre {/each}} etiqueta:

    <table>
   <tbody>
      <tr>
         <td><b>#name</b></td>
         <td><b>#quantity</b></td>
         <td><b>$#priceTotal</b></td>
      </tr>
   </tbody>
</table>

  7. Añada 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 del HTML.
    2. A partir de los resultados de búsqueda anteriores, añada el Nombre token para la expresión.

    Repita estos pasos dos veces:

    • Reemplace el marcador de posición "#quantity" por la etiqueta Cantidad token.
    • Reemplace el marcador de posición "#priceTotal" por la etiqueta Precio total 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. Clic Validate, luego haga clic en Guardar.

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 Mostrar el código fuente.

  3. En el Editar HTML , añada la if ayudante:

    1. En el menú izquierdo, seleccione Funciones de ayuda.

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

    3. En los resultados de búsqueda, agregue if ayudante.

      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. Añada el token del nombre del producto a la condición:

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

    2. En el menú izquierdo, seleccione Atributos contextuales.

    3. Seleccionar Journey Orchestration > Eventos > event_name y, a continuación, expanda productListItems nodo.

      En este ejemplo, event_name representa el nombre del evento.

    4. Añada el Nombre token para 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 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.

      Por 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. Clic Validate, luego haga clic en Guardar.

  8. Guarde el mensaje.

Paso 6: Prueba y publicación del recorrido

  1. Encienda el Prueba y haga clic en Déclencheur de un evento.

  2. En el Configuración de eventos , introduzca los valores de entrada y haga clic en Enviar.

    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:

  3. Compruebe que no haya ningún error y, a continuación, publique el recorrido.

Funciones de Handlebars

Casos de uso

Vídeo explicativo

Aprenda a utilizar las funciones de ayuda.

En esta página