アクション内ではHTML, CSS, Script内で様々な変数を呼び出すことが可能です。
主に利用されるユーザー情報変数・静的変数の利用方法をご紹介します。
ユーザー情報変数・静的変数とは？
アクションで主に利用される変数として、静的変数とユーザー情報変数があります。それぞれの違いを説明します。
- 1.ユーザー情報変数
- 表示される人ごとに、その人が持つ情報を表示する
- 2.静的変数
- 接客アクションごとに設定し、誰にでも同じものが表示される
それぞれの用途に応じ使い分けることによりアクションをより便利に活用できます。
静的変数
静的変数は、アクション内でよく変更する値を静的変数として定義し、アクションの更新を簡易にすることに利用されます。
例えば下記のアクションのメイン画像（WORKSHOP）を静的変数として切り出して簡易に変更できるようにします
- 静的変数の詳細については、下記をご覧ください。
1.静的変数を定義
カスタマイズ＞変数＞静的変数にて変数の内容を定義します。
例）メイン画像を静的変数の変数として定義
2.静的変数を参照
カスタマイズ＞HTMLにて定義した変数を参照します。
例）定義した静的変数をHTML内で参照
- HTML, CSS, Script上で
"#{変数名}"という記法で呼び出せます。 - Script内で変数を呼び出す場合は、クォーテーションマークで囲った
"#{変数名}"といった形式の記述を推奨します。なお、"#{変数名}"形式で呼び出された変数は文字列となりますので、必要に応じて型変換を行ってください。
3.静的変数を設定する
ベーシック＞アクション設定にて、変数の値を設定します。
例）定義した静的変数に値（画像）を設定
これにより、ベーシック画面からメイン画像を変更が可能になります。このように、アクション内にて頻繁に変更する値は静的変数として切り出すと設定がより簡単になります。
ユーザー情報変数
ユーザー情報変数は、配信先のユーザー情報をHTML, Scriptに埋め込んで配信することができます。
例えば「ようこそ◯◯さん」、「◯◯ブランドの新着商品をチェック！」や会員IDに応じてリンク先URLを変更することが可能となります。
- ユーザー情報変数の詳細については、下記をご覧ください。
1.ユーザー情報変数を定義
カスタマイズ＞変数＞ユーザー情報変数にて変数の内容を定義します。
例）名前（name）をユーザー情報の変数として定義
※ベーシック画面（ベーシック＞アクション設定＞データ管理）で同様の定義が可能です。
2.ユーザー情報変数を参照
定義した変数をカスタマイズ＞HTMLにて変数の内容を参照します
例）HTMLの見出しにユーザー情報変数（name）を参照
- HTML, Script上で
"#{変数名}"という記法で呼び出せます。
CSSではユーザー情報変数を利用することはできません。そのため、Javascriptを利用して実現してください。
3.ユーザー情報を確認する
ベーシック＞プレビュー画面にて内容を確認します
例）タイトルにname様におすすめ！とユーザー情報変数を利用する
アクション編集画面のプレビューで確認するためには、定義したユーザー情報変数のプレビューの値を設定する必要があります。逆に、設定していない場合はプレビューでユーザー情報変数を確認することができません。
※ プレビューの値の設定方法
1.アクション編集画面のサイドメニューからデータ管理をクリックする。
2.定義したユーザー情報変数のプレビューの値をクリックし、プレビューで使用する値を選択する。
注意事項
ユーザー情報変数を実配信で確認する場合
テストや実配信で確認する場合、定義されたユーザー情報変数の値をユーザーが持っていない場合には、配信がされない場合もあります。この場合、デフォルト値の設定内容によって下記の挙動になります。
| デフォルト値の設定 | ユーザーが値を持っていない場合の挙動 |
|---|---|
| あり | デフォルト値として設定された値が参照され、配信される |
| なし | 配信自体がされない |
配信が確認できない等の場合は、こちらの情報をご参照ください。
ユーザ情報変数に含まれるHTMLタグの扱い
ユーザ情報変数にHTMLのタグが含まれる場合、レンダリングされる際にエスケープが行われます。HTMLのタグとしては無効化された状態で表示されるので、例えば <br> タグは <br> に変換され、 <br> という可読の文字列として表示されます。
Datahubからユーザ情報変数を介してコンテンツを配信している場合など、タグとして機能しても安全であることがわかっている場合は、#{変数名|safe}と表記することでエスケープ処理を行わずにレンダリングを行うことができます。safeの他に改行文字を<br>タグに変換するnl2brも多くの場合で有用です。
これはテンプレート言語であるNunjucksの仕様です。詳しい文法仕様については、公式サイトをご覧ください。
変数内で変数を利用する
静的変数内に、変数（ユーザー情報変数・静的変数）を利用することも可能です。
しかし変数の入れ子構造が2重以上になると変数が解決できず、エラーが発生してしまうのでご注意ください。
問題ない例：
3重参照でエラーになる例：
変数を含む変数のエスケープ処理
この「変数を含む変数」はレンダリングされる際にエスケープが行われます。改行やHTMLのタグなどが無効化された状態で表示されるので、例えば改行を含む場合 <br> に変換され <br> という可読の文字列として表示されます。
タグとして機能しても安全であることがわかっている場合は、#{変数名 | safe}と表記することでエスケープ処理を行わずにレンダリングを行うことができます。
KARTE内であらかじめ定義された変数の利用
アクションに変数を定義しなくても利用できる、あらかじめ定義された変数をご用意しています。
主に、接客サービス / アクションのID情報、配信先ユーザーのID情報などをアクションに埋め込む事が可能です。#{変数名} という記法で HTML / CSS / Script 上から呼び出すことが可能になります。
詳細につきましては、KARTE内部で定義された変数 のドキュメントをご確認ください。