メッセージにバーコードを追加する方法

このページで学べること

{% barcode %} タグを使用して、メール、MMS、RCS、WhatsApp メッセージ内で Code 128 バーコードを生成する方法をご覧ください。バーコードの値には、静的な文字列、プロファイルプロパティ、イベント変数、または Klaviyo クーポンコードを使用できます。

クイック リファレンス

始める前に

{% barcode %} タグは URL を生成することで機能します。その URL が読み込まれると（プレビュー、受信トレイ、またはモバイル端末で）、バーコードの PNG 画像がレンダリングされます。つまり、バーコード画像は URL が実際にフェッチされるまで作成されません。

{% barcode %} タグは次でサポートされています：

• メール
• MMS
• RCS
• WhatsApp

基本的な使用方法

バーコードタグを使用する最も簡単な方法は次のとおりです。

{% barcode 'MyCode' %}

これにより、バーコードの PNG 画像を返す URL が生成されます。スキャンすると、バーコードには値 MyCode が含まれます。

タグに引数を渡すことで、バーコードをカスタマイズできます。例：

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

利用可能なすべてのオプションについては、以下の引数リファレンスのセクションをご覧ください。

異なるチャネルでのバーコードの使用

メール

メールの場合、バーコードのレンダリング方法には 2 つのオプションがあります。

オプション 1：HTML モード（メールにおすすめ）

mode=html を設定して、タグが HTML <img> 要素を直接出力するようにします。これは、メールにバーコードを含めるための最もシンプルな方法です。

{% barcode 'MyCode' mode=html %}

このタグを、メールテンプレート エディターのテキストブロックまたは HTML ブロックに配置します。

オプション 2：URL モード

モードを未設定のまま（または mode=url に設定）にして URL を取得し、その URL を画像ブロックの画像 URL フィールドに貼り付けてください。これにより、画像のスタイルをより細かく制御できます。

{% barcode 'MyCode' %}

MMS

MMS メッセージの場合、バーコードタグはテキスト本文ではなく、SMS/MMS エディターの ダイナミック画像 セクションに追加してください。

1. エディタで MMS メッセージを開きます。
2. メッセージ ボックスで [画像を追加] アイコンをクリックします。
3. [動的画像] タブに移動します。
4. バーコード タグを貼り付けます。例：

{% barcode person.LoyaltyId %}

1. [保存] をクリックします。

これは、MMS に任意の動的な画像を追加する場合と同じプロセスです。詳細については、テキストメッセージに動的な画像を追加する方法をご覧ください。

RCS

RCS メッセージの場合、RCS 画像要件に合わせてバーコードをフォーマットするには mode=rcs を使用します。このモードでは、Android と iOS の両方で正しく表示される寸法が自動的に設定されます。

{% barcode 'MyCode' mode=rcs %}

MMS の場合と同様に、RCS メッセージ エディタの [動的画像] セクションにバーコード タグを追加します。

RCS のデフォルト：

• 幅: 600px
• 高さ：300px
• パディング先：1440x720px

これらのデフォルトは、Klaviyo の RCS 画像フォーマット推奨事項に従っています。必要に応じて、カスタム width、height、padded_width、padded_height の値で上書きできます。

WhatsApp

WhatsApp メッセージの場合は、MMS の場合と同様に、メッセージエディタの動的画像セクションにバーコードタグを追加します。

{% barcode person.MembershipId %}

WhatsApp には特別な設定やモードは不要です。デフォルトの mode=url は正しく機能します。

バーコード タグ引数リファレンス

プロファイルプロパティとイベントデータでバーコードを使用する

バーコードの値としてプロファイルプロパティまたはイベント変数を使用できるため、受信者ごとに固有のバーコードを取得できます。

プロファイルプロパティの例：

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

イベント変数の例（メトリックトリガーによるフローの場合）：

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

欠損値の処理：

受信者にそのプロパティが設定されていない場合、バーコード URL は無効になり、画像は読み込まれません。次の 2 つのオプションがあります：

オプション 1：default フィルター を使用して、意味のあるフォールバック値を設定します：

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

スキャンした場合でも意味が通る値がデフォルトになっていることを確認してください。"fallback" のような一般的なプレースホルダーを使用すると、スキャン可能ではあるものの役に立たないバーコードが生成されます。

オプション 2：条件文を使用して、値がない場合にバーコード全体を非表示にします：

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

メールの組み合わせ例：

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

Klaviyo クーポンコードでバーコードを使用する

Klaviyo 管理のクーポンコードを使用していて、バーコードとして表示したい場合は、coupon=True を設定します。これにより、システムは受信者にクーポンコードを割り当て、そのコードをバーコードの値として使用します。

{% barcode 'ShopifyCoupon' coupon=True %}

これはすべてのチャネルで機能します。例：RCS でクーポン バーコードを送信するには：

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

{% barcode person.CouponCode %}

拡大縮小とサイズ変更

デフォルトでは、バーコードの幅と高さは 3x の係数でスケーリングされます。つまり：

• 100 のうち width は 300px の実際の幅でレンダリングされます
• 50 件中 height 件が、実際の高さ 150px でレンダリングされます。

例外：mode=rcs の場合、スケーリング係数は 1x です。これにより、RCS 画像のフォーマット要件に合わせてバーコードの寸法をより正確に制御できます。

パディング値はスケールされません。padded_width および padded_height の引数は常に実際のピクセル値を表します。内側のバーコードは 3× に拡大縮小されるため、余白の値は幅と高さの 3 倍を超える必要があります。例：

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

ここでは、バーコードは 700x400px のパディング付きキャンバス内で 600x300px（200×3、100×3）でレンダリングされます。

最大画像サイズ：バーコード サービスでは 4096x4096 ピクセルを超える画像は生成されません。この制限は、スケーリング後の rendered サイズに適用されます。非 RCS バーコード（3x スケーリング）の場合、最大の width 引数は約 1365（1365 × 3 = 4095px）です。RCS バーコード（1x スケーリング）の場合、最大は 4096 です。

ロングコードの幅のガイドライン：

• RCS 以外のバーコードの場合：コードが 15 文字 を超える場合は、デフォルトの 100（300px でレンダリングされます）を超えて幅を広げてください。
• RCS バーコードの場合：コードが 30 文字 を超える場合は、デフォルトの 600px を超えるように幅を広げてください。

幅が狭すぎてデータをエンコードできない場合、バーコード画像は生成に失敗します。

トラブルシューティング

送信する前に必ずプレビューしてください

{% barcode %} タグはレンダリング時に URL を生成し、画像はその URL が取得されるまで生成されないため、プレビューまたはメッセージを送信するまで失敗が明らかにならない場合があります。問題を早期に検出するには、次の手順に従ってください：

1. メッセージをプレビューします。プレビューでバーコードが読み込まれない場合、送信時にも読み込まれません。
2. バーコードをスキャンしてください。バーコードスキャンツール（例：imagetotext.info/barcode-scanner）を使用します。バーコードが想定どおりの値をエンコードしていることを確認します。
3. オーディエンスに送信する前に、自分宛てにテストメッセージを送信してください。

一般的な問題

バーコード画像が読み込まれない

最も一般的な原因は、バーコードの値が空であることです。これは、タグが受信者に存在しないプロファイルプロパティまたはイベント変数を参照している場合に発生します。例：

{% barcode person.BarcodeCode %}

受信者に BarcodeCode の値がない場合、生成された URL にはコードが含まれず、画像は表示されません。これを修正するには、default フィルターを追加します。

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

URL は正しそうに見えるのに、バーコード画像の生成に失敗します

バーコードの幅が狭すぎて、コード内のすべてのデータをエンコードできない可能性があります。width の値を増やしてみてください。目安として：

• 15 文字を超えるコードには、デフォルトの 100（レンダリング時 300px）より大きい幅が必要です。
• 30 文字を超える RCS コードには、デフォルトの 600px より大きい幅が必要です。

バーコードがテキスト ブロック（メール）に表示されない

テキストブロックに表示/非表示ロジックが適用されているか確認してください。条件によってブロックが非表示になっている場合、タグが正しくてもバーコードはレンダリングされません。ブロックの設定を開いて確認してください。

その他のリソース

• Klaviyo のクーポンコード スタートガイド — クーポンコードの作成と管理の方法（メールでクーポンのバーコードに古い {% barcode_code %} タグを使用する方法を含む）を学びましょう。
• テキストメッセージに動的な画像を追加する方法 — エディター内で動的画像セクションを見つける場所など、MMS メッセージに動的な画像を追加する方法をご確認ください。
• メッセージのパーソナライゼーションリファレンス — Klaviyo で利用可能なすべてのパーソナライゼーションタグ（プロファイルプロパティ、イベント変数、フィルターを含む）のリファレンス。
• MMS の画像と GIF のベスト プラクティスを理解する — MMS メッセージにおける画像サイズとフォーマットのベスト プラクティス。