データドリブン クリエイティブの作成にあたっては、組み込みのクリエイティブ フォーマットを使用する方法と、独自のカスタム フォーマットを作成して広告キャンバスで使用できるようにする方法があります。クリエイティブを細かく管理したい場合や、厳密なブランド ガイドラインがある場合は、カスタム フォーマットが適しています。カスタム フォーマットは、Google Web Designer でダイナミック バインディングを使用して作成できます。組み込みのフォーマットをもとにカスタマイズして、手間を軽減することもできます。
カスタム フォーマットは、固定のサイズまたはレスポンシブのどちらでも作成できます。
作成したカスタム フォーマットは、アップロードして、新しいデータドリブン クリエイティブの作成に使用したり、既存のデータドリブン クリエイティブの組み込みのフォーマットと置き換えたりできます。最後に、アセットやその他のクリエイティブの詳細を入力したら、新しいクリエイティブは完成です。
制限事項
- データドリブン クリエイティブのカスタム フォーマットでサポートされているのは動的 URL のみです。カスタム フォーマットを広告キャンバスで使用するには、タップ領域コンポーネントを使って個々の exit URL を URL データ オブジェクトにバインドする必要があります。
- カスタム フォーマットのクリエイティブ タイプは、ディスプレイ＆ビデオ 360 でサポートされているリッチメディア クリエイティブ タイプのみになります（注: インタースティシャル、エキスパンド クリエイティブ、その他のサポートされていないフォーマットにはなりません）。
- Google Web Designer の「抜き出して結合」機能は、広告キャンバスではまだサポートされていません。カルーセル ギャラリーやスワイプ ギャラリーのデータ バインディングに「抜き出して結合」機能や「抜き出して結合した URL」を使用して作成したカスタム フォーマットは、広告キャンバスでは使用できません。
- カスタム形式の動画ファイルはサポートされていません。
ステップ 1: クリエイティブの動的な要素をデータスキーマにマッピングする
カスタム フォーマットを作成するには、まず広告キャンバスで編集できるようにする動的なクリエイティブ要素を決めて、これらをブランド認知度スキーマにバインドします。編集しないクリエイティブ要素にはバインディングを追加しないでください。
- スキーマを確認し、クリエイティブ要素をマッピングするデータスキーマ オブジェクトを決めます。
- 動的な要素のリストを作成し、各要素の横にバインドするデータスキーマ オブジェクトを書いておきます。データスキーマ オブジェクトは、各要素と同じフィールド タイプのものを選びます。たとえば、画像を動的な要素にする場合は、画像アセット（アクセント画像、ロゴ、背景画像）にバインドします。
このフォーマットを使用して新しいクリエイティブを作成すると、マッピングした動的な要素のみが広告キャンバスのアセットパネルで編集可能になります。たとえば、広告キャンバスでクリエイティブの広告見出しのみを編集できるようにする場合は、Google Web Designer で広告見出しのテキスト フィールドをブランド認知度スキーマの「広告見出し」オブジェクトとバインドします。このフォーマットからクリエイティブを作成すると、[テキスト] パネルに [広告見出し] フィールドのみが表示されます。それ以外のクリエイティブ要素は編集できません。
ブランド認知度スキーマ| 広告キャンバスのラベル | フィールド タイプ | データスキーマ オブジェクト | 数値 |
|---|---|---|---|
| 画像アセット | |||
| アクセント画像 | 画像 * | accentImage | 1～10 の配列 |
| ロゴ | 画像 * | logo | 1 |
| 背景画像 | 画像 * | backgroundImage | 1 |
| テキスト アセット | |||
| タイトル | テキスト | title | 1 |
| サブタイトル | テキスト | subtitle | 1 |
| 広告見出し | リッチテキスト * | headline | 1 |
| 説明 | リッチテキスト * | description | 1～10 の配列 |
| 追加テキスト | リッチテキスト * | additionalText | 1～10 の配列 |
| キャッチフレーズ | リッチテキスト * | tagline | 1 |
| ティーザー テキスト | リッチテキスト * | teaserText | 1 |
| 行動を促すフレーズ | <container> | callToAction | 1～10 の配列 |
| 色 | callToAction.0.buttonColor | 1 | |
| コンテンツ | リッチテキスト * | callToAction.0.content | 1 |
| URL ランディング ページ | URL | callToAction.0.exitUrl | 1 |
| スタイル | |||
| 背景色 | 色 | backgroundColor | 1 |
| メインの色 | 色 | primaryStyle.color | 1 |
| サブの色 | 色 | secondaryStyle.color | 1 |
| その他 | |||
| 背景の URL ランディング ページ | URL | backgroundLandingPageUrl | 1 |
* これらのフィールドにはサブフィールドが含まれます。詳しくは、サブフィールド タイプをご覧ください。
サブフィールド タイプ
一部のフィールド タイプには、クリエイティブの HTML 要素にバインドできる追加のサブプロパティが含まれています。たとえば、クリエイティブの画像要素をブランド認知度スキーマの背景画像にバインドするには、次のようなダイナミック バインディングを追加します。imageElementID > Source > backgroundImage.Url
| サブフィールド タイプ | データスキーマ オブジェクト |
|---|---|
| 画像 | |
| URL | .Url |
| リッチテキスト | |
| テキスト | .text |
| 色 | .style.color |
行動を促すフレーズ
callToAction オブジェクトは配列で、行動を促す一意のフレーズを 10 個まで含めることができます。それぞれのフレーズには独自の URL、テキスト、色を指定します。
ステップ 2: クリエイティブを作成する
マッピングが終わったら、Google Web Designer でクリエイティブを作成します。クリエイティブは、最初から自分で作成するか、データドリブン クリエイティブ テンプレート（ブランク スレート、キューカード、パノラマ）を使用して作成することができます。既存のデータドリブン クリエイティブ テンプレートを使用すると、ダイナミック バインディングがすでに設定されているので、手間が省けます。
Google Web Designer でレスポンシブ クリエイティブを作成する方法
Build responsive ads in Google Web Designer
データスキーマを選択する
クリエイティブのレイアウトが完成したら、上記で作成したマッピングを使用して、クリエイティブの動的な要素をデータスキーマにリンクします。既存のデータドリブン レイアウトを使用する場合は、この手順を省略できます。
- [ダイナミック] パネルを開いて、ダイナミック バインディングを追加するアイコン
をクリックします（[ダイナミック] パネルが表示されない場合は、[ウィンドウ] メニューを開いて [ダイナミック] の横にチェックマークが付いていることを確認します）。
- [ダイナミック プロパティ] ダイアログの [データスキーマ] タブで、データスキーマのタイプとして [標準スキーマ] を選択します。
- データスキーマとして [ブランド認知度] を選択します。[バインディング] タブが表示されます。
をクリックします（[ダイナミック] パネルが表示されない場合は、[ウィンドウ] メニューを開いて [ダイナミック] の横にチェックマークが付いていることを確認します）。データスキーマを選択したら、表示される [バインディング] タブで最初のバインディングを設定します。
データ バインディングを作成する
クリエイティブを最初から自分で作成する場合やクリエイティブに動的な要素を新たに追加する場合は、[ダイナミック プロパティ] パネルで要素属性と特定タイプのデータとの間にデータ バインディングを作成します。[ダイナミック プロパティ] パネルでは、クリエイティブ要素、動的に変化させる要素属性、要素をバインドするデータスキーマ オブジェクトをインタラクティブに選択できます。
- （省略可）表示する要素を絞り込むには、[表示] メニューで [現在のページ] または [選択範囲] を選びます。
- [要素] 列で、フィードデータをバインドする要素を選択します。
- [要素の属性] 列で、フィードデータをバインドする要素属性を選択します。選択した要素に応じて、バインド可能なすべての要素属性（スタイル属性や HTML 要素タイプに固有の属性など）がプルダウン リストに表示されます。
- [データスキーマ オブジェクト] 列で、データ オブジェクトを選択します。
- 広告の他の要素にデータをバインドする場合は [バインディングを追加] をクリックします。終了する場合は [OK] をクリックします。
Google Web Designer でデータ バインディングを追加または削除する方法について
行動を促す動的なフレーズを作成する
Google Web Designer のタップ領域コンポーネントを使うと、ほとんどの操作をタップやクリックで始められるようになります。よくある用途としては、行動を促すフレーズの作成があります。通常、行動を促すフレーズはウェブサイトの特定のページにリンクされますが、データドリブン クリエイティブではダイナミック バインディングを使用して、オーディエンス セグメントごとに異なるリンクを設定できます。
- [ダイナミック] パネルの [バインディング] タブで、ダイナミック バインディングを追加します
- [ダイナミック プロパティ] ダイアログの [バインディング] タブで [バインディングを追加] をクリックします。
- [要素] で行動を促すフレーズのタップ領域を選択します。
- [要素の属性] で、[exit オーバーライド URL] を選択します。
- [データスキーマ オブジェクト] で、動的 URL データ（たとえば [商品 0] > [URL]）を選択します。
- 動的な exit を正確に記録するには、背景の exit または行動を促すフレーズの exit の指標 ID を追加します。これらの指標 ID は、キャンペーンのレポートとディスプレイ＆ビデオ 360 のクリエイティブの詳細にイベントの名前として表示されます。クリックによってどのようなイベントがトリガーされたかわかるような名前にしてください。
- コードビューに切り替えて、タップ領域のコード（
<gwd-tapareaで始まる部分）に移動します。 <gwd-taparea>タグにexit-idプロパティを追加します。exit-idプロパティにはbackgroundExitかctaExitのいずれかの値を設定してください。
- コードビューに切り替えて、タップ領域のコード（
例
<gwd-taparea id="cta-taparea" exit-id="ctaExit" class="gwd-taparea-ismw" bind-exit-override-url="callToAction.0.exitUrl" bind-style-background-color="callToAction.0.buttonColor" bind-show="callToAction.0.content.text"></gwd-taparea>省略可: フィードを使用して動的なプレビューを作成する
Google Web Designer でダイナミック フォーマットをプレビューする際、デフォルトではデザインどおりのフォーマット、つまりプレースホルダの画像やテキストなどの要素のみが表示されます。ダイナミック フィードで指定される実際のコンテンツによって、フォーマットがどのように表示されるかを確認するには、Web Designer プロジェクトの「feeds」フォルダにサンプル フィード（複数可）を追加する必要があります。
サンプル フィードとして使用できるのは、デザインや商品に固有のテキストや画像などのフィード情報を格納した JSON ドキュメントです。まず、こちらのサンプル フィードをダウンロードします。
サンプル フィードを読み込むには:
- [ダイナミック] パネルを開き、[サンプルデータ] タブをクリックします。パネルの下部で、サンプルデータをインポートします
-
または、ダウンロードした .json ファイルを Google Web Designer プロジェクトの feeds サブフォルダに移動します。[ダイナミック] パネルで更新
をクリックすると、Web Designer に新しいサンプルデータが表示されます。
をクリックすると、Web Designer に新しいサンプルデータが表示されます。ステージでサンプル フィードデータをプレビューするには、[ダイナミック] パネルの [サンプルデータ] タブで、追加したフィード名を選択します。
ブラウザでプレビューする場合は、ページの上部にある [サンプルデータ] メニューで、プレビューするサンプル フィードを選択できます（デフォルトでは、使用可能なすべてのサンプル フィードのプレビューが個別に表示されます。プレビューしないフィードを非表示にするには、[サンプルデータ] メニューでオフにします）。
次のステップ
カスタム フォーマットの作成とテストが終わったら、ディスプレイ＆ビデオ 360 にアップロードします。
