Skip to content
Products
/
/
/
TD Profiles APIとGoogle DF...
Last updated

TD Profiles APIとGoogle DFP（DoubleClick for Publishers）の統合

Treasure DataのProfiles APIをGoogle DFP（DoubleClick for Publishers）と統合できます。この統合により、広告主はTreasure Dataで定義したセグメントに広告を配信できます。

前提条件

  • JavaScriptとHTMLの基本知識

  • Treasure Dataの基本知識

  • Treasure Data JavaScript SDKの基本知識

  • Treasure Data Profiles APIの基本知識

  • Google DFP（DoubleClick for Publishers）の基本知識

Treasure Data JavaScript SDKの使用には、Treasure Dataのサポートまたはサービスチームの指導が必要な場合があります。

TD Profiles APIとGoogle DFPの統合

TD Profiles APIをGoogle DFPと統合するには、以下のセクションの手順を完了してください。

TD Profile APIで使用するためのGoogle DFPの設定

  1. WebブラウザでGoogle DFPに移動します。
  2. Inventory > Key-valuesに移動します。

  1. 新しいキーを選択します。
  2. 名前と表示名フィールドに入力します。

  1. 値の追加を選択します。
  2. Treasure Dataで作成したすべてのセグメントIDを1行ずつリストします。例：257、258、259。

  1. 適用を選択します。
  2. オプションで、特定のセグメントIDに表示名を追加します。

  1. Inventory > Ad unitsを選択します。
  2. コードと名前フィールドに入力します。

  1. 保存を選択します。
  2. 保存を選択します。
  3. Delivery > Ordersを選択します。
  4. 新しい注文を選択して新しい注文を作成します。

  1. フィールドを編集します。例：名前、広告主、名前、開始時刻、終了時刻、数量、レート。

  1. 下にスクロールしてKey-valuesセクションを見つけます。
  2. 作成したキー値を指定します。例：td_kv_wp。

  1. 作成したセグメントIDのリストを選択します。例：

  1. Inventoryを選択します。
  2. 作成した広告ユニットを選択します。例：td-dfp-test-ad。注文オブジェクトが作成されます。例：

  1. Delivery > Line Itemsに移動して、クリエイティブを登録します。
  2. クリエイティブの追加を選択します。

  1. 作成するクリエイティブタイプを選択します。例：画像クリエイティブ。

  1. 名前と宛先を指定します。
  2. クリエイティブの画像ファイルをアップロードします。
  3. 宛先を指定します。例：https://www.treasuredata.com/。

JavaScript DFPタグとTreasure Dataタグの作成

Google DFPのJavaScriptタグを生成するには：

  1. WebブラウザでGoogle DFPに移動します。
  2. Inventory > Ad unitsに移動します。
  3. タグの生成を選択します。
  4. 作成した広告ユニットを選択します。例：td-dfp-test-ad。

  1. タグタイプとしてGoogle Publisher Tagを選択します。

  1. 続行を選択します。HTMLヘッダーとボディ用のJavaScriptタグが生成されます。

  1. 作業を保存します。

DFPタグとTreasure Data JavaScriptタグを組み合わせるには：

  1. Treasure Data JavaScriptタグとDFPタグを組み合わせるファイルを開きます。
  2. googletag.pubads().setTargeting()関数を呼び出して、Treasure DataのセグメントIDをGoogle DFPに渡します。

例えば、以下のHTMLには、DFP JavaScriptタグとTD JavaScriptタグの統合コードが含まれています。

<!DOCTYPE html><html>
<head>

<!-- Load DFP Tag -->
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

<!-- Load Treasure Data Tag -->
<script type="text/javascript">
!function(t,e){if(void 0===e[t]){e[t]=function(){e[t].clients.push(this),this._init=[Array.prototype.slice.call(arguments)]},e[t].clients=[];for(var r=function(t){return function(){return this["_"+t]=this["_"+t]||[],this["_"+t].push(Array.prototype.slice.call(arguments)),this}},s=["addRecord","set","trackEvent","trackPageview","trackClicks","ready","fetchGlobalID","fetchUserSegments"],a=0;a<s.length;a++){var c=s[a];e[t].prototype[c]=r(c)}var n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.treasuredata.com/sdk/2.1/td.min.js";var i=document.getElementsByTagName("script")[0];i.parentNode.insertBefore(n,i)}}("Treasure",this);
</script>

<!-- Header Script Tag: Start-->
<script>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

var td = new Treasure({...})
var successCallback = function (values) {  var segIdAll = [];  for (var i = 0; i < values.length; i++) {    segIdAll = segIdAll.concat(values[i].values);  };  var segId = segIdAll.filter(function (x,i,self) {return self.indexOf(x) === i;});  console.log(JSON.stringify(segId));  googletag.cmd.push(function() {     googletag.defineSlot('/YOUR_NUMBER_/td-dfp-test-ad', [200, 200], 'div-gpt-ad-YOUR-XYZ-0').addService(googletag.pubads());     googletag.pubads().enableSingleRequest();     googletag.pubads().setTargeting('td_kv_wp',segId);     googletag.enableServices();     googletag.cmd.push(function() { googletag.display('div-gpt-ad-XYZ-0')});   }); };
var errorCallback = function (error) { console.log(err); };

td.fetchUserSegments({
  audienceToken: ['YOUR_PROFILES_API_TOKEN_1', 'YOUR_PROFILES_API_TOKEN_2'],
  keys: {
    key_column_1: 'someValue',
    key_column_2: 'someOtherValue',
  }
}, successCallback, errorCallback)

</script>
<!-- Header Script Tag: End -->
</head>

<title>Web Profiles API</title>
<body>
<b>Hello Treasure Data!</b>

<!-- DFP Body Tag: Start -->
<div id='div-gpt-ad-YOUR-XYZ-0' style='height:200px; width:200px;'></div>
<!-- DFP Body Tag: End -->

</body>
</html>

テストするには、上記のHTMLにアクセスして結果を確認します。

Previous page
Next page