スタートガイド   ›   js ライブラリについて   ›   各種タグの導入

動的テンプレートへの値の埋め込み

variableメソッドをカスタマイズタグとして追加することで、動的クリエイティブに埋め込む値（のうち、イベント情報には当てはまらないもの。「動的変数」と呼びます）をクライアントサイト側から代入することが可能です。

variableメソッドについて

js 内で「動的変数」を代入をするためのメソッドです。

variableメソッドの設置が必要なケース

以下のケースで、variableメソッドの設置が必須となります。

• クライアントサイト側から「動的変数」を代入するタイプの動的クリエイティブを利用して接客を行いたい

variableメソッドの設置方法

variableメソッドを呼び出すカスタマイズタグの設置場所や内容は、サイト側の実装に大きく依存します。以下に記載したvariableサンプルコードを参考に、サイトに合わせた記述に書き換えてください。

variableメソッドの設置場所

動的クリエイティブへの「動的変数」の代入は js の初期化処理のなかで実施されます。そのため、初期化メソッド（loadメソッド）の前にvariableメソッドを呼び出すカスタマイズタグを設置してください。

• 商品の残り在庫数を代入する例

<script async src="@TAG_URL"></script>
<script>
  window._cq = window._cq || [];
  function _cc(){_cq.push(arguments);}
  _cc('variable', 'inventory', '99');  // 'load'メソッドの前に追加
  _cc('load', '@ACCOUNT_ID', '@SITE_ID');
</script>

variableメソッドのサンプルコード

例：ページの商品の残り在庫数を代入する

// ページの商品の残り在庫数を代入する場合
_cc('variable', 'inventory', '99');

例：（店舗ポータルサイトなどで、店舗ごとに異なる）電話番号を代入する

_cc('variable', 'phoneNumber', '03-1234-5678');

variableメソッドの引数について

動的クリエイティブの編集について

動的変数に代入した情報をクリエイティブに表示するためには、HTML直接編集でクリエイティブの内容を変更することが必要となります。

v-code-varという属性に動的変数の名前を指定すると、クライアントサイト側から代入された文字列がクリエイティブ内に表示されます。

以下のサンプルコードを参考に、クリエイティブをご用意ください。

例：ページの商品の残り在庫数を代入する

// 残り在庫数は99個ですと表示される
<div>残り在庫数は<span v-code-var="this.clientVariable.inventory">0</span>個です</div>

例：(店舗ポータルサイトなどで、店舗ごとに異なる)電話番号を代入する

// お電話は03-1234-5678までご連絡くださいと表示される
<div>お電話は<span v-code-var="this.clientVariable.phoneNumber">00-0000-0000</span>までご連絡ください</div>