アクション内ではHTML, CSS, Script内で変数を呼び出すことが可能です。それぞれの変数の利用方法をご紹介します。

アクション内で設定した変数の利用

アクション内で設定した変数は、HTML, CSS, Script上で
#{変数名} という記法で呼び出せます。

またカスタマイズの画面で変数を設定すると、ベーシックの画面からその変数の値を設定することができます。
ベーシックの画面から値の変更がしやすくなりますので、頻繁に変更する値は変数として切り出すとアクションの設定がより簡単になります。

nullnull

  1. [カスタマイズ]変数の定義
  2. [カスタマイズ]HTML中で変数が使われている部分の例
  3. [ベーシック]変数に入れる値の設定

Script内で変数を呼び出す場合は、クォーテーションマークで囲った"#{変数名}"といった形式の記述を推奨しています。

また"#{変数名}"形式で呼び出された変数は文字列となりますので、必要に応じて型変換を行ってください。

ユーザー情報を埋め込む場合の変数の利用

アクション編集画面で「ユーザー情報変数」を設定することで、配信先のユーザー情報をHTML, CSS, Scriptに埋め込んで配信することができます。

ユーザー情報変数の詳細については、下記をご覧ください。

ユーザー情報を埋め込んだアクション配信を行う | KARTEサポートサイト

ユーザー情報変数の定義

null

ユーザー情報変数の参照

null

変数をScript内で呼び出す場合、クォーテーションマークで囲わずに#{変数名}という形式で記述しても、デフォルトでは文字列として解釈されます。

変数名

変数名には半角のアルファベットかアンダースコア (_) かドル記号 ($)のみ使用できます。先頭以外では数字も利用することが可能です。デフォルト値を入力しない場合、変数に合致した値がないとみなされるのでご注意ください。

変数名に"-"(ハイフン)はご利用頂けないのでご注意下さい。

参照方法

HTML, CSS, Scriptともに、#{変数名}という記法で呼び出せます。

※古いテンプレートの中では、[[変数名]]という記法で呼び出す必要があるケースがあります。

ユーザー情報変数をプレビューで確認

アクション編集画面のプレビューで確認するためには、定義したユーザー情報変数のプレビューの値を設定する必要があります。逆に、設定していない場合はプレビューでユーザー情報変数を確認することができません。

  1. アクション編集画面のサイドメニューからデータ管理をクリックする。
  2. 定義したユーザー情報変数のプレビューの値をクリックし、プレビューで使用する値を選択する。

ユーザ情報変数に含まれるHTMLタグの扱い

ユーザ情報変数にHTMLのタグが含まれる場合、レンダリングされる際にエスケープが行われます。HTMLのタグとしては無効化された状態で表示されるので、例えば <br> タグは &lt;br&gt; に変換され、 <br> という可読の文字列として表示されます。

Datahubからユーザ情報変数を介してコンテンツを配信している場合など、タグとして機能しても安全であることがわかっている場合は、#{変数名 | safe}と表記することでエスケープ処理を行わずにレンダリングを行うことができます。safeの他に改行文字を<br>タグに変換するnl2brも多くの場合で有用です。

これはテンプレート言語であるNunjucksの仕様です。詳しい文法仕様については、公式サイトをご覧ください。

KARTE内であらかじめ定義された変数の利用

アクションに変数を定義しなくても利用できる、あらかじめ定義された変数をご用意しています。

主に、接客サービス / アクションのID情報、配信先ユーザーのID情報などをアクションに埋め込む事が可能です。

#{変数名} という記法で HTML / CSS / Script 上から呼び出すことが可能になります。

詳細につきましては、こちら のドキュメントをご確認ください。

変数内で変数を利用する

静的変数内に、変数(ユーザー情報変数・静的変数)を利用することも可能です。
しかし変数の入れ子構造が2重以上になると変数が解決できず、エラーが発生してしまうのでご注意ください。

問題ない例:
null

3重参照でエラーになる例:
null

変数を含む変数のエスケープ処理

この「変数を含む変数」はレンダリングされる際にエスケープが行われます。改行やHTMLのタグなどが無効化された状態で表示されるので、例えば改行を含む場合 &lt;br&gt; に変換され <br> という可読の文字列として表示されます。

タグとして機能しても安全であることがわかっている場合は、#{変数名 | safe}と表記することでエスケープ処理を行わずにレンダリングを行うことができます。