Uygulama Tanıtımı Smart Banner AMP Eklentisi Nasıl Oluşturulur?

Bir önceki yazımızda blog sitelerinde Smart Banner eklentisi oluşturmayı paylaşmıştık. Bu yazımızda da AMP kullanıcıları için Smart Banner eklentisi oluşturmayı paylaşacağım.

Bknz: Uygulamanızı Web'de Tanıtmak için Smart Banner Eklentisi Nasıl Oluşturulur?

Web sitenizin bir uygulaması varsa, Google Play ve Apple Store gibi uygulama devlerinin içerisinde yer almak istemez misiniz?

Smart Banner AMP eklantisi tüm AMP temaları ile uyumludur. Smart Banner AMP eklentisi oluşturmak için aşağıdaki adımları takip edin.

Smart Banner AMP Eklentisi Nasıl Oluşturulur?

1- Aşağıdaki AMP javaScript kodlarının blogunuzun şablon kodları arasında olup olmadığını kontrol edin. Eğer, blogunuzun şablon kodları arasında aşağıdaki javaScript kodları bulunmuyorsa, bu kodları blogunuzun </head> kodunun bir satır üzerine ekleyin.

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

2- Aşağıdaki CSS kodlarını amp-custom stil dosyası içerisine ekleyin.

#block-notification {z-index: 9999999;}
#SmartBanner{width:100%;height:140px;position:fixed!important;bottom:-1px;transition:all .4s;left:0!important;z-index:9999;box-shadow:none;background:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.77) 30%,rgba(0,0,0,.98) 60%,#000 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#000000',GradientType=0 )}
.sb-button{display:block;position:relative;width:100%;height:100%;text-decoration:none;z-index:1}
#SmartBanner .sb-container{margin:0 auto}
#SmartBanner .SmartClose{position:absolute;width:30px;height:30px;right:10px;top:10px;font-size:24px;display:block;color:#F7412D;background:#642620;border-radius:50%;background-clip:padding-box;line-height:1.05em;border:2px solid rgba(255,255,255,.2);padding:0;z-index:2;text-align:center}
#SmartBanner .SmartClose:active{color:#aaa}
#SmartBanner .sb-icon{position:absolute;left:10px;top:5px;display:block;width:104px;height:145px;background-repeat:no-repeat;background-size:104px}
#SmartBanner .sb-info strong,#SmartBanner .sb-info>span{display:block;line-height:normal;font-style:normal}
#SmartBanner .sb-info{position:absolute;left:130px;top:44px;width:50%}
#SmartBanner .sb-info strong{font-size:12px;font-weight:700;color:#000}
#SmartBanner .sb-info>span{font-size:13px;font-weight:400;color:#999}
#SmartBanner .sb-info span strong:first-child{color:#ff9800;font-size:10px;display:block;font-weight:700}
#SmartBanner .sb-info strong {color:#fff;display:block;margin-top:5px}
#SmartBanner .sb-gp{position:absolute;left:130px;bottom:10px;width:120px;height:36px;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS_qEUt-CJA1OjYIxFFrtYTaYQIEY8XBcNaNyw9bwMwJGpekhriFH1x5qCWv0zGlKWOC8YWs5-lhelr-URZCfqBH0Yt77TPRq-DZl03Jrt_45eHwuRZY293L1JD_pEseAO26RePcIc_b8/s1600/app.png) left top no-repeat;background-size:120px}

3- Aşağıdaki AMP HTML kodlarını blogunuzun </body> kodunun bir satır üzerine ekleyin.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<amp-user-notification id='block-notification' layout='nodisplay'>
<div class='notifbox' id='notifbox'>
<div id='SmartBanner'>
<a class='SmartClose' href='#' on='tap:block-notification.dismiss' role='button' tabindex='0' title='Kapat'>&#215;</a>
<a class='sb-button' href='https://play.google.com/store/apps/details?id=com.blogger.eklentileri' target='_blank'>
<div class='sb-container'><span class='sb-icon' style='background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_Nbu9qJsM9C-B-NA7-yuMkW2yrryhFyH8Jf8z49hQfSE79zLA1Raj-YNTANOMoKeheKILHvR3lW2YkpLxxm4PyLbbof8umfBCHTv5r7wmxnKR3vgpD26I83HtE7QmcUr8jDAvPSl09I/s1600/be-google-play.png");'></span>
<div class='sb-info'><span><strong>UYGULAMAMIZ YENİLENDİ</strong><strong>Hemen İndir!</strong></span>
</div>
<div class='sb-gp'><span></span>
</div>
</div>
</a>
</div>
</div>
</amp-user-notification>
</b:if>

NOT: HTML kod içerisinde belirtilen URL yerine kendi web sitenizin Google Play veya Apple Store uygulama indirme URL'sini ekleyin. Kod içerisinde belirtilen diğer yere ise uygulamanızın tanıtım afişi URL'ini ekleyin.

Web sitenizin uygulaması için tanıtım afişi oluşturmak istiyorsanız, aşağıdaki butona tıklayarak mobil PNG dosyasını indirebilirsiniz.

İndir

Smart Banner AMP eklentisi sadece mobil ekranlarda görüntülenecektir. Eğer, masaüstü ekranlarda da uygulamanızın tanıtımını yapmak istiyorsanız, HTML kodda bulunan aşağıdaki etiketleri kaldırın.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
..............
..............
</b:if>

4- Aşağıdaki Google Analytics AMP javaScript kodunu blogunuzun </body> kodunun bir satır üzerine ekleyin. Eğer varsa tekrar elemeye gerek yoktur.

<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-xxxxxxxxxx"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}}}
</script>
</amp-analytics>

Yukarıdaki javaScript kodu içerisinde belirtilen yere Google Analytics ID kodunuzu ekleyin. Tüm adımları tamamladıktan sonra şablonu kaydedin. Eklentiyi incelemek için aşağıdaki butona tıklayabilirsiniz.

Ön İzleme

Smart Banner AMP eklentisini sizlerle paylaştık. Eklenti ile ilgili soru ve görüşleriniz için yorum formunu kullanabilirsiniz.