Como enviar dados array com a Automação 360

Com dados array, você pode criar cartões de produtos e enviar e-mails dinâmicos personalizados, por exemplo, para informar um cliente sobre o status de seu pedido.

Como os modelos são dinâmicos, você pode incluir não apenas texto, imagens e links, mas também alterar muitos outros elementos usando variáveis. Esses modelos podem incluir vários cartões de produtos com base no número de produtos que um cliente solicita.

Vamos falar sobre como criar um evento usando uma matriz de dados e adicionar variáveis ​​ao seu modelo de email.

Criar um evento

Vá para a seção "Automações" > "Gerenciador de eventos". Clique em Adicionar novo evento e selecione "Evento personalizado".

Consulte também: Como criar um evento.

Ao lado do nome da variável que você usará para enviar sua matriz de dados, selecione o tipo. Adicione variáveis ​​de produto dentro da estrutura.

Para passar um link para uma imagem de produto, use uma variável do tipo "String".

Depois de adicionar todas as variáveis, clique em Adicionar. Parabéns, seu evento foi criado com sucesso. Copie a URL para a qual os dados serão enviados e o corpo da sua estrutura de dados. Você precisa enviá-lo ao seu desenvolvedor para poder enviar dados do seu site por meio de uma solicitação POST.

Adicionar uma matriz de dados ao seu modelo

Você pode inserir uma matriz de dados em seu modelo de e-mail usando o editor HTML ou o construtor de arrastar e soltar.do array de dados início e o fim, adicione |[ for item in products ]| e |[ endfor ]|.

Onde produtos é o nome da sua variável de matriz.

Para especificar uma variável de uma variável de estrutura, você precisa adicionar um item. Por exemplo, se você estiver passando um link para uma imagem de produto usando a img variável, será necessário adicionar uma variável no {{item.img}} formato.

Para exibir uma imagem, use a tag de exibição de imagem com o atributo source: <img scr="{{item.img}}">.

Para adicionar um link clicável, inclua a tag usada para criar links com o atributo de endereço: <a href="/{{item.url}}">.

Criando um cartão de produto

Ao criar um cartão de produto, recomendamos criar uma tabela em que cada elemento — uma imagem ou texto — seja uma célula, pois os estilos de imagem e os estilos de tabela se aplicam aqui.

Um exemplo de código com array de dados sem estilos:

<div>|[ for item in products ]|
<table>
<tbody>
<tr>
<td><img scr="{{item.img}}"></td>
<td>{{item.name}}</td>
<td>{{item .id}}</td>
<td><a href="/{{item.url}}">texto</a></td>
<td>{{item.price}}</td>
< /tr>
</tbody>
</table>
|[ endfor ]|</div>

Você pode adicionar estilos inline à sua tabela usando o style atributo para exibir as informações em seu cartão de produto com base em seu design. Você também pode criar e-mails dinâmicos usando nossos modelos pré-fabricados sem ter nenhum conhecimento de HTML. Leia mais: Como criar emails dinâmicos acionados por eventos usando modelos pré-fabricados da SendPulse.

Exibindo produtos em uma linha

Os produtos em um cartão são organizados em uma coluna verticalmente, o que significa que há 1 produto em uma linha. Para organizar os produtos em uma linha horizontalmente, adicione as seguintes linhas dentro da <tbody> tag

<table>
    <tbody><!--{% set columns = 4 %}--> <!--{% for item in products%} --> <!--{% if loop.first or loop.index0 is divisible by(columns) %}-->
       <tr><!--{% endif %}-->
            <td>{{ item. product_name }}:{{ item.product_price }}</td>
       <!--{% if loop.last or loop.index is divisible by(columns) %}--></tr>
    <!--{% endif %}--> <!--{% endfor %}--></tbody>
</table>

Onde:

Código Descrição
<!--{% set columns = n %}--> Configurando as n colunas
< ! --{% for item in products%}-->

<!--{% endfor %}--> Iterate through Fazendo um

loop em todos os produtos da matriz de
<!--{% if loop.first ou loop.index0 is divisible by(columns ) %}-->

<!--{% endif %}-->

Verificando o número de elementos do array para uma multiplicidade de n
<!--{% if loop.last ou loop.index for divisible by (colunas) %}-->

<!--{% endif %}-->

Adicionando uma matriz de dados usando o Editor de modelo

Alterne para o modo de edição de modelo. Abra o código-fonte do seu modelo.

Se você estiver criando um modelo usando nosso construtor de arrastar e soltar, você precisa adicionar o elemento "Texto" e clicar em <> no painel de edição do elemento para abrir o código-fonte.

Insira uma matriz com estilos de tabela.

Um exemplo de template com um layout de tabela adicionado ao seu código fonte:

Verifique o resultado

Para ver como é o seu template, crie uma campanha automatizada usando este template no elemento "Email", inicie o fluxo e envie um evento com seu endereço de e-mail e outros dados.

Leia mais sobre um exemplo real na seção "Teste o que você criou".

    Rate this article about "Como enviar dados array com a Automação 360"

    User Rating: 4 / 5

    Teste o SendPulse hoje gratuitamente