Configure product listings in transactional emails

Bienvenido a este video sobre el uso de bucles en un mensaje transaccional. Primero déjame establecer un contexto, entender cuándo se usa esta función. Entonces, cada vez que necesite mostrar una lista dinámica de elementos en su correo electrónico, usaría esta función. Entonces, un buen ejemplo es el caso de uso de abandono de carrito. Entonces, ya sabes, un consumidor navega por un sitio web, pone algunos artículos en el carrito y luego abandona el carrito. En ese momento se debe enviar un mensaje, y el contenido del mensaje debe contener El contenido exacto que el usuario navegó. Y ese contenido es dinámico en el sentido de que Este contenido es diferente de consumidor a consumidor.

Entonces, el primer paso aquí es entrar en los planes de marketing, mensaje transaccional, configuración de eventos. Y lo que haremos es crear un nuevo evento, así que en este caso ya he creado uno.

Y lo que es interesante aquí, obviamente es como siempre. declararíamos todos los campos de estos eventos. Pero también hay una sección llamada colecciones, y esto es lo que será más interesante para esta función.

Entonces, aquí creé dos colecciones, uno llamado Producto y otro llamado Seguro. Si entramos en Producto, lo que hice Es que creé múltiples atributos dentro de esta colección. Entonces, un producto tiene un nombre de producto que es un tipo de texto, un producto tiene un precio de producto, un número flotante, y así sucesivamente. Entonces tengo imagen del producto, URL del producto. Obviamente, podría agregar tantos atributos como desee dependiendo de lo que hay en tu colección.

E hice lo mismo con el seguro. Entonces esta es otra colección. De modo que puede crear tantas colecciones como necesite. Y si vamos dentro del seguro, lo mismo que tienes múltiples atributos: título, precio e imagen, etc.

Una vez que haya declarado todos los atributos, puedes hacer clic en la vista previa de la API para ver una vista previa de la carga útil de este evento.

Entonces, cuando miras la estructura de la carga útil, puedes ver la primera colección aquí, cual es el cobro del seguro.

Y ves los diferentes atributos allí, y la segunda colección aquí cual es la colección de productos.

Esto significa que cuando un sitio web nos llamará, enviarán una carga útil y enviarán la información del producto para todos los productos que fueron abandonados en el carrito.

Así que ahora estamos listos para publicar este evento. Entonces, al publicar este evento, ¿qué pasará? es que habrá una plantilla de mensaje transaccional eso será creado.

The publication is now completed, so now let’s go back into the template that has been generated. So for that I go inside Transactional message, and so the publication just generated this Transactional email template, and here I will go and edit the content.

So what I prepared here is a content for retargeting email, and this content is static. What it means is that right now it’s always this Striped Scarf that will be displayed. So now I want to put a collection here, I want to create a loop to display this content in a dynamic fashion. So to do that I will select the section that I want to turn into a loop, and then I have this, Create a loop, button. So I will click on that, and now you see, on the left-hand side of the screen, we start to have some settings regarding the loop.

The first setting you have, is whether the loop is in a row mode or with columns, right now, here we would just go with the row, and then I will show you also the column as a second example.

So what I will do here, first thing, is select a data collection. So go inside Context, the Event context, and here I can find back my two collections, so Product and Insurance. So let’s select Product here, then I can select first item on the loop, here I would start from the first one, and then I can also select the maximum number of items, so here I could put, you know, 99 for example, a very high amount, so here, if the consumer has only three products evident, only those three will be displayed, this is just the maximum number.

And the last setting is the fallback, so in case there is no products at all, watch what happen. So, I switch to the fallback, here it’s empty, you can build your fallback as usual with some content, so maybe you want to put a static image, or maybe you just want to put some text, and say for example, you don’t have any products in your cart.

Okay, so this is a very quick example.

So now we can go back to the loop, here I would click back on the loop, and I would show the content of the loop.

So now, the next step, is to actually turn this content into a dynamic content.

So what I want here, is this section, I want to repeat this section as many times as I have products in my collection.

So to do that we first click on the image, here on the right-hand side I would enable personalization.

And then I would edit the image here.

Here I would replace the static image by the personalization field that is coming from the event, so here I would go inside the Event Context, Product, and I would take the productimage.

Okay, then I would do the same with the label of the product, so here it’s a text, so I would just insert a personalization field, so let’s go back into Product, Event Context, Product, and this time I would take the productname.

Okay, same thing with the price, it’s a string, so just remove the price and then replace by the personalization field, and I would select productprice.

And the last thing I need to do is the link, so here this whole thing is a link, so I would insert a link, and this time same thing, I would go and search for the personalization field, so Product, and here I have the productUrl.

But when it’s a URL I need to be careful, so for security reasons, if we want to have this link tracked, what we need to do, is to set the domain name in a static way, and just the rest of the link could be dynamic. So here I have like the domain name set in static, and I just put inside my variables the rest of the link.

So this is a best practice.

At this point my loop is set, it means that I will be able to receive an email that would contain as many lines as I have products in my cart, and the image, the name, the price, the link, would be dynamic.

So I will show you a second example, just to show another capability. So here I would select this structure that has two columns, and I will create a loop, and this time I would select the column option. So you see, when you select the column option, the second column is removed, and the principle remains the same, so what you do is you set the data collection, so here for example I would select the Insurance, I can display only two items here because I only have two columns, that’s why this is grayed out, and then I would do the same thing, so here, the image, I don’t want it to be static, I want it to be dynamic, so I would do the same thing as before, so I would go and enable personalization, then find back the variables, so you get the idea, I’m not going to detail that out, but the idea here is to show that you can build vertical loops or horizontal loops.

And what will happen in this loop, is that you would get two insurance displayed next to each other, and the content would be dynamic. Okay, so the content is set, so I would just save this, and the last step here is to publish the transactional template.

Okay, now the last step is to test our transactional message to see if the content loop is correctly displayed.

So to do that, basically I’m using a tool called Postman. That alludes to called the transactional message API and what I did is I copied this into payload and then I started to fill in some information. So remember we have two collections, one called insurance, so that is this one collection two with some insurance. So I fill out some information, I put some titles, some price, some images, and I did that for two insurances. And then we have like a second collection that is the product collection. So that collection starts here, and so you see here I put some product names, some product price and some images, and so on.

So once you have a simple payload like this you can post that. So we just click on send, this is actually going to call the transactional message API and within a few seconds I should receive an email.

So lets check for that, so here is the email, so when I open it so you see now my call actually contains the following products and you see the price changed, the images changed, so this is really the data that was in the payload and this data is very specific to me. A different consumer would get a different content and you see the second collection here built on two columns so the insurances, so here also the images are dynamic, the links are dynamic. So if I click here, this will redirect to that particular insurance and this link is also correct like any email. So this is really like the final goal of this feature is to be able to send such email.

Thank you for watching this, this is the end.