Yahoo!広告

Yahoo!広告ヘルプ

「データバインディングエクスプレッション(DBE)」の作成

ウェブサイト上に存在するさまざまな種類のデータを「データディクショナリー」として設定しておくことで、ウェブサイトのすべてのサービスタグに対し、データの受け渡しを簡単に行うことができます。
<データの種類>
・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!タグマネージャー」を参照してください。