ダイナミック クリエイティブを作成するには、テキスト、画像、動画を保持するクリエイティブ内の「コンテナ」に各種コンテンツ オプションのリスト（通常はスプレッドシートに保存されている）を接続します。この「コンテナ」とは、ほとんどが div などの HTML 要素です。
また、その他の情報をスプレッドシートからクリエイティブの変数に渡して、クリエイティブの表示を管理することもできます。たとえば、青、緑、紫の 3 つの色のテーマをスプレッドシートに保存し、ダイナミック プロフィールで設定したルールを使用して、いずれかの色を特定のユーザーに対して選択できます。広告の配信時には、このルールに従っていずれかの色のテーマがクリエイティブに渡され、その色のテーマに一致するコンテンツ コードがクリエイティブのコードに表示されます。
事前の準備
ダイナミック データをクリエイティブに接続するにあたり、広告の構成要素である見出しのコピー文、画像、その他のデザイン要素をプランするなどして、基本的なクリエイティブ構造をデザインする必要があります。
Google Web Designer を使用していない場合は、クリエイティブにスタジオ イネーブラーを含める必要があります。また、exit、カウンタ、タイマーを追跡するために必要なコードが追加されていることも必要です。詳しくは、Google の作成ガイドをご覧ください。
以下の手順では、他の HTML 編集ソフトウェアを使用してクリエイティブを作成する方法について説明します。
クリエイティブのダイナミック要素を特定する
クリエイティブのコンセプトを策定する際に、広告内で動的に変更する要素の種類や数を特定しておくことが必要です。こうした要素はダイナミック要素と呼ばれ、一般には主に以下のような要素が該当します。
- テキスト
- 画像
- exit URL
- 動画
ダイナミック マッピングを作成する
フィード コンテンツがクリエイティブ内にどのように挿入されるかを視覚化するために、ダイナミック マッピングを作成します。これは、どの要素がダイナミック要素であるかを明示した広告のモックアップです。たとえば下記のダイナミック マッピングでは、広告タイトルのテキスト、商品の画像、行動を促すフレーズ（CTA）、宣伝コピーをダイナミック要素としています。図の横には便利なメモもあります。
ステップ 1: スタジオの設定コードを貼り付ける
スタジオでプロフィールを設定した後、そのプロフィールを HTML5 クリエイティブにリンクしてダイナミック機能を作成する必要があります。そのためには、[ダイナミック コンテンツ] タブの「ステップ 4: コードの生成」で作成した設定コードをスタジオ内にコピーします。[HTML5] ボタンを選択し、生成された HTML5 コードをコピーしてクリエイティブに貼り付けます。
次の JavaScript コード例は、.html ファイル内でインラインで実行することも、別個の .js ファイルで実行することもできます。
「ステップ 4: コードの生成」の設定コード例<!-- DynamicContent の開始: HTML5 呼び出しコード。 -->// ダイナミック コンテンツの変数とサンプル値Enabler.setProfileId(12345);var devDynamicContent = {};devDynamicContent.SampleElement = [{}]; devDynamicContent.SampleElement[0]._id = 0;devDynamicContent.SampleElement[0].headline = "Some headline";devDynamicContent.SampleElement [0] IMAGE_URL = {}; devDynamicContent.SampleElement[0].image_url.Url ="http://yourServer/sample.jpg";devDynamicContent.SampleElement[0].landing_url = {};devDynamicContent.SampleElement[0].landing_url.Url ="http://www.yoursite.com";Enabler.setDevDynamicContent(devDynamicContent);
<!--
* 変数には次の方法で
* Studio Enabler の初期化後にアクセスできます:
* var price = dynamicContent.Product[0].price;
* 注: 「devDynamicContent」ではなく、「dynamicContent」を必ず使用してください
-->
ステップ 2: ダイナミック データを接続する
テキスト、画像、exit URL など、クリエイティブ内の個々の要素にダイナミック データを接続するためのコードを追加します。コードの追加は必ずイネーブラーの初期化後に行ってください。
ダイナミック データにアクセスするコードを作成する場合は、上記の設定コードや次の例のように、dynamicContent を使用し、devDynamicContent は使用しないでください。
例: ダイナミック テキストを設定する
document.getElementById('headline').innerHTML =
dynamicContent.SampleElement[0].headline;
例: ダイナミック画像を設定する
document.getElementById('background').src =
dynamicContent.SampleElement[0].image_url.URL
例: ダイナミック クリックスルー URL を設定する
document.getElementById('cta').addEventListener('click', ctaHandler);
function ctaHandler() {
Enabler.exitOverride(
"yourExitID",
dynamicContent.SampleElement[0].landing_url.Url);
}
例:
var data = {};
data.headline = dynamicContent.SampleElement[0].headline;
コードの後半:
document.getElementById('headline').innerHTML = data.headline;
ステップ 3: 各種のダイナミック値をテストする
クリエイティブをスタジオにアップロードする前に、ダイナミック コンテンツに対する各種の有効な値をテストする必要があります。フィード内でテストする値の範囲を確認します。たとえば、ダイナミック画像では各種の URL を確認し、テキスト、特に非常に長い（または短い）テキストのような「エッジケース」では各種の文字列を確認します。それぞれの値をクリエイティブ内の設定コードに組み込んで、その結果をプレビューします。こうすれば、QA まで待たずに事前に問題を検出できます。
また、開発値であることがはっきりとわかるように設定コードで値を変更することもできます。
<!-- DynamicContent の開始: HTML5 呼び出しコード。 -->
// ダイナミック コンテンツの変数とサンプル値
// ...
devDynamicContent.SampleElement[0].headline = "Default headline";
クリエイティブで「実際」のダイナミック データを使わずに、設定コードの開発値を使えば、ダイナミック プレビュー（またはライブタグ）でクリエイティブを表示した場合によくわかります。