Google 広告のダイナミック広告にギャラリー内の複数のアイテムを表示する

このページでは、ギャラリーを使用して Google 広告のダイナミックフィードからアイテムを表示する方法について説明します。ギャラリーは各アイテムを順次自動的に読み込み、またアクティブなアイテムをトラッキングして、exit URL がそのアイテムに固有のウェブページを指すようにします。

テンプレートの使用

テンプレートギャラリーの Dynamic Remarketing for Google Ads カテゴリにあるテンプレート（「Dynamic Remarketing Blank Slate」テンプレートを除く）でデフォルトのレイアウトを使用している場合、クリエイティブにはトラッキングがすでに実装されています。

ダイナミック要素を追加する場合や、「Dynamic Remarketing Blank Slate」テンプレートを使用してクリエイティブを一から作成する場合は、このページの手順に沿って操作してください。

ステップ 1. 商品アイテムグループを設定する

トラッキングを簡略化するため、1 つのフィードアイテムに表示する複数の要素（同じアイテムのタイトル、画像、価格など）をグループ化する必要があります。グループを使用すると、クリエイティブは個々の要素のインタラクションをトラッキングするのではなく、グループのインタラクションをトラッキングできます。

単一のアイテムにプレースホルダ要素を作成します。たとえば、アイテム名やそのアイテムの画像などを含めることができます。
複数の要素を選択して右クリックし、[グループを作成...] をクリックして、これらの要素を含む新しいグループを作成します。
グループ名を入力し、[OK] をクリックします。

グループは後で使用できるように自動的にライブラリに追加されますが、ステージ上のグループインスタンスはまだ削除しないでください。現時点では、そのままにしておきます。

ステップ 2. アイテムをギャラリーに表示する

スワイプギャラリーまたはカルーセルギャラリーコンポーネントを使用して、フィードアイテムを表示できます。

ステージにギャラリーを追加します。
ギャラリーの [プロパティ] パネルで、ID を設定します（例: gwd-swipegallery_1）。
[グループ] プロパティフィールドに、前に作成したグループの名前を入力します（例: Group1）。

ステップ 3. ダイナミックバインディングを追加する

動的データバインディングで、クリエイティブ要素をフィードに接続します。

[ダイナミック] パネルで、「ダイナミックバインディングを追加します」ボタンをクリックします。
まだデータスキーマを選択していない場合は、スキーマを選択します。
グループ内の各要素について、個々の要素の属性を、対応するデータスキーマオブジェクトにバインドします。
ギャラリー内のグループのバインディングを追加し、要素属性 [コレクション内の各アイテムを繰り返す] を選択します。データスキーマオブジェクトを、データスキーマに一致する最上位アイテム（小売、旅行など）に設定します。
[OK] をクリックして保存します。

これで、ステージからグループインスタンスを削除できるようになりました。

ステップ 4. ユーザーインタラクションイベントをギャラリーに追加する

クリエイティブがアクティブなアイテムをトラッキングできるように、すべてのアイテムに mouseover と mouseout のイベントが含まれている必要があります。

ギャラリーを右クリックし、[イベントを追加...] を選択して、[マウス] > [mouseover] イベントを新規追加します。
[カスタム] > [gwd.itemMouseover] アクションを選択し、[OK] をクリックします。

次のイベントをギャラリーに追加します（ギャラリーをターゲットとして合計 5 つのイベント）。

イベント	アクション
[マウス] > [mouseover]（前のステップで追加）	[カスタム] > [gwd.ItemMouseover]
[マウス] > [mouseout]	[カスタム] > [gwd.ItemMouseout]
[マウス] > [クリック]	[カスタム] > [gwd.exitToItem]
[スワイプギャラリー] または [カルーセルギャラリー] > [フレーム有効化]	[カスタム] > [gwd.galleryFrameActivated]
[スワイプギャラリー] または [カルーセルギャラリー] > [フレームの表示]	[カスタム] > [gwd.galleryFrameShown]

ステップ 5. コードビューで編集する

コードビューに切り替えてコードを変更し、ダイナミックフィードでギャラリーの機能を完成させます。

コードビューで、ギャラリー要素にネストされたグループ要素を見つけます。グループ要素にクラス js-item を追加します。

<gwd-swipegallery id="gwd-swipegallery_1" scaling="contain" pause-front-media="" resume-next-media="" class="gwd-swipegallery-19o0" groups="Group1">
  <div class="js-item" data-gwd-group="Group1" id="Group1_1" style="height: 100%; width: 100%;" bind-each-item="Product"></div>
</gwd-swipegallery>

コードビューを表示したまま、handleWebComponentsReady 関数を見つけます。// 文字を削除して、common.setGallery 関数を呼び出す行をコメント化解除します。次に、swipegallery-items をギャラリーの ID に置き換えます（例: gwd-swipegallery_1）。

/**
  * Handles the WebComponentsReady event. This event is fired when all
  * custom elements have been registered and upgraded.
  */
function handleWebComponentsReady(event) {
  // Start the Ad lifecycle.
  setTimeout(function() {
    // add reference to your swipegallery to access via custom JS, passing in its ID:
    //common.setGallery('swipegallery-items');

    gwdAd.initAd();
  }, 0);
}

その他の手順

まだであれば、動的データフィードの作成方法をご確認ください。
サンプルデータを使用してクリエイティブをプレビューし、どのように表示されるか確認します。

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。