Personalização e conteúdo dinâmico programável

O Xtremepush usa o Twig, um motor de templates, para conteúdo dinâmico. Para mais informações, você pode consultar a documentação oficial da Twig. Conteúdo dinâmico pode ser usado com a maioria dos canais (e-mail, SMS, push móvel e web, mensagens no local/no app e caixa de entrada). Detalhes e exemplos de algumas das funções e capacidades programáticas mais comumente usadas são apresentados nas seções a seguir.

Personalização

Conteúdo personalizado pode ser gerado quando sua campanha for enviada. Os dados para personalização podem ser retirados de várias fontes, que incluem, mas não se limitam a:

• Atributos armazenados do perfil do usuário

• Dados de eventos em tempo real

• Dados disponibilizados por meio de feeds. Veja nosso guia dedicado para saber mais sobre esse recurso.

Atributos do perfil

Atributos do perfil que foram criados manualmente, marcados na plataforma a partir de um aplicativo (veja detalhes para Android e iOS) ou site, ou sincronizados com a plataforma via API. Uma vez que um atributo está no sistema, ele pode ser usado para personalização.

Atributos podem ser datas e outros valores, como pontuações de propensão, usadas em segmentação ou decisões de conteúdo em modelos, ou podem ser cadeias como o primeiro nome do cliente que podem ser usadas diretamente na personalização.

A sintaxe usa dois colchetes curvos que envolvem o nome do atributo:

{{user_attribute_name}}

No construtor de campanhas, clique para buscar atributos disponíveis e adicione-os no formato mostrado neste exemplo.

Por exemplo, uma mensagem como:

Oi Sam, seu saldo é de €20. Toque hoje para recarregar!

Pode ser criado usando os seguintes atributos para personalização:

Hi {{user_first_name}}, your balance is €{{user_balance}}. Tap today to top-up!

Renderização de um valor a partir de um atributo de array

Para atributos do tipo array, onde você passa os dados como um array JSON (ex: ["value1","value2","value3], você pode renderizar os valores indicando a posição do item dentro do array, usando a seguinte sintaxe (começar a contar a partir de 0, não a partir de 1):

{{attribute_name[0]}}
//To render the first item in the array

Renderização de um valor a partir de um atributo de objeto array

Para atributos do tipo array, onde você passa os dados como um objeto JSON (ex: { "order_total": "12.34", "item_count": 3, "items": [{...}, {...}, ...] }, você pode renderizar os valores dos elementos aninhados usando a seguinte sintaxe:

{{attribute_name.order_total}}

//This would render the value `12.34`

Indicando um valor de retenção

É boa prática, se possível, usar um valor de reserva caso o atributo não exista para o usuário.

Use a seguinte sintaxe como valor de reserva:

{{ user_attribute_name | default('Alternative') }}

Por exemplo:

{{ user_first_name | default('Hi') }}, check out our new feature!

Se o atributo existir para o usuário, a seguinte mensagem será exibida:

Laura, confira nosso novo recurso!

Caso contrário, o valor de reserva será exibido:

Oi, confira nosso novo recurso!

O atributo também pode ser combinado com algum texto, incluindo um valor de recurso:

{{ 'Hello ' ~ first_name | default('there') }}

Se o atributo existir para o usuário, a seguinte mensagem será exibida:

Olá Doona

Caso contrário, o valor de reserva será exibido:

Olá

Atributos do sistema de renderização

Existem alguns atributos reservados do sistema que também podem ser usados para personalizar a comunicação com seus clientes. Para renderizar essas imagens, você precisa incluir user. antes do nome do atributo.

Alguns exemplos comuns:

//To render user ID
{{user.id}}

//To render email
{{user.email}}

//To render mobile number
{{user.mobile_number}}

Propriedades do evento

Propriedades que são passadas com um evento podem ser usadas no conteúdo de mensagens usando uma sintaxe semelhante aos atributos do usuário.

Para acessar o valor de uma propriedade de nível superior, podem ser usadas as seguintes opções:

{{event.property}}

E para dados aninhados mais profundamente no JSON, a seguinte sintaxe pode ser usada:

{{event.property.nested_property}}

Então, dado um evento com dados de ordem relacionados que se parecem com isto:

xtremepush("event", "order_complete", {
  "order_id": "0001",
  "order_total": {
    "value": 100,
    "currency": "£"
  }
});

A seguinte mensagem, incluindo sintaxe dinâmica

Thank you for your order.
Reference: {{event.order_id}}.

The total of your purchase was: {{event.order_total.currency}}{{event.order_total.value}}

O que resultaria:

Thank you for your order.
Reference: 0001.

The total of your purchase was: £100

URLs dinâmicas

Você pode gerar URLs dinâmicas para usar atributos de perfil como parâmetros de URL para links ou imagens. Ao fazer isso, é importante que eles sejam codificados por URL para garantir que os navegadores possam interpretar corretamente a URL.

Se os valores armazenados nos atributos do perfil ainda não estiverem codificados, um filtro pode ser usado para garantir que o Xtremepush faça isso antes de enviar a mensagem.

O filtro é aplicado por meio da adição | url_encode e um exemplo de como isso pode ser usado pode ser visto abaixo.

https://www.yoursite.com/unsubscribe/{{user.email_token | url_encode}}

Trechos

Por favor, veja nosso guia de trechos para mais detalhes.

Funções utilitárias

Capitalização

Essa função pode ser usada em combinação com conteúdo variável para garantir que apenas o caractere inicial esteja em maiúscula.

{{name | capitalize}}

Data

Essa função gera a data atual.

{{ "now" | date() }}
// To render  (Month DD, YYY HH:MM)

Resultado: 26 de janeiro de 2021, 16:22

Formatos específicos também podem ser usados:

{{ "now" | date("l, F jS") }}
// To render day of the week, Month and calendar day

Isso vai render o dia da semana, o mês e o dia, assim: terça-feira, 26 de janeiro

Os elementos usados dentro da função de data também podem ser usados individualmente:

{{ "now"|date("F") }}
// To render the month

Resultado: janeiro

{{ "now"|date("d/m/Y") }}
// To render date in a numeric format (dd/mm/YYYY)

Resultado: 26/01/2019

Novamente, os elementos usados dentro da função data também podem ser usados individualmente:

{{ "now"|date("Y") }}
// To render the year in a numeric format (YYYY)

Resultado: 2022

Leia a documentação da Twig sobre a função de datas para opções adicionais.

Número do formato

Essa função permite mudar o formato de um número. Entre muitas outras coisas, pode ser útil arredondar números. Por exemplo:

{{ PointsBalance | number_format(2) }}
//Display only 2 decimal places

Documentação completa para formatação numérica.

Fatiamento Básico

Essa função permite cortar conteúdo dinâmico curto ou pegar uma substring dele.

Um caso de uso comum é truncar texto dinâmico, por exemplo, se você quiser cortar um texto com 50 caracteres e adicionar pontos de saída, pode usar:

{{text|slice(0,50)}}...

Se o conteúdo dinâmico fosse:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut dobraz ex ea commodo consequente.

Ela se tornaria:
Lorem ipsum dolor sit amet, consectetur adidat...

Fatiamento Avançado

Inclua striptags na função para remover tags HTML incluídas no seu conteúdo:

{{text|striptags|slice(0,20)}}

Se seu texto dinâmico provavelmente varia muito em comprimento, você também pode usar a função de comprimento para concatenar o texto para uma fração do seu comprimento e evitar concatenação excessiva ou subjacente.

{{text|striptags|slice(0,text|length/2)}}
// To slice the text in length by half

Valores necessários

Essa função impede que uma mensagem seja enviada caso falte um valor importante. Um caso de uso comum é para mensagens transacionais que incluem uma URL ou código único.

{{ verification_url | required }}

Quando um valor exigido está faltando, a mensagem não será enviada, caso em que ela será exibida no registro de notificações com o erro 'Os valores necessários não estão definidos'.

Enunciados condicionais

Sentenças condicionais (se / caso contrário) vão pedir ao sistema que tome uma ação se algo for verdadeiro; Caso contrário, faça outra coisa. A versão mais simples incluiria apenas uma instrução if e um endif para indicar o fim da sentença condicional. Em alguns casos, a informação adicionada dinamicamente nem sempre está presente, então isso pode ser tratado com a seguinte sintaxe:

{% if entry_brand_location %}, {{entry_brand_location}} {% endif %}
// If that information exists, render it, otherwise don't render anything

Dentro da mesma afirmação condicional, podemos incluir alternativas ( usando if / else). Por exemplo, para fazer variações regionais em um único e-mail se você tiver uma região ou atributo geográfico apropriado para seus usuários:

{% if region == 'US' %} 
20 W 34th St,
New York, NY 10001,
United States
{% elseif region == 'UK' %} 
Westminster, 
London SW1A 0AA,
United Kingdom
{% else %} 
O'Connell Street Lower,
North City, 
Dublin 1, D01 TX31
Ireland
{% endif %}
// If the region equals "US" then render the US address, if it equals UK, render the London address and otherwise render Ireland's address.

Comparações de datas

Um caso de uso muito útil para sentenças condicionais é o uso do valor dos atributos baseados em data para mostrar conteúdo específico.

No exemplo abaixo, diferentes ofertas são exibidas dependendo da data em relação ao valor armazenado no deposit_date atributo.

{% if date(deposit_date) == date("-1 day 00:00") %}

Enhanced offer text

{% if date(deposit_date) == date("+2 day 00:00") %}

Regular offer text

{% else %} 

Final offer text

{% endif %}

Também é possível realizar avaliações em datas específicas. O exemplo abaixo compara com mais de uma data na mesma linha:

{% if registration_date == "2021-05-07T00:00:00Z" or registration_date == "2021-05-08T00:00:00Z" or registration_date == "2021-05-09T00:00:00Z"%}

Enhanced offer text

{% else %} 

Standard offer

{% endif %}

Instruções condicionais avançadas

Outro caso de uso para instruções condicionais é abordar inconsistências em links gerados dinamicamente. Alguns links podem terminar em ? e outros não, mas queremos poder adicionar rastreamento UTM a todos os links. Podemos lidar com isso do lado do template usando a seguinte sintaxe:

{% if '?' in entry.page_url %}<a href="{{entry.page_url}}&utm_source=xp&utm_medium=email&utm_campaign=example.campaign" style="display:block;text-decoration:none;">{% else %}</a><a href="{{entry.page_urll}}?utm_source=xp&utm_medium=email&utm_campaign=blah" style="display:block;text-decoration:none;">{% endif %}

Loops

Os ciclos For podem ser úteis para gerar uma seção de conteúdo que possui vários elementos repetitivos semelhantes, mas cujo número e conteúdo variam para os usuários.

Um caso de uso comum para esse tipo de função é um e-mail de recomendação que é publicado diariamente ou semanalmente e que está vinculado a um sistema de recomendação para produtos, artigos ou algum outro tipo de conteúdo personalizado. Esses e-mails normalmente terão um número variável de recomendações por usuário por dia, com várias variações de conteúdo, e o ciclo for pode ser usado para construir a parte personalizada de recomendações do e-mail para cada usuário. Este exemplo é de uma campanha template acionada pela API:

<p><!-- {% for entry in jobs %} --></p>
<hr noshade="noshade" color="#686868" width="100%" size="1" style="padding:0;margin:8px 0 8px 0;border:none;width:100%;height:1px;color:#686868;background-color:#686868">
<table border="0" cellspacing="5" cellpadding="0" align="center" bgcolor="#ffffff"><tbody><tr><td width="45" rowspan="2" align="left" valign="centre"> <a href="{{entry.job.job_page_url}}" style="display:block;text-decoration:none;" data-pos="IC4AP9-t"> <img src="{{entry.brand.logo}}" alt="{{entry.brand.name}} logo" width="70" style="border-radius:50%;"></a> </td> <td height="30" valign="bottom"><a href="{{entry.job.job_page_url}}" style="display:block;text-decoration:none;" data-pos="IDhr4HnC"><span style="color:#63c3d1;font-size:18px;font-weight:bold;line-height:1;vertical-align:middle;">{{entry.job.post_name }}</span></a></td></tr><tr><td valign="top" height="30"><a href="{{entry.job.job_page_url}}" style="display:block;text-decoration:none;" data-pos="eSPO0o6O"><span style="color:#686868;font-size:13px;font-weight:lighter;"><span style="color:#686868;font-size:13px;font-weight:lighter;">{{entry.brand.name}}{% if entry.brand.location %}, {{entry.brand.location}} {% endif %}</span></span></a></td> </tr></tbody></table>
<p><!-- {% endfor %} --></p>

Depois, conteúdos como os seguintes são postados via API para direcionar usuários individuais com recomendações personalizadas. O array de tarefas pode variar em tamanho e conteúdo e é desempacotado dinamicamente pelo template do loop for :

{"apptoken":"app_token","id":111111,"target_by":"email","target":["[email protected]"],
  "params":{"user.first_name":"BOB","jobs":[{"job.post_name":"Job1","job.job_page_url":"https://example.com/jobs/view?1",
  "brand.name":"Brand1","brand.logo":"https://example.com/logo1.jpg","brand.location":null},
  {"job.post_name":"Job2","job.job_page_url":"https://example.com/jobs/view?2","brand.name":"Brand2",
   "brand.logo":"https://example.com/logo2.jpg""brand.location":null},
  {"job.post_name":"Job3","job.job_page_url":"https://example.com/jobs/view?3",
   "brand.name":"Brand3","brand.logo":"https://example.com/logo3.jpg""brand.location":"Dublin, County Dublin, Ireland"},
  {"job.post_name":"Job4","job.job_page_url":"https://example.com/jobs/view?4","brand.name":"Brand4",
   "brand.logo":"https://example.com/logo4.jpg""brand.location":"Dublin, Ireland"},{"job.post_name":"Job5",
   "job.job_page_url":"https://example.com/jobs/view?5","brand.name":"Brand5",
   "brand.logo":"https://example.com/logo5.jpg""brand.location": "Dublin,Ireland"}]}}

No construtor de arrastar e soltar, um loop for , uma instrução condicional, instruções de início e fim podem ser adicionadas em blocos HTML personalizados para mantê-los separados de outros conteúdos. Você pode ver isso no exemplo mostrado em nosso guia dedicado.