「データバインディングエクスプレッション(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!タグマネージャー」を参照してください。