HTML5 görüntülü reklam öğelerini Campaign Manager 360 için hazırlama

Bu kılavuz, HTML5 görüntülü reklam öğelerini Campaign Manager 360'a yüklemek için hazırlamanıza yardımcı olur.

HTML5 kullanan reklam öğeleri hakkında

HTML5 reklam öğeleri görüntülü reklam veya rich media reklam öğeleri olabilir. Aşağıda, bu türlerin her biri hakkında daha fazla bilgi edinebilirsiniz.

Görüntülü reklam öğeleri

Görüntülü reklam; HTML5 kullanabilen, rich media olmayan reklam öğeleridir. Görüntülü ağ reklam öğeleri şunları sunar:

• Bağımsız çıkışlarda tıklama etiketi raporlaması
• Yükleme bekleme
• Duyarlı HTML5 öğeleri için destek.

Rich media reklam öğeleri

Rich media reklam öğeleri banner içi videolar içerebilen, daha büyük boyuta genişleyebilen veya oyunlar gibi etkileşimli öğeler içerebilen HTML5 reklam öğeleridir. Rich media reklam öğeleri şunları sunar:

• Etkileşimlerle ilgili verileri almayı sağlayan, birden çok çıkış, sayaç ve zamanlayıcı hakkında raporlama
• Daha büyük boyuta veya tam ekrana genişleyebilme
• Banner içi video ve ses desteği
• Yükleme bekleme

HTML5 görüntülü reklam öğelerini hazırlama ve yükleme

HTML5 içeren görüntülü ağ reklam öğelerini ayarlamak için HTML5 reklam öğenizi Campaign Manager 360'a .zip dosyası biçiminde yükleyin. .zip dosyası bir HTML dosyası ve HTML dosyasının başvuruda bulunduğu dosyalardan oluşmalıdır.

1. Bir klasör oluşturun.

2. HTML dosyanızı ve dosyanın başvuruda bulunduğu öğeleri ekleyin. Klasöre başka dosya eklemeyin. Öğelerinizi alt klasörler halinde düzenleyebilirsiniz, ancak bu alt klasörleri sıkıştırmayın.

   .zip dosyanıza eklenecek öğeler

   Neler eklenmeli?

   • HTML dosyası: HTML5 görüntülü reklam öğenizin birincil öğesi, HTML dosyasıdır. Bu, reklam öğenizin giriş noktasıdır. En azından bir tıklama etiketi içeren ve iFrame içine yüklenebilen tam bir HTML dokümanı olmalıdır. Campaign Manager 360, iFrame'i öğelerinizle birlikte sunar. Tıklama etiketi yardımı için aşağıdaki bilgilere bakın.

   • Diğer dosyalar: HTML dosyasının başvuruda bulunduğu diğer tüm dosyaları ekleyin. Başvuruda bulunulmayan dosyaları eklemeyin.

   Neler eklenmemeli?

   • .zip içinde .zip'ler: HTML5 .zip dosyanızın içine başka .zip dosyaları eklemeyin. Ancak, ayrı birkaç HTML5 reklam öğesi için ayrı birkaç HTML5 .zip dosyanız varsa bunları birlikte sıkıştırabilir ve Campaign Manager 360'a toplu olarak yükleyebilirsiniz.

   • Başvurulmayan dosyalar: Yukarıda belirtildiği gibi yalnızca HTML dosyasının başvurduğu dosyaları ekleyin.

   • Yerel depolama veya oturum depolaması: Campaign Manager 360, yerel depolamayı veya oturum depolamasını kullanan HTML5 öğelerini kabul etmez.

   • Adda % simgesi kullanmayın: Öğenizdeki hiçbir dosyanın adına yüzde simgesi (%) eklemeyin.

   • Yedek öğeler

     • (İsteğe bağlı) Trafiker, Campaign Manager 360'a ayrı bir yedek resim yükleyebilir. Campaign Manager 360 desteklenmeyen birincil öğelerinizi kullanamadığında yedek resim kullanılır. HTML5 .zip dosyanıza yedek resim eklemeyin.

   Desteklenen dosya türleri ve .zip dosyanızla ilgili sınırlamalar

   • Desteklenen dosya türleri: HTML, HTM, JS, CSS, JPG, JPEG, GIF, PNG, JSON, XML, SVG, EOT, OTF, TTF, WOFF, WOFF2

   • .zip dosyası başına maksimum dosya sayısı: 100

   • Maksimum boyut: 10 MB

   Örnek HTML5 .zip dosyası

   Örnek bir ZIP dosyası indirin

   .adz dosyalarıyla ilgili yardım

   Campaign Manager 360, .adz dosyası biçimindeki HTML5 reklam öğelerini de kabul eder. .adz dosyasını, bir .zip dosyası gibi işlemeniz yeterlidir. Kullanım amacı açısından, .adz ile .zip arasında bir fark yoktur.

3. Klasörü bir .zip dosyası olarak sıkıştırın. Klasörlerin sıkıştırılmasıyla ilgili yardıma mı ihtiyacınız var? Windows veya Apple yardım merkezlerini deneyin.

4. Trafiker artık bu .zip dosyasını Campaign Manager 360'a yükleyebilir.

   Trafik işlemleri hakkında daha fazla bilgi edinin:

   • Reklam öğelerini Campaign Manager 360'a ekleme adımları

   • Görüntülü reklam kurulumu

Yükleme sorunları

.zip dosyalarınızın Campaign Manager 360 tarafından kabul edilip edilmeyeceğini kontrol etmek için HTML5 Doğrulama Aracı'nı kullanın.

Neden HTML5 görüntülü reklam öğemi Campaign Manager 360'a yüklemek için seçemiyorum?

1. Bu sorun, dosyanızın .zip veya .adz biçiminde olmamasından kaynaklanabilir. HTML dosyanızı (ve başvuruda bulunduğu diğer dosyaları) tek bir .zip olarak sıkıştırın ve tekrar deneyin.

2. Bir .zip dosyanızın olduğunu düşünüyorsanız emin olmak için dosya uzantısını kontrol edin: Dosyayı sağ tıklayın ve özelliklerini kontrol ederek .zip uzantılı olduğunu onaylayın.

3. Dosyanızı yine de seçemezseniz destek bölümüyle iletişime geçmeniz gerekebilir.

Campaign Manager 360 neden yüklememi reddetti?

Dosyanızı yüklemeyle ilgili sorunlar yaşıyorsanız: Sorun, dosyanızda geçerli HTML5 öğesi bulunmamasından veya 100'den (maksimum) fazla dosya içermesinden kaynaklanıyor olabilir. Başka bir sorun, HTML5 öğenizin yerel depolama veya oturum depolaması için JavaScript API'lerini kullanmasından kaynaklanabilir. Kullanıcı gizliliğinin korunmasına yardımcı olmak için Campaign Manager 360, bu API'lere izin vermez.

Campaign Manager 360 yerel depolama veya oturum depolaması için JavaScript API'lerine neden izin vermez?

Kullanıcı gizliliğinin korunmasına yardımcı olmak için Campaign Manager 360, yerel depolama veya oturum depolaması kullanan HTML5 öğelerini kabul etmez. Yüklemeniz bu nedenle reddedilirse yasak API'leri kaldırmak için geliştiricinize başvurun. Ardından, öğeyi tekrar yüklemeyi deneyin. Özellikle HTML5 öğelerini aşağıdaki JavaScript API'leriyle yükleyemezsiniz:

• indexedDB
• localStorage
• openDatabase
• sessionStorage

Reklamcılık hedefleriniz bu API'lere bağlıysa bunun yerine Campaign Manager 360 ayarlarını kullanmayı deneyin. Örneğin, bazı reklamverenler reklam hedeflemesi ve sıklık sınırlamaları için bu API'ları kullanır, ancak bu gerekli değildir: Birçok hedefleme türünü ayarlamak ve sıklık sınırlarını belirlemek için Campaign Manager 360'ı kullanabilirsiniz. Destek bölümünden, geçici çözümlerin uygulanmasıyla ilgili yardım isteyin. (Öğenizi nasıl ayarladığınızdan bağımsız olarak, yalnızca Google Marketing Platform ile yaptığınız sözleşmedeki gizlilik gereksinimlerini karşılayan verileri yakalamayı denemeniz gerektiğini unutmayın.)

Yerel depolama ve oturum depolaması nedir? Bunlar, iki farklı HTML5 Web Depolaması türüdür. Bunlar, bir tarayıcıda veri depolamanın yollarıdır. Yerel depolama, tarayıcıdaki bir dosyayı tarama oturumlarında saklar. Local storage stores a file on the browser across browsing sessions. Kullanıcı tarayıcı önbelleğini temizleyinceye veya dosyayı manuel olarak silinceye kadar dosya, tarayıcıda kalıcı olarak durur. Oturum depolaması, verileri yalnızca belirli bir göz atma oturumu sırasında depolar. Tarayıcıyı kapatıp yeniden başlattığınızda, oturumda depolanan tüm veriler temizlenir.

Neden bu tür depolamaya izin verilmiyor? Depolanan dosya, Kişisel Bilgileri (PII) yakalamak, oturumlar arası tarayıcı etkinliğini izlemek veya başka verileri üçüncü taraflara göndererek Google Marketing Platform sözleşmenizin şartlarını ihlal edebilecek şekilde tasarlanmış kod içerebilir. Bu veri toplama türü elbette yerel ve oturum depolamasının tek kullanım şekli değildir, ancak dosya her türlü kodu içerebileceği için olası bir kullanımdır.

Geliştirici yönergeleri

Kaynaklar

• IAB HTML5 yönergeleri

Reklam öğesinin boyutunu ayarlama

Boyut yönergeleri

Resim veya videolardan farklı olarak, HTML dokümanlarının kendi boyutları yoktur. Bu nedenle, reklam öğenizin amaçlanan boyutunu belirtmek için boyut meta etiketini kullanın. Boyut meta etiketi, HTML dokümanınızdaki isteğe bağlı bir parametredir. Reklam öğenizin doğru boyutlarda görüntülenmesini sağlamanın en iyi yolu budur. Boyutları aşağıda gösterildiği gibi girebilirsiniz:

<meta name="ad.size" content="width=300,height=250">

Tıklama etiketleri

Tıklama etiketi yönergeleri

Tıklama etiketleri, HTML5 öğeleri olan reklam öğelerinizdeki her çıkış için açılış sayfaları tanımlar. Çıkış, tarayıcıyı bir açılış sayfasına yönlendiren tıklanabilir herhangi bir alandır. Her tıklama etiketi, farklı bir çıkışa ilişkin açılış sayfasını tanımlar.

Bir çıkış tıklandığında, reklam öğesi o çıkışla ilişkilendirilmiş açılış sayfası için Campaign Manager 360'ı çağırır. İhtiyaçlarınıza bağlı olarak, bu açılış sayfasını reklam öğenizde veya reklamınızda ayarlayabilirsiniz.

Öğelerinizi yüklediğinizde Campaign Manager 360, tıklama etiketlerini algılar. Tıklama etiketinizin kullandığı açılış sayfasını istediğiniz zaman, hatta etiketleri dışa aktardıktan sonra bile değiştirebilirsiniz. Bunun nedeni, tıklama etiketinin sabit kodlu bir açılış sayfasından ziyade standart bir değişken ve açılış sayfasının yer tutucusu olmasıdır.

Reklam düzeyi ayarı, görüntülü ağ reklam öğelerinde reklam öğesi düzeyi ayarları geçersiz kıldığından tıklama etiketlerinizi ayarlarken kullanabileceğiniz bazı en iyi uygulamaları aşağıda bulabilirsiniz:

• Reklam öğenizin tıklama hedefi olarak tıklama etiketi değişkenini kullandığından emin olun.
• Tıklama etiketi, reklam sunucusunun kolayca okuyabileceği bir şekilde olmalıdır. Kodun geri kalanında ve diğer dosyalarda küçültücüler kullanabilirsiniz, ancak burada küçültme veya gizleme yapılmamalıdır.
• Öğenizde kodu gömülmüş URL'ler, Campaign Manager 360'ın tıklamaları izlemesini ve trafikerlerin URL'yi güncellemesini engelleyeceğinden bu tür bir kullanımı önermeyiz. Yükleme sonrasında, öğede kodu gömülmüş URL'ler olursa, Campaign Manager 360 sizi bu konuda uyarır.

Örnek tıklama etiketi ekleme

Burada, bir HTML dokümanına eklenmiş tıklama etiketi örneğini bulabilirsiniz:

<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com"; </script>
</head>
[Reklam öğesi kodunuzun geri kalanı buraya eklenir.] </html>

Reklam öğenizin açılış sayfası URL'si olarak tıklama etiketi değişkenini kullandığından emin olun:

<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>

Çıkış etkinlikleri için Google Web Designer'ı kullanma

Google Web Designer'daki Dokunma Alanı bileşeni, Campaign Manager 360'la tamamen uyumludur. Özel kod gerektirmez.

Dokunma Alanı'nı kullanarak tıklama etiketi eklemek için:

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.

   

Örnek dosyalar

Örnek HTML dokümanı

Aşağıda, bir HTML5 reklam öğesine ait eksiksiz bir örnek HTML dokümanı verilmiştir. Tıklama etiketi ve boyut meta etiketi koyu renkle gösterilmiştir.

Bu reklam öğesi çok basit olduğundan, başka öğelere gerek yoktur. Bu sizin HTML5 reklam öğeniz olsaydı, bir .zip veya .adz dosyası içine sıkıştırdıktan sonra Campaign Manager 360 trafikerinize gönderecektiniz.

Doküman

<html>
<head>
<title>örnek html sayfası</title>
<meta name="ad.size" content="width=300,height=250">
<style>
html, body {background-color: blue;}
p { color:white; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var clickTag = "http://www.google.org";
function resizeWindow()
{
$('p').css({ 'width':'100%', 'text-align':'center' });
var h1 = $('h1').height();
var h = h1/2;
var WinHeight = $(window).height();
var w = WinHeight/2;
var m = w - h;
var WinWidth=$(window).width();
$('p').css("margin-top",m + "px");
$("p").text("Size="+WinWidth+"x"+WinHeight);
}
$(document).ready(function () {
resizeWindow();
});
$(window).resize(function () {
resizeWindow();
});
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)"><p>Sayfa yükleniyor...</p></a> </body> </html>

Tıklama etiketleri olan HTML5 dosyaları

Bu HTML5 dosyaları, URL'leri dinamik bir şekilde değiştirmek ve Campaign Manager 360 reklam sunucularıyla tıklamaları kaydetmek için kullanılır.

Basit

Bir tıklamadan sonra tıklama etiketini çağırır.

Basit HTML5 dosyası

Parametre Ekleme

Düğme tıklandığında clickTag öğesini çağırır. Bu örnekte, hedef URL'ye bir parametrenin (ör. posta kodu) geçirilmesi gösterilmektedir.

HTML5 file with parameter

Bir # işareti ekleme örneği

Campaign Manager 360'a ve düğmenin açılış sayfası URL'sine yapılan izleme çağrısını ayırmak için kodlanmıştır. Bunun, tıklandığında diyez işareti (#) içeren bir hedef URL'yi gösteren tüm reklam öğeleri için yapılması gerekir.

HTML5 file with a number sign in a click tag URL

Birden çok tıklama etiketi

Birden çok tıklama etiketi içerir.

HTML5 file with multiple click tags

Yükleyici

Üst dosya ve alt dosya olmak üzere iki .zip dosyası içeren .zip. Üst dosya, alt dosyayı yükler.

HTML5 parent and child files

Özel izlemeye sahip HTML5 dosyaları

Bu, rich media olmayan reklam öğelerindeki kullanıcı etkileşimlerini kaydetmek için kullanılan bir HTML5 dosyası örneğidir.

1x1 izleme pikseli

Yüklendiğinde bir Campaign Manager 360, 1x1 izleme pikselini çağırır.

HTML5 file with special tracking