Google Ads için dinamik reklamlarda bir galeri içinde birden fazla öğe görüntüleme

Bu sayfada, Google Ads dinamik feed'inizdeki öğeleri görüntülemek için bir galeriyi nasıl kullanacağınız açıklanmaktadır. Galeri, her öğeyi sırayla otomatik olarak yükler, ayrıca etkin öğeyi de izler. Böylece, çıkış URL'si söz konusu öğeye özel bir web sayfasına yönlendirme yapar.

Şablon kullanma

Şablon Galerisi'nin Dynamic Remarketing for Google Ads kategorisindeki bir şablonu kullanırsanız ("Dinamik Yeniden Pazarlama Boş Seçenek Listesi" şablonu hariç) varsayılan düzeni kullandığınız sürece reklam öğeniz izleme uygular.

Ek dinamik öğeler eklerseniz veya reklam öğenizi "Dinamik Yeniden Pazarlama Boş Seçenek Listesi" şablonunu kullanarak en baştan tasarlarsanız bu sayfadaki talimatları uygulayın.

1. Adım. Öğe grubunu oluşturma

İzlemeyi basitleştirmek için, örneğin bir feed öğesinin başlığı, resmi ve fiyatı gibi aynı feed öğesiyle ilgili görüntülemek istediğiniz birden fazla öğeyi gruplandırmanız gerekir. Grup kullanmak, reklam öğenizin her bir bağımsız öğeyle etkileşimi izlemek yerine grupla etkileşimi izlemesine olanak tanır.

1. Tek bir öğe için yer tutucu öğeler oluşturun. Bu, örneğin, öğe adını ve öğenin bir resmini içerebilir.

   

2. Gruplayacağınız öğeleri seçin, seçimi sağ tıklayıp Grup oluştur'u tıklayarak bu öğelerle yeni bir grup oluşturun.

   

3. Bir grup adı girin ve Tamam'ı tıklayın.

Grup, gelecekte kullanılmak üzere Kitaplık öğesine otomatik olarak eklenir, ancak sahnedeki grup örneğini henüz silmeyin. Grup örneğini şimdilik kenara taşıyabilirsiniz.

2. Adım. Öğeleri bir galeride görüntüleme

Feed öğelerinizi görüntülemek için Kaydırılabilir Galeri veya Atlı Karınca Galeri bileşenini kullanabilirsiniz.

1. Galeriyi sahneye ekleyin.

2. Galerinin Özellikler panelinde, bir kimlik (örneğin, gwd-swipegallery_1) ayarlayın.

3. Gruplar özellik alanına, daha önce oluşturduğunuz grubun adını (örneğin, Group1) girin.

   

3. Adım. Dinamik bağlantı ekleme

Reklam öğesi öğelerini dinamik veri bağlamaları kullanarak feed'inizle bağlayın.

1. Dinamik Özellikler iletişim kutusunu açmak için Dinamik panelinde Dinamik bağlantı ekle düğmesini tıklayın.

2. Henüz bir veri şeması seçmediyseniz şemayı seçin.

3. Grup içindeki her bir öğe için bağımsız öğenin özelliğini ilgili veri şeması nesnesine bağlayın.

   

4. Galerideki grup için bir bağlama ekleyin ve ardından, Koleksiyondaki her öğe için tekrarla adlı öğe özelliğini seçin. Veri şeması nesnesini, veri şemanızla (Perakende veya Seyahat gibi) eşleşen üst düzey öğeye ayarlayın.

   

5. Kaydetmek için Tamam'ı tıklayın.

Artık grup örneğini sahneden silebilirsiniz.

4. Adım. Galeriye kullanıcı etkileşimi etkinlikleri ekleme

Reklam öğesinin etkin öğeyi takip edebilmesi için tüm öğelerin mouseover ve mouseout etkinliklerini içermesi gerekir.

1. Galeriyi sağ tıklayın ve yeni bir Fare > mouseover etkinliği eklemek için Etkinlik ekle...'yi seçin.

   

2. Özel > gwd.itemMouseover işlemini seçin, ardından Tamam'ı tıklayın.

   

3. Galerinin hedef olarak belirtildiği toplam 5 etkinlik için galeriye aşağıdaki ilave etkinlikleri ekleyin:

   Etkinlik	İşlem
   Fare > mouseover (önceki adımlarda eklenmişti)	Özel > gwd.ItemMouseover
   Fare > mouseout	Özel > gwd.ItemMouseout
   Fare > click	Özel > gwd.exitToItem
   Kaydırılabilir Galeri veya Atlı Karınca Galeri > Çerçeve etkinleştirilir	Özel > gwd.galleryFrameActivated
   Kaydırılabilir Galeri veya Atlı Karınca Galeri > Çerçeve gösterilir	Özel > gwd.galleryFrameShown

5. Adım Kod görünümünde düzenlemeler yapma

Galerinin işlevselliğini dinamik feed'inizle tamamlamak için Kod görünümü'ne geçerek kod üzerinde değişiklik yapın.

1. Kod görünümünde, galeri öğesinde iç içe yerleştirilmiş grup öğesini bulun. js-item sınıfını grup öğesine ekleyin.

   <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>

2. Yine Kod görünümünde, handleWebComponentsReady işlevini bulun. // karakterlerini kaldırarak common.setGallery işlevini çağıran satırın açıklamasını iptal edin, ardından swipegallery-items yerine galerinizin kimliğini (örneğin, gwd-swipegallery_1) yazın.

   /**
     * 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);
   }

Diğer adımlar

• Henüz yapmadıysanız dinamik veri feed'i oluşturmayı öğrenebilirsiniz.
• Nasıl görüneceğini görmek için reklam öğenizi örnek verilerle önizleyin.