Use a linguagem de design de código aberto Velocity para personalizar designs de recomendação em Adobe Target Recommendations.
É possível encontrar informações sobre o Velocity em https://velocity.apache.org.
Toda a lógica, sintaxe etc. da Velocity podem ser usados para um design de recomendação. Isso quer dizer que é possível criar para loops, instruções se e outros códigos usando Velocity em vez de JavaScript.
Qualquer variável enviada para o Recommendations na mbox productPage
ou o upload do CSV podem ser exibidos no design. Esses valores são referenciados com a seguinte sintaxe:
$entityN.variable
Os nomes de variáveis devem seguir a notação taquigrafada da Velocity, que consiste em um caractere inicial $, seguido de um identificador da Linguagem do modelo de velocidade (VTL). O identificador VTL deve começar com um caractere alfanumérico (a-z ou A-Z).
Os nomes de variáveis da Velocity estão restritos aos seguintes tipos de caracteres:
As seguintes variáveis estão disponíveis como matrizes do Velocity. Como tal, eles podem ser iterados ou referenciados por meio do índice.
entities
entityN.categoriesList
Por exemplo:
#foreach ($category in $entity1.categoriesList)
<br/>$category
#end
Ou
#if ($entities[0].categoriesList.size() >= 3 )
$entities[0].categoriesList[2]
#end
Para obter mais informações sobre as variáveis da Velocity, consulte https://velocity.apache.org/engine/releases/velocity-1.7/user-guide.html#variables.
Se você usar um script de perfil em seu design, o $ precedente ao nome do script deve ser evitado com um . Por exemplo, \${user.script_name}
.
O número máximo de entidades que podem ser referenciadas em um design, seja em código fixo ou via loops, é 99. O comprimento do script do modelo pode conter até 65.000 caracteres.
Por exemplo, se você deseja um design que exibe algo semelhante a isto:
é possível usar o seguinte código:
<table style="border:1px solid #CCCCCC;">
<tr>
<td colspan="3" style="font-size: 130%; border-bottom:1px solid
#CCCCCC;"> You May Also Like... </td>
</tr>
<tr>
<td style="border-right:1px solid #CCCCCC;">
<div class="search_content_inner" style="border-bottom:0px;">
<div class="search_title"><a href="$entity1.pageUrl"
style="color: rgb(112, 161, 0); font-weight: bold;">
$entity1.id</a></div>
By $entity1.message <a href="?x14=brand;q14=$entity1.message">
(More)</a><br/>
sku: $entity1.prodId<br/> Price: $$entity1.value
<br/><br/>
</div>
</td>
<td style="border-right:1px solid #CCCCCC; padding-left:10px;">
<div class="search_content_inner" style="border-bottom:0px;">
<div class="search_title"><a href="$entity2.pageUrl"
style="color: rgb(112, 161, 0); font-weight: bold;">
$entity2.id</a></div>
By $entity2.message <a href="?x14=brand;q14=$entity2.message">
(More)</a><br/>
sku: $entity2.prodId<br/>
Price: $$entity2.value
<br/><br/>
</div>
</td>
<td style="padding-left:10px;">
<div class="search_content_inner" style="border-bottom:0px;">
<div class="search_title"><a href="$entity3.pageUrl"
style="color: rgb(112, 161, 0); font-weight: bold;">
$entity3.id</a></div>
By $entity3.message <a href="?x14=brand;q14=$entity3.message">
(More)</a><br/>
sku: $entity3.prodId<br/> Price: $$entity3.value
<br/><br/>
</div>
</td>
</tr>
</table>
Se você quiser adicionar texto após o valor de uma variável antes de uma tag que indique que o nome da variável foi concluído, é possível fazer isso usando a notação formal para incluir o nome da variável. Por exemplo: ${entity1.thumbnailUrl}.gif
.
Também é possível usar algorithm.name
e algorithm.dayCount
como variáveis nos designs, assim, um design pode ser usado para testar vários critérios e o nome do critério pode ser exibido de forma dinâmica no design. Isso mostra ao visitante que ele ou ela está olhando para os "mais vendidos" ou "pessoas que viram isso compraram aquilo." Você ainda pode usar essas variáveis para exibir o dayCount
(número de dias dos dados usados nos critérios, como "mais vendidos nos últimos dois dias" etc.
Por padrão, os modelos Velocity tratam todos os atributos da entidade como valores de string. Talvez você queira tratar um atributo de entidade como um valor numérico para executar uma operação matemática ou compará-lo a outro valor numérico. Para tratar um atributo de entidade como um valor numérico, siga estas etapas:
parseInt
ou parseDouble
na variável de teste que você criou na etapa 1 para transformar a string em um valor inteiro ou de duplo.Suponha que você queira reduzir o preço exibido de um item em US$ 0,99 para aplicar um desconto. Você poderia usar a seguinte abordagem para obter esse resultado:
#set( $Double = 0.1 )
#if( $entity1.get('priceBeforeDiscount') != '' )
#set( $discountedPrice = $Double.parseDouble($entity1.get('priceBeforeDiscount')) - 0.99 )
Item price: $$discountedPrice
#else
Item price unavailable
#end
Suponha que você queira exibir um número adequado de estrelas com base na média numérica da classificação do cliente de um item. Você poderia usar a seguinte abordagem para obter esse resultado:
#set( $Double = 0.1 )
#if( $entity1.get('rating') != '' )
#set( $rating = $Double.parseDouble($entity1.get('rating')) )
#if( $rating >= 4.5 )
<img src="5_stars.jpg">
#elseif( $rating >= 3.5 )
<img src="4_stars.jpg">
#elseif( $rating >= 2.5 )
<img src="3_stars.jpg">
#elseif( $rating >= 1.5 )
<img src="2_stars.jpg">
#else
<img src="1_star.jpg">
#end
#else
<img src="no_rating_default.jpg">
#end
Suponha que você armazene a duração de um filme em minutos, mas queira exibi-la em horas e minutos. Você poderia usar a seguinte abordagem para obter esse resultado:
#if( $entity1.get('length_minutes') )
#set( $Integer = 1 )
#set( $nbr = $Integer.parseInt($entity1.get('length_minutes')) )
#set( $hrs = $nbr / 60)
#set( $mins = $nbr % 60)
#end
Você pode modificar seu design para mostrar seu item principal ao lado de outros produtos recomendados. Por exemplo, você pode querer mostrar o item atual para referência ao lado das recomendações.
Para fazer isso, crie uma coluna em seu design que use o atributo $key
no qual você está baseando sua recomendação, em vez do atributo $entity
. Por exemplo, o código da sua coluna chave pode ter esta aparência:
<div class="at-table-column">
<a href="$key.pageURL">
<img src=$key.thumbnailUrl" class="at-thumbnail"/>
<br/><h3>$key.name</h3>
<br/><p class="at-light">$key.message</p>
<br/><p class="at-light">$key.value</p>
</a>
</div>
O resultado é um design como o seguinte, em que uma coluna mostra o item chave.
Quando você está criando sua atividade do Recommendations, se o item chave é obtido do perfil do visitante, como "último item comprado", o Target exibe um produto aleatório no Visual Experience Composer (VEC). Isso ocorre porque um perfil não está disponível enquanto você projeta a atividade. Quando os visitantes visualizam a página, eles verão o item chave esperado.
Você pode modificar seu design para substituir valores em uma string. Por exemplo, substituir o delimitador de ponto decimal usado nos Estados Unidos pelo delimitador de vírgula usado na Europa e em outros países.
O código a seguir mostra uma única linha em um exemplo condicional do preço de venda:
<span class="price">$entity1.value.replace(".", ",") €</span><br>
O código a seguir é um exemplo condicional completo de um preço de venda:
<div class="price">
#if($entity1.hasSalesprice==true)
<span class="old">Statt <s>$entity1.salesprice.replace(".", ",") €</s></span><br>
<span style="font-size: 10px; float: left;">jetzt nur</span> $entity1.value.replace(".", ",") €<br> #else
<span class="price">$entity1.value.replace(".", ",") €</span><br> #end
<span style="font-weight:normal; font-size:10px;">
$entity1.vatclassDisplay
<br/>
$entity1.delivery
<br>
</span>
Usando um script do Velocity para controlar o dimensionamento dinâmico da exibição da entidade, o modelo a seguir acomoda um resultado de 1 para muitos para evitar a criação de elementos HTML em branco quando não forem retornadas entidades correspondentes suficientes Recommendations. Esse script é mais adequado para cenários nos quais as recomendações reserva não fazem sentido e nos quais a Renderização parcial do modelo está ativada.
O trecho HTML a seguir substitui a porção HTML existente no design 4 x 2 padrão (o CSS não está incluído aqui por motivos de brevidade):
<div class="at-table-row">
.$count <=8
.<div class="at-table">
<div class="at-table-row">
#set($count=1)
#foreach($e in $entities)
#if($e.id != "" && $count < $entities.size() && $count <=8)
#if($count==5)
</div>
<div class="at-table-row">
#end
<div class="at-table-column">
<a href="$e.pageUrl"><img src="$e.thumbnailUrl" class="at-thumbnail" />
<br/>
<h3>$e.name</h3>
<br/>
<p class="at-light">$e.message</p>
<br/>
<p class="at-light">$$e.value</p>
</a>
</div>
#set($count = $count + 1)
#end
#end
</div>
</div>