[Premium]{class="badge positive" title="Vedi cosa è incluso in Target Premium."}

Personalizzare una progettazione utilizzando Velocity

Utilizzare il linguaggio di progettazione open-source Velocity per personalizzare le progettazioni dei consigli in Adobe Target Recommendations.

Panoramica di Velocity section_C431ACA940BC4210954C7AEFF6D03EA5

Le informazioni su Velocity sono disponibili all'indirizzo https://velocity.apache.org.

Tutta la logica, la sintassi e così via di Velocity può essere utilizzata per la progettazione di un consiglio. Ciò significa che è possibile creare per cicli, istruzioni if e altro codice utilizzando Velocity anziché JavaScript.

Gli attributi di entità inviati a Recommendations nella mbox productPage o il caricamento del file CSV possono essere visualizzati in una progettazione, ad eccezione degli attributi con più valori. È possibile inviare qualsiasi tipo di attributo; tuttavia, Target non passa attributi di tipo "multivalore" come array su cui un modello può eseguire iterazioni (ad esempio entityN.categoriesList).

A questi valori viene fatto riferimento con la seguente sintassi:

$entityN.variable

I nomi degli attributi di entità devono seguire la notazione abbreviata Velocity, costituita da un carattere iniziale $, seguito da un identificatore VTL (Template Language) Velocity. L'identificatore VTL deve iniziare con un carattere alfabetico (a-z o A-Z).

I nomi degli attributi dell’entità Velocity sono limitati ai seguenti tipi di caratteri:

I seguenti attributi sono disponibili come array Velocity. In quanto tali, possono essere iterati o referenziati tramite index.

Ad esempio:

#foreach ($category in $entity1.categoriesList)
<br/>$category
#end

Oppure

#if ($entities[0].categoriesList.size() >= 3 )
$entities[0].categoriesList[2]
#end

Per ulteriori informazioni sulle variabili (attributi) Velocity, vedere https://velocity.apache.org/engine/releases/velocity-1.7/user-guide.html#variables.

Se utilizzi uno script di profilo nella progettazione, il $ che precede il nome dello script deve essere preceduto da una barra rovesciata (\). Ad esempio:

\${user.script_name}

Ad esempio, se desideri una progettazione che mostri qualcosa di simile a quanto segue:

puoi utilizzare il codice seguente:

<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>

È inoltre possibile utilizzare algorithm.name e algorithm.dayCount come attributi di entità nelle progettazioni, in modo che una progettazione possa essere utilizzata per testare più criteri e il nome dei criteri possa essere visualizzato dinamicamente nella progettazione. Questo mostra al visitatore che sta guardando “articoli più venduti” o “persone che hanno visto questo hanno acquistato questo.” Puoi anche utilizzare questi attributi per visualizzare dayCount (numero di giorni di dati utilizzati nel criterio, come "articoli più venduti negli ultimi 2 giorni" ecc.

Utilizzo dei numeri nei modelli Velocity

Per impostazione predefinita, Velocity modelli considerano tutti gli attributi di entità come valori stringa. È possibile trattare un attributo di entità come un valore numerico per eseguire un’operazione matematica o confrontarlo con un altro valore numerico. Per trattare un attributo di entità come valore numerico, effettua le seguenti operazioni:

Esempio: calcolo di un prezzo scontato

Supponiamo di voler ridurre il prezzo visualizzato per un articolo di $0,99 per applicare uno sconto. Per ottenere questo risultato, puoi utilizzare il seguente approccio:

#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

Esempio: scelta del numero di stelle da visualizzare in base alla valutazione di un elemento

Supponi di voler visualizzare un numero appropriato di stelle in base alla valutazione numerica media dei clienti di un articolo. Per ottenere questo risultato, puoi utilizzare il seguente approccio:

#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

Esempio: calcolo del tempo in ore e minuti in base alla lunghezza in minuti di un elemento

Supponi di memorizzare la lunghezza di un filmato in minuti, ma di volerla visualizzare in ore e minuti. Per ottenere questo risultato, puoi utilizzare il seguente approccio:

#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

Visualizzazione di un elemento chiave con i prodotti consigliati section_7F8D8C0CCCB0403FB9904B32D9E5EDDE

Puoi modificare la progettazione per mostrare un elemento chiave accanto ad altri prodotti consigliati. Ad esempio, accanto ai consigli potresti voler mostrare l'articolo corrente, come riferimento.

A tale scopo, crea una colonna nella progettazione che utilizzi l’attributo $key cui si basa il consiglio, anziché l’attributo $entity. Ad esempio, il codice per la colonna chiave potrebbe essere simile a:

<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>

Il risultato è una progettazione come la seguente, dove una colonna mostra l'elemento chiave.

Durante la creazione dell'attività Recommendations, se l'elemento chiave viene ricavato dal profilo del visitatore, ad esempio "ultimo articolo acquistato", Target visualizza un prodotto casuale nel Visual Experience Composer (Compositore esperienza visivo). Questo perché non è disponibile un profilo mentre progetti l'attività. Tuttavia, quando la pagina verrà visualizzata dai visitatori, ogni visitatore vedrà l'elemento chiave previsto.

Esecuzione di sostituzioni in un valore stringa section_01F8C993C79F42978ED00E39956FA8CA

Puoi modificare la progettazione per sostituire i valori all’interno di una stringa. Ad esempio, sostituendo il delimitatore a punti decimali utilizzato negli Stati Uniti con il delimitatore a virgola utilizzato in Europa e in altri paesi.

Il codice seguente mostra una riga singola in un esempio di prezzo di vendita condizionale:

<span class="price">$entity1.value.replace(".", ",") &euro;</span><br>

Il codice seguente è un esempio completo di prezzo di vendita:

<div class="price">
    #if($entity1.hasSalesprice==true)
    <span class="old">Statt <s>$entity1.salesprice.replace(".", ",") &euro;</s></span><br>
    <span style="font-size: 10px; float: left;">jetzt nur</span> $entity1.value.replace(".", ",") &euro;<br> #else
    <span class="price">$entity1.value.replace(".", ",") &euro;</span><br> #end
    <span style="font-weight:normal; font-size:10px;">
                                        $entity1.vatclassDisplay
                                        <br/>
                                        $entity1.delivery
                                        <br>
                                    </span>

Personalizzazione delle dimensioni del modello e verifica della presenza di valori vuoti default

Utilizzando uno script Velocity per controllare il ridimensionamento dinamico della visualizzazione dell'entità, il seguente modello gestisce un risultato "da 1 a molti" per evitare la creazione di elementi HTML vuoti quando non vi sono sufficienti entità restituite da Recommendations. Questo script è adatto per gli scenari in cui non avrebbe senso utilizzare consigli di backup ed è abilitato Partial Template Rendering.

Il seguente snippet HTML sostituisce la porzione HTML esistente nella progettazione predefinita da 4x2 (qui non è stato incluso il CSS per motivi di brevità):

<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>