Google Web Designer ile genişleyen reklam öğesi oluşturma

Genişleyen reklamlar başlangıçta yayınlandıkları reklam alanıyla aynı boyutta olur. Daha sonra, kullanıcı etkileşimde bulunduğunda (örneğin, bir düğmeyi tıklayarak) reklam genişleyerek reklam alanından daha büyük hale gelir ve daha fazla içerik gösterir. Google Web Designer'da genişleyen reklam oluşturmaya boş bir dosyadan başlayın veya önceden oluşturulmuş bir genişletme şablonu açıp kendi kopyanızı, resimlerinizi ve diğer öğeleri ekleyin.

Sıfırdan başlama

1. Adım: Yeni bir dosya oluşturun

Google Web Designer'da video içeren yeni bir genişletilebilir reklam öğesi oluşturmak için:

1. Google Web Designer'ı açın ve Dosya > Yeni dosya'yı tıklayın. "Yeni boş dosya oluştur" penceresi görüntülenir.
2. Reklamlar listesinde Genişletilebilir'i seçin.
3. Ortam olarak Display & Video 360 seçeneğini belirleyin.
4. Reklamın daraltılmış ve genişletilmiş büyüklüklerine ilişkin boyutları ayarlayın.
5. Reklam öğesine bir ad verin. Bu, HTML dosyasının adıdır.
6. Google Web Designer dosyalarının bilgisayarınızda kaydedileceği Konum'u seçin. Konuma ilişkin yolu girin veya istediğiniz konuma gitmek için arama simgesini tıklayın.
7. Animasyon Modu'nu ayarlayın:
   1. Hızlı: Reklamınızı sahne sahne canlandırın. Daha fazla bilgi için Google Web Designer Yardım Merkezi'nde Hızlı modda animasyonlar oluşturma konusuna bakın.
   2. Gelişmiş: Bağımsız öğeleri kendi zaman çizelgelerinde canlandırın. Daha fazla bilgi için Google Web Designer Yardım Merkezi'nde Gelişmiş modda animasyonlar oluşturma konusuna bakın.
8. Tamam'ı tıklayın.

Google Web Designer, başlangıç olarak kullanılacak daraltılmış ve genişletilmiş sayfalarını oluşturur (bunlar Banner sayfası ve Genişletilmiş sayfa olarak adlandırılır). Daraltılmış sayfaya reklamı genişletecek bir hafifçe dokunma alanı etkinliğini ve genişletilmiş sayfaya, reklamı tekrar daraltmak için kapatma dokunma alanını otomatik olarak ekler. Reklamın, reklam sunucusuyla konuşması ve izleme metriklerini toplaması için gereken başlangıç kodu da otomatik olarak eklenir.

2. Adım: Banner sayfasını ayarlayın

Banner sayfasında daraltılmış reklamı ayarlamak için:

1. Resimleri sahneye doğrudan veya Öğe Kitaplığı panelinden sürükleyerek içe aktarın.
2. (İsteğe bağlı) Animasyonlar oluşturun veya sayfaya yerleşik ya da özel bileşenler ekleyin.
3. Banner'ınız tamamlandığında, Hafifçe Dokunma Alanı bileşenini seçin ve "En üste getir" düğmesini tıklayın.
4. Kaydedin.

Reklam öğesinin fareyle üzerine gelindiğinde genişletilmesini sağlamak için:

1. Etkinlikler panelini açın, fareyle üzerine gelme etkinliği eklemek için + düğmesini tıklayın.
2. Hedef olarak expand-button'ı seçin.
3. Etkinlik olarak Fare > mouseover'ı seçin.
4. İşlem olarak Google Reklamı > Sayfaya git'i seçin.
5. Alıcı olarak gwd-ad'i seçin.

Google Web Designer'da etkinlikleri kullanma hakkında daha fazla bilgi edinin

3. Adım: Genişletilmiş sayfayı ayarlayın

1. Sahnenin alt kısmındaki sayfa göstergesini kullanarak () Genişletilmiş sayfa'ya geçin.
2. Resimleri sahneye doğrudan veya Öğe Kitaplığı panelinden sürükleyerek içe aktarın.
3. (İsteğe bağlı) Animasyonlar oluşturun veya sayfaya yerleşik ya da özel bileşenler ekleyin.
4. Kaydedin.

Harekete geçirici mesaj ekleme

1. Reklamınızın, kullanıcının tıklaması veya dokunması için bir düğmesi ya da açıkça görülen başka bir harekete geçirici mesaj öğesi olduğundan emin olun.
2. Dokunma Alanı bileşenini Bileşenler bölmesinin Etkileşim klasöründen sahneye sürükleyin ve harekete geçirici mesajın üzerine konumlandırın.
3. Etkinlikler panelinde yeni etkinlik düğmesini  tıklayın.
4. Etkinlik iletişim kutusunda aşağıdaki seçenekleri belirleyin:

   Hedef	Dokunma Alanı bileşeni (gwd-taparea_1)
   Etkinlik	Dokunma Alanı > Dokunma/Tıklama
   İşlem	Google Reklamı > Reklamdan çık Not: Benzer bir işlem olan Reklamdan çık (URL'yi geçersiz kılar), Studio veya Campaign Manager 360'ta olduğu gibi URL'yi reklam öğesinin dışında değiştirmenize izin vermez ve yalnızca dinamik reklamlar için kullanılmalıdır.
   Alıcı	gwd-ad
   Yapılandırma	Metrik Kimliği - Raporları anlamayı kolaylaştırmak için bir etiket (ör. "CTA"). URL - Çıkış URL'si. Çıkışta daralt - Genişletilebilir reklamlarda, kullanıcı reklamı kapattığında reklamın daraltılması için işaretleyin. Çıkışta medyayı duraklat - Kullanıcı reklamı kapattığında video ve ses oynatımını durdurmak için işaretleyin. Çıkışta daraltılmış sayfa - Genişletilebilir reklamlarda, kullanıcı reklamı kapattığında gösterilecek sayfa.

   

İsteğe bağlı: Bir video ekleyin

Reklam öğenize video eklemek isterseniz Video bileşenini veya YouTube bileşenini kullanın. Videonuz YouTube'da barındırılıyorsa YouTube bileşenini kullanın. YouTube'da barındırılmıyorsa aşağıdaki uyumlu HTML5 video biçimleri için Video bileşenini kullanın: 

• .MP4
• .OGG/.OGV
• .WEBM

Şablondan başlama

Şablonlar, genellikle popüler stillerin ve özelliklerin kullanıldığı, popüler boyutlarda önceden hazırlanmış reklamlardır. Resimleri ve diğer öğeleri değiştirerek kullanışlı, çalışan bir reklamı hızlıca oluşturabilirsiniz.

1. Adım: Şablondan yeni bir dosya oluşturun

1. Dosya menüsünden Şablondan yeni'yi seçin. Şablon galerisi açılır.
2. Google Marketing Platform banner şablonlarını bulmak için:
   1. Ara'yı tıklayın.
   2. Reklam Türleri bölümünü genişletip Genişletilebilir'i seçin. 
   3. Platformlar bölümünü genişletip Display & Video 360'ı seçin.
   4. Filtreler panelini kapatın. Uyumlu düzenlerin bir listesi görüntülenir.
3. İstediğiniz düzen için Düzen Kullan'ı tıklayın.
4. Farklı boyut seçenekleri varsa istediğiniz boyutu seçin.
5. Yeni dosyanızı adlandırın (zorunlu)
6. İsterseniz dosyanın kaydedileceği yeri değiştirebilirsiniz. Yerin yolunu girebilir veya klasör simgesini tıklayarak kullanmak istediğiniz yere gidebilirsiniz.
7. Oluştur'u tıklayın.

2. Adım: Şablona resim ekleyin veya şablondaki resimleri değiştirin

Google Web Designer'ın genişleyen reklam şablonları, daraltılmış reklam olan bir Banner sayfasını ve genişletilmiş reklam olan bir Genişletilmiş sayfayı içerir. Varsayılan olarak, yeni dosyanızı oluştururken Banner sayfasını görürsünüz. Sahnenin alt kısmındaki sayfa göstergesini kullanarak () Genişletilmiş sayfa'ya geçin.

Her sayfa, her bir öğe için yer tutucu öğeler ve tanımlayıcı kimlikler içerir. Genel yer tutucu öğelerin her birini, reklamınız için uygun bir öğeyle değiştirerek başlayın. Şablonlardan oluşturulan reklamlar tamamıyla değiştirilebilir. Daha özelleştirilmiş bir reklam oluşturmak için öğe, bileşen ve etkinlikleri istediğiniz gibi ekleyebilir veya mevcut olanları silebilirsiniz.

"Resim Değiştirme" işlevi, bir resmi Kitaplık'ta bulunan veya yüklediğiniz bir resimle değiştirebilmenizi sağlar. Bu, özellikle bir şablondaki stok resimleri değiştirirken faydalı olur.

Şablondan oluşturulan reklamdaki bir resmi değiştirmek için:

1. Değiştirmek istediğiniz resmi sağ tıklayın.
2. Pop-up menüsünden Resmi değiştir... seçeneğini belirleyin.
3. İletişim kutusunda Kitaplık'tan bir resmi seçebilir veya bilgisayarınızdan bir resim seçmek için ekle düğmesini tıklayabilirsiniz.
4. Tamam'ı tıklayın.

Bitmiş reklam öğenizi önizleme

Reklamınızı Google Web Designer'dan önizlemek için:

1. Ekranın alt kısmındaki önizleme düğmesini tıklayın. Google Web Designer, sisteminizde desteklenen tarayıcıları tanır ve bunların hangilerini kullanmak istediğinizi seçmenize izin verir.
2. Çalışmanızı önizlemek istediğiniz tarayıcıyı seçmek için önizleme düğmesinin sağındaki seçim okunu tıklayın ve listeden tarayıcıyı seçin.
3. Sayfa yüklendiğinde, daraltılmış reklamı inceleyin.
4. Reklam genişletmesini görmek için harekete geçirici mesajı tıklayın.

İsteğe Bağlı: Çok boyutlu genişleyen reklam öğesi ayarlama

Çok boyutlu genişleyen reklam öğeleri, bir sitedeki yerleşimlerine dayalı olarak uygun yönde genişleyebilir. Bir çok boyutlu genişleyen reklam öğesi oluşturmak için aşağıdaki adımları izleyin.

Google Web Designer'daki Çok Yönlü Genişletme şablonundan başlayarak zamandan tasarruf edin. Şablon, aşağıdaki adımlarda belirtilen kodun ve kurulumun büyük bir kısmını içerir.

Çok boyutlu kurulum

1. Adım: Sahne boyutunu artırın

1. Genişletilmiş sayfanın boyutunu artırarak, her yön için gereken yeterli genişletilmiş alanı sağlayın.

   Örneğin, daraltılmış reklam öğesi boyutu 300x250, genişletilmiş reklam öğesi 600x250 olursa ve reklam öğesi, sağa veya sola doğru genişletilebiliyorsa genişletilmiş sayfa boyutunu 900x250 olarak ayarlayın.
   
   

2. Banner sayfasına  geri dönmek için sayfa göstergesini kullanın.
3. Reklam genişletme görünümü düğmesini tıklayın. 
4. Genişleyen görüntülenebilir alanı yeniden konumlandırarak daraltılmış görünümün ortada olmasını sağlayın. Google Web Designer Yardım Merkezi'nden reklam genişletme görünüm düğmesini kullanma hakkında daha fazla bilgi edinebilirsiniz.
5. Sahnenin alt kısmındaki sayfa göstergesini kullanarak () Genişletilmiş sayfa'ya geçin.
6. Reklam öğelerinizin konumunu yeni sahne boyutuyla eşleşecek şekilde ayarlayın.

2. Adım: Konumlandırma kodu ekleyin

1. Kod görünümü'nü tıklayın.
2. Aşağı kaydırarak gwd-init-code kimliğine sahip komut dosyası etiketine gidin: 
   <script type="text/javascript" id="gwd-init-code">
3. Çok yönlü genişletmeyi etkinleştirecek ve etkinlik işlemeyi ekleyecek kodu ekleyin. API yöntemleri ve örnekler için Studio HTML5 SDK'sına bakın.

   Örnek kod 

   Bu örnek, yalnızca sola ve sağa genişletilir. Daha ayrıntılı bilgi için Studio HTML5 SDK'sını inceleyin.

   Enabler.setIsMultiDirectional(true);
   
   // Öğelerin konumunu genişletme yönüne göre düzenleyin.
   function expandStartHandler() {
     var direction = Enabler.getExpandDirection().toString();
     if (direction == 'tr' || direction == 'br') {
       // Sağa genişletirken öğeleri konumlandırmak için kodu buraya ekleyin.
       // btnClose değerini, kapat düğmenizin kimliğiyle eşleşecek şekilde değiştirin ve konumu düzenleyin.
       btnClose.style.left = '875px';
     } else {
       // Sola genişletilirken öğeleri konumlandırmak için kodu buraya ekleyin.
       // btnClose değerini, kapat düğmenizin kimliğiyle eşleşecek şekilde değiştirin ve konumu düzenleyin.
       btnClose.style.left = '10px';
     }
   }
   
   Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START, expandStartHandler);

4. Desteklemek istediğiniz her bir genişletme yönü için her bir reklam öğesini konumlandırmak üzere kod ekleyin.

Reklam öğeniz tamamlandığında Studio'ya yayınlamaya hazır olursunuz.