آموزش اعلان کاربر در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش اعلان کاربر در گوگل AMP

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

amp-user-notification برای نشان دادن پیام های کادر گفتگوی قابل حذف به کاربر استفاده می شود. ما می توانیم از آن برای آگاه سازی کاربر درباره کوکی های موجود در صفحه استفاده کنیم.

برای کار با اعلان amp-user ما باید اسکریپت زیر را در صفحه اضافه کنیم –

&lt;script async custom-element = "amp-user-notification" 
   src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"&gt;
&lt;/script&gt;

src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">

</script>

فرمت تگ Amp-user-notification

&lt;amp-user-notification id = "my-notification" layout = "nodisplay"&gt;
   &lt;div&gt;Example of amp-user-notification. 
      &lt;button on = "tap:my-notification.dismiss"&gt;I accept
      &lt;/button&gt;
   &lt;/div&gt;
&lt;/amp-user-notification&gt;

<amp-user-notification id = "my-notification" layout = "nodisplay">

<div>Example of amp-user-notification.

<button on = "tap:my-notification.dismiss">I accept

</button>

</div>

</amp-user-notification>

با استفاده از یک مثال مفید، amp-user-notification را درک کنیم –

مثال

&lt;!doctype html&gt;
&lt;html amp lang = "en"&gt;
   &lt;head&gt;
      &lt;meta charset = "utf-8"&gt;
      &lt;script async src = "https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
      &lt;title&gt;Google AMP - Amp Selector&lt;/title&gt;
      &lt;link rel = "canonical" href = " http://example.ampproject.org/article-metadata.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"&gt;
   
      &lt;style amp-boilerplate&gt;
         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}}
      &lt;/style&gt;
      
      &lt;noscript&gt;
         &lt;style amp-boilerplate&gt;
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none
               animation:none
            }
         &lt;/style&gt;
      &lt;/noscript&gt;
   
      &lt;script async custom-element = "amp-user-notification" 
         src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"&gt;
      &lt;/script&gt;
   
      &lt;style amp-custom&gt;
         div {
            font-size: 15px;
            background-color : #ccc;
            padding: 10px 10px;
            border-radius: 2px;
         }
         button{ 
            background-color: #ACAD5C; 
            color: white; 
            cursor: pointer; 
            float: right;
         }
      &lt;/style&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Google AMP - Amp User Notification&lt;/h3&gt;
      &lt;amp-user-notification
         id = "my-notification"
         layout = "nodisplay"&gt;
         &lt;div&gt;Example of amp-user-notification. 
            &lt;button on = "tap:my-notification.dismiss"&gt;I accept
            &lt;/button&gt;
         &lt;/div&gt;
      &lt;/amp-user-notification&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>Google AMP - Amp Selector</title>

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>

body{

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none

animation:none

}

</style>

</noscript>

src = "https://cdn.ampproject.org/v0/amp-user-notification-0.1.js">

</script>

div {

font-size: 15px;

background-color : #ccc;

padding: 10px 10px;

border-radius: 2px;

}

button{

background-color: #ACAD5C;

color: white;

cursor: pointer;

float: right;

}

</style>

</head>

<body>

<h3>Google AMP - Amp User Notification</h3>

<amp-user-notification

id = "my-notification"

layout = "nodisplay">

<div>Example of amp-user-notification.

<button on = "tap:my-notification.dismiss">I accept

</button>

</div>

</amp-user-notification>

</body>

</html>

خروجی

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

پس از کلیک کاربر بر روی دکمه ، اعلان رد می شود. پس از رد شدن ، حتی در صورت بارگیری مجدد صفحه ، اعلان نمایش داده نمی شود.

داده های اعلان کاربر در localStorage مرورگر ذخیره می شود. اگر محلی ذخیره شود پاک شود و صفحه تازه شود ، شما می توانید اعلان را دوباره ببینید. با استفاده از ()localStorage.clear در کنسول مرورگر می توانید همین کار را انجام دهید.

با استفاده از اکشن dismiss، با استفاده از عملکرد on a button به شرح زیر می توان اعلان را رد کرد

&lt;button on = "tap:my-notification.dismiss"&gt;
   I accept
&lt;/button&gt;

I accept

</button>

وقتی کاربر روی دکمه ضربه بزند، اعلان رد می شود.

منبع.

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

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش اعلان کاربر در گوگل AMP

آموزش اعلان کاربر در گوگل AMP

مثال

خروجی

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

دیدگاه شما

بدون دیدگاه

آموزش اعلان کاربر در گوگل AMP

مثال

خروجی

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

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه