آموزش تبلیغات در گوگل AMP

erfan molaei
3 سال پیش
آموزش تبلیغات در گوگل AMP

آموزش تبلیغات در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش تبلیغات در گوگل AMP خواهیم پرداخت.

تبلیغات برای صفحات ناشر نقش مهمی دارد زیرا منبع درآمد ناشر است. در مورد صفحات آمپر ، تغییرات جزئی وجود دارد. آنها اجازه اضافه کردن پرونده های javascript شخص ثالث را ندارند. به منظور نمایش تبلیغات در صفحه ، یک بخش آمپ به نام amp-ad وجود دارد که به نمایش تبلیغ در صفحه کمک می کند. بیشتر شبکه های تبلیغاتی که تبلیغات را ارائه می دهند با برچسب amp-ad سازگار هستند.

جزئیات مربوط به نحوه کار تبلیغات در تصویر زیر نشان داده شده است –

AMP Ads

برای نمایش تبلیغات در صفحه ناشر ، باید <amp-ad> را اضافه کنیم که به عنوان یک مکان نگهدارنده برای نمایش تبلیغات در صفحه عمل می کند. <amp-ad> با شبکه تبلیغاتی مشخص شده برای نوع تماس می گیرد.

شبکه AD به صورت داخلی با آگهی فراخوانی می شود تا در صفحه ای که توسط آگهی دهنده ارائه می شود و بیشتر یک html یا amphtml است نمایش داده شود.

برای عملکرد آن، ابتدا باید اسکریپت را به صفحه اضافه کنیم.

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

 

تگ amp-ad برای Doubleclick به شرح زیر است –

<amp-ad width = "300"
   height = "200"
   type = "doubleclick"
   data-slot = "/4119129/ad">
   <div placeholder>
      <b>Placeholder here!!!</b>
   </div>
</amp-ad>

شبکه های تبلیغاتی بسیاری وجود دارند که از amp-ad پشتیبانی می کنند. توجه داشته باشید که در نمونه های خود نگاهی به تگ amp-ad doubleclick خواهیم انداخت. نام شبکه تبلیغات باید در ویژگی thetype مشخص شود.

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         div {
            text-align:center;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-ad
            data-slot = /30497360/amp_by_example/AMP_Banner_300x250
            height = 250
            layout = fixed
            style = width:300px;height:250px;
            type = doubleclick
            width = 300>
         </amp-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
   </body>
</html>

 

خروجی

Amp Banner Ad

 

بیایید نگاهی به برخی از ویژگی های مهم موجود در amp-ad بیندازیم که در جدول زیر آورده شده است –

Attributes & Description
۱ typeنام شبکه تبلیغاتی
۲ widthعرض آگهی
۳ heightارتفاع آگهی
۴ placeholderمحل نگهدارنده به عنوان عنصر کودک استفاده می شود و هنگام بارگیری آگهی برای کاربر نمایش داده می شود. لطفا توجه داشته باشید که این ویژگی باید توسط پایان شبکه تبلیغات پشتیبانی شود.
۵ data-*ویژگی های داده ای که باید به شبکه تبلیغات منتقل شوند. به عنوان مثال نیازهای شبکه تبلیغات را دوبار کلیک کنید

data-slot = / 30497360 / amp_by_example / AMP_Banner_300x250 برای ارائه آگهی در صفحه.

پارامهای داده وجود دارد که توسط هر شبکه تبلیغاتی مشخص شده است.

ما همچنین می توانیم عرض و ارتفاع استفاده شده را با استفاده از data-override-width و data-override-height نادیده بگیریم.
۶ fallbackFallback به عنوان یک عنصر کودک برای تبلیغات تبلیغاتی استفاده می شود و هنگامی که تبلیغی برای نمایش وجود ندارد نمایش داده می شود.

 

بگذارید این موضوع را با کمک یک مثال عملی که از مکان یاب استفاده می کند و در صورت عدم وجود تبلیغ برای ارائه ، درک می کنیم.

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content="width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
      div {
         text-align:center;
      }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-ad
            data-slot = /30497360/amp_by_example/AMP_Banner_300x250
            height = 250
            layout = fixed
            style = width:300px;height:250px;
            type = doubleclick
            width = 300>
            <div placeholder>
               <b>Placeholder Example : Ad is loading!!!</b>
            </div>
         </amp-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad<p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
   </body>
</html>

 

Amp Banner Ad Ex

 

ما می توانیم از ویژگی fallback استفاده کنیم که عنصر فرزند به amp-ad است و وقتی تبلیغی برای نمایش وجود ندارد نمایش داده می شود.

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         div, p{
            text-align:center;
         }
         amp-ad {
            border : solid 1px black;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - AD</h3>
      <h3>300x250 - Banner AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-ad 
            width = "300"
            height = "250"
            type = "doubleclick"
            data-slot = "/4119129/no-ad">
            <div fallback>
               <p style = "color:green;font-size:25px;">No ads to Serve!</p>
            </div>
         </amp-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
   </body>
</html>

 

خروجی

Amp Child Element

 

  • در صورت ویژگی بازگشت، اگر تبلیغ در نمای نمای باشد ، پیام را در داخل عنصر بازگشت نشان می دهد.
  • اگر مولفه تبلیغ زیر viewport باشد و اگر آگهی نباشد ، amp-ad فضا را خراب می کند و پیام بازگشت را نشان نمی دهد.
  • واحد آگهی فقط در صورت وجود noad و در صورتی که در زیر viewport باشد ، فروپاشی می شود تا کاربر هنگام خواندن محتوا مزاحم نشود زیرا جمع شدن می تواند باعث تغییر محتوا شود.

لیست شبکه های تبلیغاتی پشتیبانی شده در اینجا آورده شده است: https://www.ampproject.org/docs/ads/ads_vendors

در این درس، ما در مورد برچسب های مربوط به تبلیغات زیر در amp بحث خواهیم کرد –

  • Google AMP – Pixel ردیابی رویداد
  • Google AMP – تبلیغات مهم
  • Google AMP – تبلیغات AMPHTML

 

پیگیری رویداد Pixel

Amp آمپر پیکسل را ارائه می دهد که اساساً برای شلیک پیکسل برای شمارش بازدیدهای صفحه استفاده می شود. Amp-pixel مشابه تگ img است که در آن ما باید url پیکسلی را که قرار است آغاز شود ارائه دهیم و کاربر هنگام رفع اشکال می تواند url شلیک شده را در زبانه شبکه مرورگرها مشاهده کند. پیکسل در صفحه نمایش داده نمی شود.

برای کار با amp-pixel ، نیازی به افزودن اسکریپت اضافی نداریم زیرا عملکرد آن در اسکریپت amp اصلی موجود است.

به نظر می رسد تگ amp-pixel همانطور که در اینجا نشان داده شده است –

<amp-pixel src = "https://urlhere" layout = "nodisplay">
</amp-pixel>

 

بگذارید با کمک یک مثال مفید ، عملکرد amp-pixel  را درک کنیم –

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Tracking Pixel</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
   
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
   </head>
   <body>
      <h3>Google AMP - Tracking Pixel</h3>
      <amp-pixel src = "https://www.trackerurlhere.com/tracker/foo" 
      layout = "nodisplay">
      </amp-pixel>
   </body>
</html>

 

خروجی 

Amp Tracking Pixel

 

در زبانه شبکه مرورگر در حال آغاز url هستید. در اینجا ما فقط از یک پیکسل ساختگی استفاده کرده ایم تا عملکرد amp-pixel را نشان دهیم. در یک محیط زنده ، باید ردیابی داده ها بر اساس پیکسل شلیک شده را مشاهده کنید. هر بار که پیکسل در صفحه وب زنده شلیک می شود ، داده های سراسر آن در انتهای سرور محاسبه می شود. بعداً داده ها می توانند از نظر تجاری تجزیه و تحلیل شوند.

Amp Tracking Pixel

 

Sticky AD

Sticky AD (تبلیغ چسبنده) نوعی از قالب برای نمایش تبلیغ است. این آگهی در انتهای صفحه قرار خواهد گرفت که از کودک با مولفه تبلیغات آمپ فراخوانی می شود. این اساساً مانند یک آگهی پاورقی است که بیشتر در صفحات مشاهده می کنیم.

برای کار با amp-sticky-ad ، باید اسکریپت زیر را اضافه کنیم –

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

 

شرایط مرتبط با تبلیغات تبلیغاتی به شرح زیر است –

شما مجاز به استفاده از فقط یک تبلیغ آمپ-چسبنده در صفحه هستید.

amp-ad باید مستقیماً فرزند amp-sticky-ad باشد. به عنوان مثال –

<amp-sticky-ad>
   <amp-ad></amp-ad>
</amp-sticky-ad>

 

مولفه تبلیغاتی مهم همیشه در پایین صفحه قرار می گیرد.

تبلیغ چسبنده عرض كامل ظرف را خواهد گرفت و فضا را با عرض و ارتفاع آمپر تبلیغاتی پر می كند

ارتفاع تبلیغات مهم ۱۰۰ پیکسل است. اگر ارتفاع تبلیغات تبلیغاتی کمتر از ۱۰۰ پیکسل باشد ، تبلیغات مهم باعث ارتقا amp تبلیغات تبلیغاتی می شود. اگر ارتفاع تبلیغات تبلیغاتی بیش از ۱۰۰ پیکسل باشد ، ارتفاع آن ۱۰۰ پیکسل خواهد بود محتوای سرریز پنهان است. تغییر ارتفاع تبلیغ مهم نمی تواند بیش از ۱۰۰ پیکسل باشد.

رنگ پس زمینه تبلیغات مهم را می توان تغییر داد. اما پس زمینه شفاف مجاز نیست.

وقتی کاربر پیمایش می کند و به پایین صفحه می رسد ، تبلیغ در انتهای صفحه دیده می شود تا محتوای پایین پنهان نشود.

در حالت افقی ، تبلیغ چسبنده در وسط قرار می گیرد.

اگر آگهی برای ارائه وجود نداشته باشد ، ظرف آگهی چسبناک فرو می ریزد و قابل مشاهده نخواهد بود.

اجازه دهید یک مثال عملی از تبلیغات تبلیغاتی مهم را در صفحه مشاهده کنیم ، همانطور که در زیر آورده شده است –

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">

      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-sticky-ad" src =
         "https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
      </script>
      <style amp-custom>
         div, p{
            text-align:center;
         }
         amp-ad {
            border : solid 1px black;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Sticky AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-sticky-ad layout = "nodisplay">
            <amp-ad 
               width = "320"
               height = "50"
               type = "doubleclick"
               data-slot = "/35096353/amptesting/formats/sticky">
            </amp-ad>
         </amp-sticky-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <h2>END OF PAGE IS VISIBLE AND CONTENT IS NOT COVERED</h2>
   </body>
</html>

 

خروجی

Amp Sticky Ad

 

اینطور است که وقتی کاربر به انتهای صفحه پیمایش می کند –

 

Amp Sticky Ad Scroll

 

وقتی به انتهای صفحه رسیدید، آگهی با هم تداخل ندارد. دکمه بستن در دسترس است که به کاربران امکان می دهد تبلیغ را ببندند.

اگر می خواهید هر چیزی را که مربوط به دکمه بستن است تغییر دهید ، به عنوان مثال ، تصویر یا عرض و غیره ، می توان آن را با استفاده از دکمه .amp-sticky-ad-close-close در جز استایل انجام داد.

 

مثال برای تغییر رنگ پس زمینه دکمه بستن

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - AD</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-sticky-ad" 
         src = "https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js">
      </script>
      <style amp-custom>
         div, p{
            text-align:center;
         }
         amp-ad {
            border : solid 1px black;
         }
         .amp-sticky-ad-close-button {
            background-color: red;
         }
      </style>
   </head>
   <body>
      <h3>Google AMP - Sticky AD</h3>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <div>
         <amp-sticky-ad layout = "nodisplay">
            <amp-ad 
               width = "320"
               height = "50"
               type = "doubleclick"
               data-slot = "/35096353/amptesting/formats/sticky">
            </amp-ad>
         </amp-sticky-ad>
      </div>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      <p>This is a example of adnetwork doubleclick banner ad</p>
      
      <h2>END OF PAGE IS VISIBLE AND CONTENT IS NOT COVERED</h2>
   </body>
</html>

 

خروجی

Amp Sticky Background

نمونه تبلیغات مهم و مهم در صفحه ناشر

Amp Sticky Publisher

 

تبلیغات AMPHTML

ما <amp-ad> را مشاهده کردیم که برای بارگذاری تبلیغات استفاده می شود. محتوای آگهی بارگذاری شده با استفاده از <amp-ad> می تواند از استایل غیر آمپر بارگیری تبلیغات استفاده کند. Incase ، آگهی <amp-ad> بارگیری می کند که از مشخصات آمپ برای تبلیغات استفاده می کند ، سپس به عنوان تبلیغات amphtml نامیده می شود. تبلیغات AmpHTML در مقایسه با موارد غیر آمپر سریعتر هستند زیرا از مشخصات آمپر پیروی می کنند.

با استفاده از مولفه های آمپ موجود مانند lightbox و carousel ، می توان انواع مختلفی از قالب های تبلیغاتی amphtml را ایجاد کرد که می تواند به نمایش تبلیغات کمک کند.

در حال حاضر، تبلیغات زیر از تبلیغات amphtml پشتیبانی می کنند –

  • DoubleClick for Publishers
  • TripleLift
  • Dianomi
  • Adzerk
  • Google AdSens

تبلیغات amphtml همانطور که در زیر نشان داده شده است از مولفه <amp-ad> نمایش داده می شود –

مثال

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Amp HTMLAds</title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width=device-width,
      minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <script async custom-element = "amp-ad" src =
         "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
      </script>
      <style amp-custom>
         .ad-container {
            background: #FFFFFF;
            margin: 0;
            padding: 0px;
            text-align:center;
         }
         .article-body{
            font-family: avenir, Helvetica, arial, serif, sans-serif !important;
            font-weight: 400;
            text-align:center;
         }
         .adv {
            text-align:center;
         }
      </style>
   </head>
   <body>
      <div>
         <p>Amphtml ads are faster in comparison to the non 
         amp ones as they follow the amp specification.</p>
         <p>Amphtml ads work fine in amp pages as well as non amp pages</p>
         <div class = "ad-container">
            <div>Advertising</div>
            <amp-ad layout = "fixed"
               width = "300"
               height = "250"
               type = "fake"
               id = "i-amphtml-demo-fake"
               src = "ampimg.html">
            </amp-ad>
         </div>
         <p>Amphtml ads are faster in comparison to the non amp 
         ones as they follow the amp specification.</p>
         <p>Amphtml ads work fine in amp pages as well as non amp pages</p>
      </div>
   </body>
</html>

 

 

 

ما برای نمایش تبلیغات با amp-ad تماس می گیریم. src استفاده شده در amp-ad صفحه آمپر دیگری است. ما از type = ”fake” و id = ”i-amphtml-demo-fake” استفاده کرده ایم. جزئیات صفحه amp یا ampimg.html استفاده شده در برچسب amp-ad در اینجا نشان داده شده است –

ampimg.html

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Image</title>
      <link rel = "canonical" href =
      "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content="width = device-width,
      minimum-scale = 1,initial-scale = 1">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <style amp-custom>
         amp-img {
            border: 1px solid black;
            border-radius: 4px;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <amp-img alt = "Beautiful Flower"
         src = "images/bannerad.png"
         width = "246"
         height = "205">
      </amp-img>
   </body>
</html>

 

Amp Img Html

 

منبع.

لیست جلسات قبل آموزش گوگل AMP

  1. آموزش گوگل AMP
  2. بررسی اجمالی گوگل AMP
  3. مقدمه گوگل AMP
  4. آموزش تصاویر در گوگل AMP
  5. آموزش فرم در گوگل AMP
  6.  آموزش Iframes در گوگل AMP
  7. آموزش ویدیو در گوگل AMP
  8. آموزش دکمه در گوگل AMP
  9. آموزش Timeago در گوگل AMP
  10. آموزش Mathml در گوگل AMP
  11. آموزش تگ Fit Text در گوگل AMP
  12. آموزش شمارش معکوس تاریخ در گوگل AMP
  13. آموزش انتخاب کننده تاریخ در گوگل AMP
  14. آموزش استوری در گوگل AMP
  15. آموزش انتخاب کننده در گوگل AMP
  16. آموزش لینک در گوگل AMP
  17. آموزش فونت در گوگل AMP
  18. آموزش لیست در گوگل AMP
  19. آموزش اعلان کاربر در گوگل AMP
  20. آموزش next page در گوگل AMP
  21. آموزش ویژگی ها در گوگل AMP
  22. آموزش استایل ها و CSS سفارشی در گوگل AMP
  23. آموزش کلاس های CSS پویا در گوگل AMP
  24. آموزش اکشن ها و رویدادها در گوگل AMP
  25. آموزش انیمیشن در گوگل AMP
  26. آموزش اتصال داده در گوگل AMP
  27. آموزش طرح بندی در گوگل AMP
  28. آموزش تبلیغات در گوگل AMP
  29. آموزش تجزیه و تحلیل در گوگل AMP
  30. آموزش ویجت های اجتماعی در گوگل AMP
  31. آموزش نحو در گوگل AMP
  32. آموزش اعتبار سنجی در گوگل AMP
  33. آموزش اجزا جاوا اسکریپت در گوگل AMP
0
0
برچسب ها :
نویسنده مطلب erfan molaei

دیدگاه شما

بدون دیدگاه