Como adicionar Imagens Personalizadas a um iterável
Usa os campos do Handlebars que já envias para o Iterable para desenhar um nome, detalhes da reserva ou saldo numa imagem para cada utilizador.
Data da Primeira Publicação: Inserir os dados que guardas no Iterable nas imagens que os teus utilizadores vêem.
Os modelos do Iterable já recuperam dados do perfil e dos eventos com o Handlebars. O Sendtric Imagens Personalizadas vai um passo além e desenha esses valores numa imagem, com os teus tipos de letra e o teu layout: um gráfico ao estilo de um cartão de embarque com o itinerário do utilizador, ou um cartão de fidelidade com o saldo mais recente. A imagem é criada quando o e-mail é aberto.
O editor «Arrastar e Soltar» do Iterable tem uma opção de imagem dinâmica no bloco «Imagem», que carrega uma imagem a partir de um URL que contém Handlebars, e a própria documentação do Iterable indica serviços de imagens externos para criares essas imagens. O Sendtric é um desses serviços: crias a imagem e o URL dela inclui os teus campos do Iterable.
O que podes fazer com Imagens Personalizadas no Iterable
- Resumos da viagem e da reserva: cidade de partida, cidade de chegada e data de um evento de reserva, apresentadas num único gráfico de viagem. Vê textos personalizados nas imagens para veres exemplos.
- Marcos da aplicação: «Já completaste 30 treinos» ou «12 lições concluídas», a partir de um campo personalizado do perfil, num e-mail de felicitações.
- Extratos de fidelidade: pontos, nível e nome do membro numa imagem de cartão num e-mail mensal sobre a trajetória do cliente.
- Resumos de fim de ano: várias estatísticas do perfil do utilizador num único fundo, uma utilização comum para e-mails de resumo do ano.
| Característica da imagem | Free | Micro | Standard | Energia e Empresas |
|---|---|---|---|---|
| Camadas de texto personalizadas por imagem | 1 | 2 | 4 | 20 |
| As tuas próprias camadas de imagem (logótipo, Produto) | No | No | Yes | Yes |
| Fundo de cor sólida | No | No | Yes | Yes |
| Fundo transparente | No | No | No | Yes |
Como adicionar uma imagem personalizada ao Iterable
Passo 1: Cria a imagem
No Sendtric, vai a Personalização de Imagens e clica em Criar novo. Escolhe um fundo da biblioteca de multimédia, ou uma tela lisa ou transparente, e depois adiciona textos dinâmicos para cada valor. Ajusta o tamanho de cada caixa de texto para o valor mais longo que esperas, já que o texto quebra, mas não encolhe.
Passo 2: Introduz o campo «Iterable» para cada camada
Para cada camada de Texto Dinâmico, dá à variável um nome em minúsculas Nome da variável e coloca a expressão Iterable Handlebars em ESP merge tag, como {{firstName}}. Os campos são específicos do teu projeto, por isso usa os nomes exatos que vês no perfil de um utilizador, incluindo a notação com ponto para campos aninhados, por exemplo {{address.city}} se a tua cidade estiver dentro de um objeto de morada. Adiciona imagem alternativa Texto para utilizadores sem um valor.
Passo 3: Guarda e copia o código
Guarda a imagem. A caixa de código aparece depois da primeira vez que guardares, com cada variável adicionada ao URL da imagem e preenchida com a tua expressão Iterable. Escolhe o alinhamento e clica em «Copiar código».
Passo 4: Cola-o num bloco HTML
Abre o teu modelo Iterable e clica em Editar design. No editor de arrastar e largar, arrasta um bloco HTML da Conteúdo para o local certo, seleciona-o e cola o código no editor HTML. No editor WYSIWYG ou lado a lado, cola o código no código-fonte.
Passo 5: Visualização com utilizadores reais
Clica Pré-visualizar, introduz o e-mail de um utilizador (ou userId) e clica em Carregar dados do utilizador para veres a imagem com os valores dele. Experimenta com um utilizador com um nome comprido e outro com um campo vazio. Depois, envia uma prova para ti próprio, que preenche os campos com os dados do teu próprio perfil.
Usar o bloco «Imagem» em vez de HTML
Se preferires manter um bloco de imagem, copia apenas o endereço que está dentro do src código do Sendtric, arrasta um bloco «Imagem» , ativa a opção Imagem dinâmica e cola o endereço em URL dinâmica. Se o bloco parecer vazio enquanto estiveres a criar o design, verifica-o na Pré-visualização com os dados de um utilizador carregados.
Soluções alternativas no Iterable ou no Sendtric
Podes deixar que o texto imagem alternativa do Sendtric trate dos valores vazios, ou usar o auxiliar do Iterable dentro da tag, como {{defaultIfEmpty firstName 'there'}}. Usa aspas simples para o valor por defeito, porque a expressão fica dentro do endereço da imagem, entre aspas duplas. Se o Iterable fornecer um valor por defeito, o imagem alternativa do Sendtric nunca aparece.
Perguntas frequentes sobre o Iterable Imagens Personalizadas
Posso usar dados de eventos, e não só campos de perfil?
Sim. Qualquer valor do Handlebars que o Iterable consiga resolver ao renderizar o e-mail pode ser colocado numa camada, incluindo campos do evento que desencadeou uma jornada ou campanha. A documentação do Iterable indica que um campo de evento com o mesmo nome que um campo de perfil tem prioridade, e {{profile.fieldName}} lê explicitamente o valor do perfil.
E se um valor tiver espaços ou caracteres especiais?
Se um campo puder conter espaços ou caracteres como & ou #, envolve-o no urlEncode , por exemplo {{#urlEncode}}{{city}}{{/urlEncode}}, para que o endereço da imagem fique intacto. Depois, verifica o resultado na Pré-visualização.
O que é que os utilizadores vêem quando um campo está em branco?
Com o texto imagem alternativa definido, só se vê o imagem alternativa, por isso escreve-o como uma frase completa. Sem isso, toda a camada fica oculta, incluindo quaisquer palavras à volta da variável.
Posso atualizar a imagem depois de a enviar?
Sim. Ao guardares no Sendtric, a imagem em todos os e-mails enviados muda a partir da próxima vez que abrires o programa. As versões renderizadas ficam armazenadas em cache durante cerca de uma hora por combinação de valores, e ao guardares, isso é apagado.
As pré-visualizações contam para o meu vistas?
As pré-visualizações no editor do Sendtric não o fazem. Mas cada carregamento real da imagem faz-o, incluindo as provas do Iterable que abres e as aberturas repetidas.
Este guia aborda uma parte da Personalização de Email . Para cada Imagens Personalizadas opção e exemplo, consulta a página principal.
Mais guias do Iterable
- Temporizadores de contagem decrescente - Como adicionar temporizadores de contagem regressiva ao Iterable
- Temporizadores de contagem decrescente - Adicionar temporizadores dinâmicos no Iterable
- Ao vivo Sondagens - Como adicionar o Live Sondagens ao Iterable
- Imagens baseadas em regras - Como adicionar imagens baseadas em regras ao Iterable
- Clima Dinâmico - Como adicionar Clima Dinâmico a um iterável
- Alertas críticos - Como adicionar Alertas críticos a um iterável
- Contadores de prova social - Como adicionar Contadores de prova social a um iterável
Estás a usar uma plataforma diferente? Vê todos os Sendtric Integrações.
