Come aggiungere codici a barre ai tuoi messaggi

Cosa imparerai

Scopri come usare il tag {% barcode %} per generare codici a barre Code 128 nei tuoi messaggi e-mail, MMS, RCS e WhatsApp. Il valore del codice a barre può essere una stringa statica, una proprietà del profilo, una variabile dell’evento o un codice coupon Klaviyo.

Riferimento rapido

Prima di iniziare

Il {% barcode %} Il tag funziona generando un URL. Quando l'URL viene caricato (in un'anteprima, in una casella di posta o in un dispositivo mobile), viene visualizzata un'immagine PNG del codice a barre. Ciò significa che l'immagine del codice a barre non viene creata fino a quando l'URL non viene effettivamente recuperato.

Il {% barcode %} Il tag è supportato in:

• E-mail
• MMS
• RCS
• WhatsApp

Utilizzo di base

Il modo più semplice per utilizzare il tag del codice a barre è:

{% barcode 'MyCode' %}

Questo produce un URL che restituisce un'immagine PNG di un codice a barre. Durante la scansione, il codice a barre contiene il valore MyCode.

Puoi personalizzare il codice a barre passando gli argomenti al tag. Per esempio:

{% barcode 'MyCode' width=200 height=100 %}

Consulta la sezione di riferimento degli argomenti qui di seguito per tutte le opzioni disponibili.

Utilizzo di codici a barre con canali diversi

E-mail

Per le e-mail, hai due opzioni per il rendering del codice a barre:

Opzione 1: modalità HTML (consigliata per le e-mail)

Imposta mode=html per ottenere l'output di un tag HTML <img> direttamente. Questo è l'approccio più semplice per includere un codice a barre in un'e-mail.

{% barcode 'MyCode' mode=html %}

Inserisci questo tag in un blocco di testo o in un blocco HTML nell'editor dei modelli di e-mail.

Opzione 2: modalità URL

Lascia la modalità disattivata (o impostata) mode=url) per ottenere un URL, quindi inserirlo nel campo URL immagine di un blocco immagine. Questo ti offre un maggiore controllo sullo stile delle immagini.

{% barcode 'MyCode' %}

MMS

Per i messaggi MMS, aggiungi il tag del codice a barre nella sezione Immagine dinamica dell'editor SMS/MMS, non nel corpo del testo.

1. Apri il tuo messaggio MMS nell'editor.
2. Fai clic sull'icona Aggiungi immagine nella casella del messaggio.
3. Vai alla scheda Immagine dinamica.
4. Incolla il tuo tag del codice a barre, ad esempio:

{% barcode person.LoyaltyId %}

1. Clicca su Salva.

Segue lo stesso processo dell’aggiunta di qualsiasi immagine dinamica a un MMS. Per maggiori dettagli, vedi Come aggiungere un’immagine dinamica a un servizio di messaggistica di testo.

RCS

Per i messaggi RCS, utilizzare mode=rcs per formattare il codice a barre in base ai requisiti delle immagini RCS. Questa modalità imposta automaticamente le dimensioni che vengono visualizzate correttamente su Android e iOS.

{% barcode 'MyCode' mode=rcs %}

Aggiungi il tag del codice a barre nella sezione Immagine dinamica dell'editor di messaggi RCS, come faresti per i MMS.

Impostazioni predefinite RCS:

• Larghezza: 600 px
• Altezza: 300 px
• Aggiunto a: 1440x720px

Queste impostazioni predefinite seguono i consigli di formattazione delle immagini RCS di Klaviyo. Puoi sostituirle con i modelli personalizzati width, height, padded_widthe padded_height se necessario.

WhatsApp

Per i messaggi WhatsApp, aggiungi il tag del codice a barre nella sezione Immagine dinamica dell'editor di messaggi, come faresti per i MMS.

{% barcode person.MembershipId %}

Non è necessaria alcuna configurazione o modalità speciale per WhatsApp. L'impostazione predefinita mode=url funziona correttamente.

Riferimento agli argomenti del tag del codice a barre

Utilizzo dei codici a barre con le proprietà del profilo e i dati degli eventi

Puoi utilizzare le proprietà del profilo o le variabili evento come valore del codice a barre, in modo che ogni destinatario ottenga un codice a barre univoco.

Esempi di proprietà del profilo:

{% barcode person.LoyaltyId %}
{% barcode person.email %}
{% barcode person.MembershipNumber %}

Esempi di variabili evento (per i flussi attivati da metriche):

{% barcode event.Code %}
{% barcode event.OrderId %}

Gestione dei valori mancanti:

Se per un destinatario non è impostata la proprietà, l'URL del codice a barre non sarà valido e l'immagine non verrà caricata. Hai due opzioni:

Opzione 1: usare un default Filtra per impostare un valore di riserva significativo:

{% barcode person.BarcodeCode|default:'STORE-MEMBER' %}

Assicurati che l'impostazione predefinita sia un valore che abbia senso se scansionato. Un segnaposto generico come "riserva" produrrebbe un codice a barre scansionabile ma inutile.

Opzione 2: usa un'istruzione condizionale per nascondere completamente il codice a barre quando manca il valore:

{% if person.BarcodeCode %}
  {% barcode person.BarcodeCode mode=html %}
{% endif %}

Esempio combinato di e-mail:

{% barcode person.LoyaltyId width=200 height=75 mode=html %}

Utilizzo dei codici a barre con i codici coupon di Klaviyo

Se utilizzi i codici coupon gestiti da Klaviyo e vuoi visualizzarli come codici a barre, imposta coupon=True. Indica al sistema di assegnare un codice coupon al destinatario e di utilizzarlo come valore del codice a barre.

{% barcode 'ShopifyCoupon' coupon=True %}

Funziona su tutti i canali. Ad esempio, per inviare un codice a barre coupon tramite RCS:

{% barcode 'ShopifyCoupon' coupon=True mode=rcs %}

{% barcode person.CouponCode %}

Ridimensionamento e dimensionamento

Per impostazione predefinita, la larghezza e l'altezza del codice a barre sono scalate di un fattore 3x. Questo significa:

• A width di 100 rendering a 300 px di larghezza effettiva
• A height di 50 rendering a un'altezza effettiva di 150 px

Problema: quando mode=rcs, il fattore di scalabilità è 1x. Ciò consente un controllo più preciso sulle dimensioni del codice a barre per adattarsi ai requisiti di formattazione delle immagini RCS.

I valori di spaziatura interna non vengono scalati. Il padded_width e padded_height gli argomenti rappresentano sempre i valori effettivi dei pixel. Poiché il codice a barre interno è scalato di 3 volte, i tuoi valori di spaziatura interna devono essere più grandi di 3 volte la larghezza e l'altezza. Per esempio:

{% barcode 'Code' width=200 height=100 padded_width=700 padded_height=400 %}

Qui, il codice a barre viene visualizzato a 600x300px (200×3, 100×3) all'interno di una tela imbottita 700x400px.

Dimensione massima dell'immagine: il servizio di codice a barre non genererà immagini di dimensioni superiori a 4096x4096 pixel. Questo limite si applica alle dimensioni del rendering dopo la scalatura. Per i codici a barre non RCS (scala 3x), ciò significa il massimo width L'argomento è circa 1365 (1365 × 3 = 4095px). Per i codici a barre RCS (scala 1x), il massimo è 4096.

Linee guida sulla larghezza per i codici lungi:

• Per i codici a barre non RCS: se il tuo codice supera i 15 caratteri, aumenta la larghezza oltre il valore predefinito di 100 (che viene visualizzato a 300px).
• Per i codici a barre RCS: se il tuo codice supera i 30 caratteri, aumenta la larghezza oltre il valore predefinito di 600px.

Se la larghezza è troppo stretta per codificare i dati, l'immagine del codice a barre non verrà generata.

Risoluzione dei problemi

Visualizza sempre l'anteprima prima dell'invio

Perché il {% barcode %} Il tag produce un URL al momento del rendering e l'immagine non viene generata fino a quando l'URL non viene recuperato. Gli errori potrebbero non essere evidenti fino a quando non visualizzi l'anteprima o invii il messaggio. Segui questi passaggi per individuare tempestivamente i problemi:

1. Visualizza l'anteprima del messaggio. Se il codice a barre non viene caricato nell'anteprima, non verrà caricato quando viene inviato.
2. Esegui la scansione del codice a barre. Usa uno strumento di scansione dei codici a barre (ad esempio imagetotext.info/barcode-scanner) per verificare che il codice a barre codifichi il valore previsto.
3. Invia un messaggio di prova prima di inviarlo al tuo pubblico.

Problemi comuni

L'immagine del codice a barre non viene caricata

La causa più comune è un valore di codice a barre vuoto. Questo avviene quando il tag fa riferimento a una proprietà del profilo o a una variabile evento che il destinatario non ha. Per esempio:

{% barcode person.BarcodeCode %}

Se il destinatario non BarcodeCode valore, all'URL generato mancherà il codice e l'immagine non verrà resa. Per risolvere il problema, aggiungi un default filtro:

{% barcode person.BarcodeCode|default:'defaultCode' %}

L'immagine del codice a barre non viene generata, ma l'URL sembra corretto

Probabilmente la larghezza del codice a barre è troppo stretta per codificare tutti i dati del tuo codice. Prova ad aumentare width valore. Come regola generale:

• I codici con più di 15 caratteri hanno bisogno di una larghezza maggiore dei 100 predefiniti (300 px renderizzati).
• I codici RCS di oltre 30 caratteri hanno bisogno di una larghezza superiore ai 600 px predefiniti.

Il codice a barre non appare in un blocco di testo (e-mail)

Controlla se al blocco di testo è applicata la logica mostra/nascondi. Se una condizione nasconde il blocco, il codice a barre non viene visualizzato anche se il tag è corretto. Apri le impostazioni del blocco per verificare.

Risorse aggiuntive

• Primi passi con i codici coupon in Klaviyo — Scopri come creare e gestire i codici coupon, incluso come usare la vecchia tag {% barcode_code %} per i codici a barre dei coupon nelle e-mail.
• Come aggiungere un’immagine dinamica a un messaggio di testo — Scopri come aggiungere immagini dinamiche ai messaggi MMS, incluso dove trovare la sezione Immagine dinamica nell’editor.
• Riferimento per la personalizzazione dei messaggi — Riferimento per tutti i tag di personalizzazione disponibili in Klaviyo, incluse le Proprietà del profilo, le variabili di evento e i filtri.
• Comprendere le best practice per immagini e GIF MMS — Best practice per dimensionamento e formattazione delle immagini nei messaggi MMS.