Skip to content
Last updated

Google DFP DoubleClick for PublishersでProfiles APIを使用する

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)の基本知識

Profiles APIトークンの作成

新しいトークンに名前を付ける

  1. TD Consoleを開きます。
  2. Audience Studioに移動してセグメントを選択します。
  3. フォルダーを選択します。
  4. 新規作成を選択します。
  5. Profiles APIトークンを選択します。

  1. トークンの名前を入力し、オプションで説明を入力します。次へを選択します。

トークンの設定

名前と説明は、トークンに名前を付けたときのものが引き継がれます。変更することもできます。

  1. ルックアップキーを入力します。

ルックアップキーは、ペアレントセグメント内の一意の値を持つカラムです。このルックアップキーは正しいプロファイルを識別します。

Note

注: ルックアップキーの更新は、トークンワークフローが完了すると有効になります。

td_global_idをルックアップキーとして使用する場合、Profiles APIはAPIリクエストのクエリパラメータではなく、ブラウザのCookieからルックアップ値を取得します。ブラウザ外でのテストまたは検証の目的(例: Postman)では、異なるカラムを使用してルックアップ値を手動で渡してください。

  1. (オプション)最大5つの属性を入力します。 プロファイル属性は、クエリ時にプロファイルトークンから返すことができます

  2. 以下のいずれかを選択します:

    • 次へを選択して続行し、セグメントを追加します。
    • 作成を選択してトークンを設定します。(後でセグメントを追加することもできます。)

トークンへのセグメント追加

  1. 以下のいずれかを選択します:
  • トークンの設定後、次へを選択します。
  • Audience Studio > フォルダー > Profiles APIトークンに移動します。
  1. Profiles APIトークンにセグメントを追加します。

  2. 保存を選択します。

Profiles APIトークンとGoogle DFPの統合

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

Profiles APIトークンで使用するGoogle DFPの設定

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

  1. New Keyを選択します。
  2. NameとDisplay nameフィールドを入力します。

  1. Add Valuesを選択します。
  2. すべてのTreasure DataセグメントIDを1行ずつリストします。例: 257, 258, 259。

  1. Applyを選択します。
  2. オプションで、特定のセグメントIDにDisplay nameを追加します。

  1. Inventory > Ad unitsを選択します。
  2. Ad Unitを選択します。
  3. CodeとNameフィールドを入力します。

  1. Saveを選択します。
  2. Delivery > Ordersを選択します。
  3. New Orderを選択して新しいオーダーを作成します。

  1. フィールドを編集します。例: Name、Advertiser、Start time、End time、Quantity、Rate。

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

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

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

  1. Delivery > Line itemsに移動してクリエイティブを登録します。
  2. Add Creativesを選択します。

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

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

JavaScript DFPとTreasure Dataタグの作成

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

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

  1. Tag TypeとしてGoogle Publisher Tagを選択します。

  1. Continueを選択します。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タグ間の統合コードが含まれています。

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