ウェブサイト上に存在するさまざまな種類のデータを「データディクショナリー」として設定しておくことで、ウェブサイトのすべてのサービスタグに対し、データの受け渡しを簡単に行うことができます。

＜データの種類＞

・URLクエリー文字列のパラメータ

・HTML内のテキスト

・JavaScriptのオブジェクト

など

これらのデータの取得方法を記述したものを「データバインディングエクスプレッション」（DBE）と呼びます。

ヒント
DBEは「データバインディング」を構成する要素の1つです。データバインディングの詳細やDBEの設定手順については、以下のページを参照してください。

「データバインディング」の作成

DBEには複数の記述方法があります。各記述方法については以下をご確認ください。

・URLのパラメータからデータを取得する

・JavaScriptのオブジェクトやデータレイヤーからデータを取得する

・CSSセレクタを用いてデータを取得する

・ファーストパーティークッキーからデータを取得する

・固定値を取得する

・JavaScriptを利用したデータの正規化する
 
■URLのパラメータからデータを取得する

URLの「?」以降に記述されているデータを「パラメータ」と呼びます。複数のパラメータが存在する際は「&」で結合します。

パラメータからデータを取得する場合は、Yahoo!タグマネージャーが標準で定義している関数「bt_parameter()」を使用します。

以下の例のように、関数の値としてパラメータ名を指定することで、そのパラメータに設定された値を戻り値として取得できます。




URLの例
DBEの記述
戻り値


http://www.example.com/product.do?pid=3333&cat=9999
bt_parameter('pid')
3333


http://www.example.com/product.do?pid=3333&cat=9999
bt_parameter('cat')
9999




 
■JavaScriptのオブジェクトやデータレイヤーからデータを取得する

構造化されているデータをページ内に埋め込む場合は、JavaScriptのオブジェクトやデータレイヤーの利用をおすすめします。

ショッピングカートにある商品や実際に注文された商品など、繰り返し取得するデータに対し有効です。

以下の例のように、オブジェクト名を記述するだけで設定できます。




ソースコードの例
DBEの記述
戻り値


var firstVariable = "My First Value";
firstVariable
"My First Value"


var secondVariable = "My Second Value";
secondVariable
"My Second Value"




 
■CSSセレクタを用いてデータを取得する

HTMLの要素（要素名やクラス、ID、インナーテキストを含む）を取得するには、JavaScriptを使用します。

以下の例のように、取得する要素をjQueryのセレクタで指定することをおすすめします。




ソースコードの例
DBEの記述
戻り値




<div id="productDetails">

<div class="title">サングラス</div>

<div class="pid">39528</div>

<div class="price">¥5000</div>

</div>
jQuery(‘#productDetails .title’).text()
"サングラス"


jQuery(‘#productDetails .pid’).text()
"39528"


jQuery(‘#productDetails .price’).text().replace(‘¥’, ‘’)
"5000"




 
 

ヒント
jQueryは、現在多くのウェブサイトで採用されているJavaScriptのライブラリです。

 
■ファーストパーティークッキーからデータを取得する

ファーストパーティークッキーからデータを取得するには、Yahoo!タグマネージャーが標準で定義している関数「bt_cookie()」を使用します。




Cookieの例
DBEの記述
戻り値


country=JP;ABtest=A;visitor_id=337788
bt_cookie(‘country’)
"JP"


bt_cookie(‘ABtest’)
"A"


bt_cookie(‘visitor_id’)
"337788"




 
■固定値を取得する

例えば、URLパターンに対してページIDなどの固定値を取得する場合などに、データバインディングを利用して簡単に設定できます。

DBEに渡す値を引用符で囲い、記述してください。




ページ指定の例
DBEの記述
戻り値


**/home.html
“Homepage”
“Homepage”


**/thank-you.html
“Order Confirmation”
“Order Confirmation”





ヒント
引用符は、シングルクォーテーション・ダブルクォーテーションのどちらでも設定できます。

 
■JavaScriptを利用したデータの正規化

特定のフォーマットで値を渡すように要求される場合は、DBEの中にJavaScriptのコードを書くことにより、データを適切なフォーマットに加工し、データエレメントに送ることができます。




ソースコードの例
DBEの記述
戻り値


var pageData = {

"items" : [

{"sku" : "6066", "name" : "Waxy Candle"};

{"sku" : "4878", "name" : "Shiny Gloss"};

{"sku" : "2992", "name" : "Fancy Pants"};

]

};
(function(){

var skus =[]

var items =

pageData.items;

for (var

i=0; i<items.length;i++){

products.push(items[i].

sku);

}

products =

products.join(‘|’);

return products;

})();
"6066|4878|2992"


<div id="productDetails">

<div class="pid">6066</div>

<div class="name">Waxy Candle</div>

</div>

<div id="productDetails">

<div class="pid">4878</div>

<div class="name">Shiny Gloss</div>

</div>

<div id="productDetails">

<div class="pid">2992</div>

<div class="name">Fancy Pants</div>

</div>
var skus =[]

jQuery(‘#productDetails .pid’).each(

skus.push(jQuery(this).text()

return skusjoin(‘|’);

})();
"6066|4878|2992"


memberLevel = "silv555"
(function(){

var matchTable = []

‘none333’ : ‘Not a Member’,

‘silv555’ : ‘Silver’,

‘gold666’ : ‘Gold’,

‘plat777’ : ‘Platinum’}

return

table[memberLevel];

})();
"Silver"





ヒント
データバインディングの設定に関するサポートは、「ベーシックサポート」（有償）にて承ります。詳細は、「サポート - Yahoo!タグマネージャー」を参照してください。