Caso de uso de Personalization: correo electrónico de abandono del carro de compras :headding-anchor:personalization-use-case-helper-functions
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:
- La función de cadena
upperCase
, para insertar el nombre del cliente en mayúsculas. Más información. - El asistente
each
, para enumerar los elementos que están en el carro de compras. Más información. - El ayudante
if
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:
- Un evento unitario. Más información.
- Un recorrido que comienza con un evento. Más información.
- Un mensaje de correo electrónico en el recorrido. Más información
- Cuerpo de un correo electrónico. Más información.
Siga estos pasos:
Paso 1: crear el evento inicial y el recorrido relacionado :headding-anchor:create-context
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.
-
Cree un evento cuyo esquema incluya la matriz
productListItems
. -
Defina todos los campos de esta matriz como campos de carga útil para este evento.
Obtenga más información acerca del tipo de datos del elemento de lista de productos en Documentación de Adobe Experience Platform.
-
Cree un recorrido que comience con este evento.
-
Agregue una actividad Correo electrónico al recorrido.
Paso 2: crear el correo electrónico :headding-anchor:configure-email
-
En la actividad Correo electrónico, haga clic en Editar contenido y luego en Enviar correo electrónico a Designer.
-
En la paleta izquierda de la página de inicio de Designer de correo electrónico, arrastre y suelte tres componentes de estructura en el cuerpo del mensaje.
-
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 :headding-anchor:uppercase-function
-
En la página de inicio de Designer de correo electrónico, haga clic en el componente HTML donde desea agregar el nombre del cliente.
-
En la barra de herramientas contextual, haga clic en Mostrar el código fuente.
-
En la ventana Editar HTML, agregue la función de cadena
upperCase
:-
En el menú de la izquierda, seleccione Funciones de ayuda.
-
Utilice el campo de búsqueda para encontrar "mayúsculas".
-
En los resultados de búsqueda, agregue la función
upperCase
. Para ello, haga clic en el signo más (+) junto a{%= upperCase(string) %}: string
.El editor de expresiones muestra esta expresión:
code language-handlebars {%= upperCase(string) %}
-
-
Elimine el marcador de posición "cadena" de la expresión.
-
Añada el token de nombre:
-
En el menú de la izquierda, seleccione Atributos de perfil.
-
Seleccione Persona > Nombre completo.
-
Agregue el token First name a la expresión.
El editor de expresiones muestra esta expresión:
code language-handlebars {%= 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.
-
-
Haga clic en Validar y luego en Guardar.
-
Guarde el mensaje.
Paso 4: Insertar la lista de elementos del carro de compras :headding-anchor:each-helper
-
Vuelva a abrir el contenido del mensaje.
-
En la página de inicio de Designer de correo electrónico, haga clic en el componente HTML donde desea enumerar el contenido del carro de compras.
-
En la barra de herramientas contextual, haga clic en Mostrar el código fuente.
-
En la ventana Editar HTML, agregue el asistente de
each
:-
En el menú de la izquierda, seleccione Funciones de ayuda.
-
Utilice el campo de búsqueda para encontrar "cada uno".
-
En los resultados de búsqueda, agregue el ayudante
each
.El editor de expresiones muestra esta expresión:
code language-handlebars {{#each someArray as |variable|}} {{/each}}
-
-
Agregue la matriz
productListItems
a la expresión:-
Elimine el marcador de posición "someArray" de la expresión.
-
En el menú de la izquierda, seleccione Atributos contextuales.
Los atributos contextuales solo están disponibles después de que se haya pasado el contexto de recorrido al mensaje.
-
Seleccione Journey Optimizer > Events > event_name y, a continuación, expanda el nodo productListItems.
En este ejemplo, event_name representa el nombre del evento.
-
Agregue el token Product a la expresión.
El editor de expresiones muestra esta expresión:
code language-handlebars {{#each context.journey.events.event_ID.productListItems.product as |variable|}} {{/each}}
En este ejemplo, event_ID representa el identificador del evento.
-
Modifique la expresión:
- Elimine la cadena ".product".
- Reemplace el marcador de posición "variable" por "producto".
Este ejemplo muestra la expresión modificada:
code language-handlebars {{#each context.journey.events.event_ID.productListItems as |product|}}
-
-
Pegue este código entre la etiqueta
{{#each}}
de apertura y la etiqueta{/each}}
de cierre:code language-html <table> <tbody> <tr> <td><b>#name</b></td> <td><b>#quantity</b></td> <td><b>$#priceTotal</b></td> </tr> </tbody> </table>
-
Añada los tokens de personalización para el nombre del artículo, la cantidad y el precio:
- Elimine el marcador de posición "#name" de la tabla del HTML.
- En los resultados de búsqueda anteriores, agregue el token Name a la expresión.
Repita estos pasos dos veces:
- Reemplace el marcador de posición "#quantity" por el token Quantity.
- Reemplace el marcador de posición "#priceTotal" por el token Precio total.
Este ejemplo muestra la expresión modificada:
code language-handlebars {{#each context.journey.events.event_ID.productListItems as |product|}} <table> <tbody> <tr> <td><b>{{product.name}}</b></td> <td><b>{{product.quantity}}</b></td> <td><b>${{product.priceTotal}}</b></td> </tr> </tbody> </table> {{/each}}
-
Haga clic en Validar y luego en Guardar.
Paso 5: Insertar una nota específica del producto :headding-anchor:if-helper
-
En la página de inicio de Designer de correo electrónico, haga clic en el componente HTML en el que desea insertar la nota.
-
En la barra de herramientas contextual, haga clic en Mostrar el código fuente.
-
En la ventana Editar HTML, agregue el asistente de
if
:-
En el menú de la izquierda, seleccione Funciones de ayuda.
-
Utilice el campo de búsqueda para encontrar "if".
-
En los resultados de búsqueda, agregue el ayudante
if
.El editor de expresiones muestra esta expresión:
code language-handlebars {%#if condition1%} render_1 {%else if condition2%} render_2 {%else%} default_render {%/if%}
-
-
Elimine esta condición de la expresión:
code language-handlebars {%else if condition2%} render_2
Este ejemplo muestra la expresión modificada:
code language-handlebars {%#if condition1%} render_1 {%else%} default_render {%/if%}
-
Añada el token del nombre del producto a la condición:
-
Elimine el marcador de posición "condition1" de la expresión.
-
En el menú de la izquierda, seleccione Atributos contextuales.
-
Seleccione Journey Orchestration > Eventos > nombre_evento y, a continuación, expanda el nodo productListItems.
En este ejemplo, event_name representa el nombre del evento.
-
Agregue el token Name a la expresión.
El editor de expresiones muestra esta expresión:
code language-handlebars {%#if context.journey.events.`event_ID`.productListItems.name%} render_1 {%else%} default_render {%/if%}
-
-
Modifique la expresión:
-
En el Editor de expresiones, especifique el nombre del producto después del token
name
.Use esta sintaxis, donde product_name representa el nombre de su producto:
code language-javascript = "product_name"
En este ejemplo, el nombre del producto es "Juno Jacket":
code language-handlebars {%#if context.journey.events.`event_ID`.productListItems.name = "Juno Jacket" %} render_1 {%else%} default_render {%/if%}
-
Reemplace el marcador de posición "render_1" por el texto de la nota.
Por ejemplo:
code language-handlebars {%#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%}
-
Elimine el marcador de posición "default_render" de la expresión.
-
-
Haga clic en Validar y luego en Guardar.
-
Guarde el mensaje.
Paso 6: Prueba y publicación del recorrido :headding-anchor:test-and-publish
-
Active la opción Test y, a continuación, haga clic en Déclencheur de un evento.
-
En la ventana Configuración de eventos, escriba 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:
-
Compruebe que no haya ningún error y, a continuación, publique el recorrido.
Temas relacionados :headding-anchor:related-topics
Funciones de Handlebars :headding-anchor:handlebars
Casos de uso :headding-anchor:use-case
Vídeo explicativo :headding-anchor:video
Aprenda a utilizar las funciones de ayuda.