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

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

* [前提条件](/ja/products/customer-data-platform/audience-studio/profiles/integrate-td-profiles-api-with-google-dfp-doubleclick-for-publishers#prerequisites)
* [TD Profiles APIとGoogle DFPの統合](/ja/products/customer-data-platform/audience-studio/profiles/integrate-td-profiles-api-with-google-dfp-doubleclick-for-publishers#integrating-td-profiles-api-with-google-dfp)
* [TD Profile APIで使用するためのGoogle DFPの設定](/ja/products/customer-data-platform/audience-studio/profiles/integrate-td-profiles-api-with-google-dfp-doubleclick-for-publishers#integrating-td-profiles-api-with-google-dfp)
* [JavaScript DFPタグとTreasure Dataタグの作成](/ja/products/customer-data-platform/audience-studio/profiles/integrate-td-profiles-api-with-google-dfp-doubleclick-for-publishers#create-javascript-dfp-and-treasure-data-tags)


# 前提条件

* 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の設定](/ja/products/customer-data-platform/audience-studio/profiles/integrate-td-profiles-api-with-google-dfp-doubleclick-for-publishers#configure-google-dfp-for-use-with-the-td-profile-api)
* [JavaScript DFPタグとTreasure Dataタグの作成](/ja/products/customer-data-platform/audience-studio/profiles/integrate-td-profiles-api-with-google-dfp-doubleclick-for-publishers#create-javascript-dfp-and-treasure-data-tags)


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

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


![](/assets/image-20190817-005708.9caf71ecf421c74fe5ce429e2d969ff9de4c37c2c0936972a00f69651f6be527.cf3845cb.png)

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


![](/assets/image-20190817-005818.47386a6b5f18be7aba01eaa7dfd69765c3c421ea75e84a5e2004e5debc278637.cf3845cb.png)

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


![](/assets/image-20190817-005915.1e9c6c7dbf16602d95d6248f7891e7a0d52ea4ab6d3a656320430d6d7c29491f.cf3845cb.png)

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


![](/assets/image-20190817-010000.34f47caab6ff96b4c23acceef14349d2b83dc28c006960bc2d3ed585735e4263.cf3845cb.png)

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


![](/assets/image-20190817-010148.7813a892ab085eda685d31b6eaa986e2ee70563add103d2af256a5d16ed7a925.cf3845cb.png)

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


![](/assets/image-20190817-010418.dd6184319971de6160b9f1bd3e1a172f8481832223dc44d1d1f46ccfb0023363.cf3845cb.png)

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


![](/assets/image-20190817-010509.30703d5f0a3c29b020335f94a845d2c7aee61202cda51e19a85543b2a6fbff52.cf3845cb.png)

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


![](/assets/image-20190817-010551.c63e2dc0750e6c64133a436e5f7398a84b706d9596adaf3102b12ecc815f98c6.cf3845cb.png)

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


![](/assets/image-20190817-010637.6b9f71e14a56400e8a4479389b1823ab6cc45a0934af15b6c4d0d4a4d9672c8e.cf3845cb.png)

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


![](/assets/image-20190817-010727.db4a563ca99cc444be07e8ec62ba752f631472c9610bc84c5f5661e4ec0f0557.cf3845cb.png)

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


![](/assets/image-20190817-010829.2bd49e3936f50d4b9779bbe0bdfbded30e260a0c94484b7a818d0e11fcb415a7.cf3845cb.png)

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


![](/assets/image-20190817-010915.c175a1bf871cd9d93255f50dfeb722878c4814b4ae105dff5635d1e8d226affa.cf3845cb.png)

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


![](/assets/image-20191204-022437.44adf1069dd7bbe5307f06fc5bff8d42bc39dbdf04d6425bff485a8806ba0096.cf3845cb.png)

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

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

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


![](/assets/image-20190817-011046.27d2ee6034adbc0fd6bde98673dafa8f18413424e92946eb779581b9140b2809.cf3845cb.png)

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


![](/assets/image-20190817-011142.727e1f8bc6d676624dc1e1d465236ca05364172fc0d14b1be75266b4de9bb595.cf3845cb.png)

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


![](/assets/image-20191209-221112.81199d3a270674952c0267b946f3465606f1541dc2e8efbb7b6efd2f6db374b4.cf3845cb.png)

1. 作業を保存します。


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

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


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


```html
<!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にアクセスして結果を確認します。

![](/assets/image-20191204-022522.638a506e9fb9031144c9f8d5ceeb325c05a08c460d82e5b2e2b31d3e79f0afd8.cf3845cb.png)