このページでは、ギャラリーを使用して 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); }
その他の手順
- まだであれば、動的データフィードの作成方法をご確認ください。
- サンプルデータを使用してクリエイティブをプレビューし、どのように表示されるか確認します。