AMP

amp-ad

Description

Bir reklamın görüntüleneceği kapsayıcı.

 

Required Scripts

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Bir reklamın görüntüleneceği kapsayıcı. amp-embed, amp-ad etiketinin bir diğer adıdır ve bu etiketin tüm işlevlerini farklı bir etiket adıyla alır. Anlam açısından daha doğru olduğunda amp-embed etiketini kullanın. AMP dokümanları yalnızca HTTPS aracılığıyla sunulan reklamları/yerleştirmeleri destekler.

amp-ad / amp-embed

amp-ad/amp-embed spesifikasyonu zaman içinde önemli ölçüde gelişebilir. Geçerli yaklaşım, reklamları gösterebilmek için biçimin önyükleneceği şekilde tasarlanmıştır.

Açıklama Bir reklamın görüntüleneceği kapsayıcı. amp-embed, amp-ad etiketinin bir diğer adıdır ve bu etiketin tüm işlevlerini farklı bir etiket adıyla alır. Anlam açısından daha doğru olduğunda amp-embed etiketini kullanın. AMP dokümanları yalnızca HTTPS aracılığıyla sunulan reklamları/yerleştirmeleri destekler.
Zorunlu Komut Dosyası <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Not: amp-ad, bu komut dosyası olmadan da çalışmaya devam edebilir ancak ileriye dönük uyumluluk için bunu önemle tavsiye ediyoruz
Desteklenen Düzenler fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
Örnekler Örneklerle AMP amp-ad örneği sayfasına bakın.

Davranış

Reklamlar, AMP dokümanlarındaki diğer tüm kaynaklar gibi <amp-ad> adlı özel bir öğeyle yüklenir. Reklam ağları tarafından sağlanan JavaScript'in AMP dokümanı içinde çalıştırılmasına izin verilmez. Bunun yerine, AMP çalışma zamanı AMP dokümanından farklı bir kaynaktan (iframe korumalı alanı aracılığıyla) bir iframe yükler ve reklam ağının JS'sini o iframe korumalı alanı içinde yürütür.

<amp-ad>, düzen türünün kuralına göre belirtilecek genişlik ve yükseklik değerlerinin bildirilmesini gerektirir. Hangi reklam ağının görüntüleneceğini seçen bir type bağımsız değişkeni gerektirir. Etiketteki tüm data-* özellikleri, sonunda reklamı oluşturan kodu otomatik olarak bağımsız değişken biçiminde geçirir. Belirli bir ağ türü için hangi data- özelliklerinin gerekli olduğu değişiklik gösterir ve reklam ağıyla belgelenmelidir.

Örnek: Birkaç reklam görüntüleme

<amp-ad type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
    width="300"
    height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
  </amp-ad>
  <amp-ad width="300"
    height="250"
    type="industrybrains"
    data-width="300"
    data-height="250"
    data-cid="19626-3798936394">
  </amp-ad>
  <amp-embed type="taboola"
    width="400"
    height="300"
    layout="responsive"
    data-publisher="amp-demo"
    data-mode="thumbnails-a"
    data-placement="Ads Example"
    data-article="auto">
  </amp-embed>
Bu kod parçacığını playground'ta aç

Özellikler

tür (gerekli) Reklam ağı için bir tanımlayıcı belirtir. type özelliği, reklam etiketi için kullanılacak şablonu seçer.
src (isteğe bağlı) Belirtilen reklam ağı için bir komut dosyası etiketi yüklemek üzere bu özelliği kullanın. Bu özellik, sayfaya tam olarak tek bir komut dosyası etiketinin eklenmesini gerektiren reklam ağları için kullanılabilir. src değeri, belirtilen reklam ağı için beyaz listeye alınmış bir öneke sahip olmalı ve değer, https protokolünü kullanmalıdır.
data-foo-bar Çoğu reklam ağı, HTML data- özelliklerini kullanarak ağa geçirilebilecek ek yapılandırma gerektirir. Parametre adlarında, standart veri özelliği çizgisi büyük/küçük harfe dönüştürülür. Örneğin, "data-foo-bar" adı, yapılandırma için reklama "fooBar" olarak gönderilir. Özelliklerin kullanılabileceği reklam ağı ile ilgili dokümanlara bakın.
data-vars-foo-bar data-vars- ile başlayan özellikler amp-analytics var öğeleri için ayrılmıştır.
json (isteğe bağlı) Bir yapılandırmayı reklama rastgele şekilde karmaşık bir JSON nesnesi olarak geçirmek için bu özelliği kullanın. Nesne, adlar herhangi bir şekilde bozulmadan, olduğu gibi reklama geçirilir.
data-consent-notification-id (isteğe bağlı) Değer sağlanırsa kullanıcının "AMP istemci kimliği" (çereze benzer) reklama geçirilinceye kadar amp-user-notification özelliğinin belirtilen HTML kimliği ile onaylanmasını gerektirir. Bu, kullanıcı bildirimi onaylayana kadar reklam oluşturmanın bekletileceği anlamına gelir.
data-loading-strategy (isteğe bağlı) Reklamın, geçerli görüntü alanından belirtilen görüntü alanı sayısı kadar uzakta olduğunda yüklenmeye başlamasını bildirir. data-loading-strategy özelliği olmadan, varsayılan olarak 3 değeri kullanılır. [0, 3] aralığında bir hareketli değer belirtebilirsiniz (Değer belirtilmezse değer 1,25 olarak ayarlanır). Daha yüksek bir görüntülenebilirlik derecesi elde etmek (ör. bir reklamın yüklendikten sonra görülme olasılığını artırmak) için daha küçük bir değer kullanın. Ancak bu durumda, daha az gösterim oluşturma (ör. daha az reklam yüklenmesi) riski de artar. Özellik belirtilir ancak değer boş bırakılırsa sistem, gösterim sayısını önemli ölçüde etkilemeden görüntülenebilirliği optimize eden bir hareketli reklam değeri atar. Değer olarak prefer-viewability-over-views seçeneğinin belirlenmesinin görüntülenebilirliği de otomatik olarak optimize edeceğini unutmayın.
data-ad-container-id (isteğe bağlı) Daraltma girişimi olması durumunda, reklama kapsayıcı bileşeni kimliğini bildirir. Kapsayıcı bileşeni, reklamın üst öğesi olan bir <amp-layout> bileşeni olmalıdır. data-ad-container-id belirtildiğinde ve böyle bir <amp-layout> kapsayıcı bileşeni bulunduğunda, AMP çalışma zamanı, dolgu yokken reklam bileşeni yerine kapsayıcı bileşenini daraltmayı dener. Bu özellik, bir reklam göstergesinin var olması durumunda faydalı olabilir.
common attributes Bu öğe, AMP bileşenlerine genişletilmiş ortak özellikleri içerir.

Yer Tutucu

İsteğe bağlı olarak amp-ad, placeholder özelliğine sahip bir alt öğeyi destekler. Reklam ağı tarafından desteklenirse bu öğe, reklam görüntülenmeye hazır olana kadar gösterilir. Yer Tutucu ve Yedekler hakkında daha fazla bilgi edinin.

<amp-ad width=300 height=250
    type="foo">
    <div placeholder>Loading ...</div>
</amp-ad>

Reklam yok

Alan için kullanılabilir reklam yoksa AMP, (display: none değerine ayarlanmış) amp-ad öğesini daraltmaya çalışır. AMP, bu işlemin kullanıcının kaydırma konumunu etkilemeden gerçekleştirilebileceğini belirler. Reklam geçerli görüntü alanındaysa kullanıcının kaydırma konumunu etkileyeceği için daraltılmaz; ancak, reklam geçerli görüntü alanının dışındaysa daraltılır.

Daraltma girişimi başarısız olması durumunda. amp-ad bileşeni, fallback özelliğine sahip bir alt öğeyi destekler. Bir yedek öğe varsa özelleştirilmiş yedek öğe gösterilir. Aksi takdirde, AMP bir varsayılan yedeği uygular.

Yedek içeren örnek:

<amp-ad width=300 height=250 type="foo">
  <div fallback>No ad for you</div>
</amp-ad>

Video reklamlar sunma

Video reklamlarla AMP'deki videolardan para kazanmanın 3 yolu vardır:

  1. AMP, reklamlardan para kazanabilen BrightCove, DailyMotion gibi çeşitli video oynatıcıları destekler. Tam liste için medya bileşenlerine bakın.

  2. Yerleşik bir IMA SDK ve HTML5 video oynatıcısıyla gelen amp-ima-video bileşenini kullanın

  3. AMP'de desteklenmeyen bir video oynatıcı kullanıyorsanız özel oynatıcınızı, amp-iframe kullanarak sunabilirsiniz. amp-iframe yaklaşımını kullanırken:

    • Oynatıcıyı ilk görüntü alanına yüklüyorsanız bir poster olduğundan emin olun. Ayrıntılar.
    • Video ve poster, HTTPS üzerinden sunulmalıdır.

Reklamları bir özel alandan yayınlama

AMP, kendi alanınız gibi bir özel alandan reklam yüklemek için kullanılan önyükleme iframe'inin yüklenmesini destekler.

Bunu etkinleştirmek için remote.html dosyasını web sunucunuza kopyalayın. Ardından, AMP dosyalarınıza aşağıdaki meta etiketi ekleyin:

<meta name="amp-3p-iframe-src" content="https://assets.your-domain.com/path/to/remote.html">

Meta etiketin content özelliği, web sunucunuzdaki remote.html dosya kopyasının mutlak URL'sidir. Bu URL bir "https" şeması kullanmalıdır. AMP dosyalarınızla aynı kaynakta bulunamaz. Örneğin, www.example.com adresinde AMP dosyaları barındırırsanız bu URL, www.example.com adresinde olmamalı; bunun yerine, something-else.example.com gibi bir adreste olmalıdır. iframe'ler için izin verilen kaynaklar hakkında daha fazla bilgi için "Iframe kaynak politikası" konusuna bakın.

Güvenlik

iframe'inizin yalnızca beklenen şeyleri yaptığından emin olmak için gelen verileri draw3p işlevine geçirmeden önce doğrulayın. Bu durum, bilhassa özel JavaScript yerleştirmeye izin veren reklam ağları için geçerlidir.

Iframe'ler, yalnızca iframe içine almaları beklenen kaynakları iframe içine almalıdır. Kaynaklar şunlar olabilir:

  • kendi kaynaklarınız
  • AMP önbelleği için https://cdn.ampproject.org

AMP önbelleği için "kaynak kökenin" (cdn.ampproject.org tarafından sunulan dokümanın kaynağı) kaynaklarınızdan biri olduğunu kontrol etmeniz de gerekir.

Kaynakların uygulanması draw3p için 3. bağımsız değişkenle yapılabilir ve ayrıca, tam tarayıcı desteği için allow-from yönergesi kullanılarak yapılmalıdır.

Gelen reklam yapılandırmasını geliştirme

Bu tamamen isteğe bağlıdır: Bazen reklam isteğini reklam sunucusuna göndermeden önce reklam isteğinin geliştirilmesi istenir.

Reklam ağınız hızlı getirmeyi destekliyorsa lütfen Gerçek Zamanlı Yapılandırmayı (RTC) kullanın. (ör. DoubleClick ve AdSense entegrasyonları, hızlı getirme ve RTC'yi destekler)

Reklam ağınızda gecikmeli getirme kullanılıyorsa remote.html dosyasındaki draw3p işlev çağrısına bir geri çağırma geçirebilirsiniz. Geri çağırma, gelen yapılandırmayı ilk bağımsız değişken ve daha sonra, bir başka geri çağırmayı ikinci bağımsız değişken olarak alır (aşağıdaki örnekte done olarak gösterilmiştir). Reklam oluşturmanın devam etmesi için bu geri çağırma, güncellenmiş yapılandırma ile yapılmalıdır.

Örnek:

draw3p(function(config, done) {
  config.targeting = Math.random() > 0.5 ? 'sport' : 'fashion';
  // Don't actually call setTimeout here. This should only serve as an
  // example that is OK to call the done callback asynchronously.
  setTimeout(function() {
    done(config);
  }, 100)
}, ['allowed-ad-type'], ['your-domain.com']);

Stil

<amp-ad> öğelerinin kendileri CSS position: fixed değerine ayarlanmış kapsayıcılara sahip olamaz veya böyle kapsayıcıların içine yerleştirilemez (amp-lightbox hariç). Bunun nedeni, tam sayfa yer paylaşımlı reklamların kullanıcı deneyimi açısından yarattığı zorluklardır. Gelecekte, belirli kullanıcı deneyimi değişmez değerlerini sağlayan AMP kontrollü kapsayıcıların içinde benzer reklam biçimlerine izin verme seçeneği değerlendirilebilir.

Doğrulama

AMP doğrulayıcı spesifikasyonundaki amp-ad kurallarına bakın.

Desteklenen reklam ağları

Desteklenen yerleştirme türleri

Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git