آموزش تجزیه و تحلیل در گوگل AMP

erfan molaei
3 سال پیش
آموزش تجزیه و تحلیل در گوگل AMP

آموزش تجزیه و تحلیل در گوگل AMP

 

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

 

amp-analytics یک مولفه amp است که برای ردیابی داده ها در یک صفحه استفاده می شود. تمام تعاملات کاربر در صفحه را می توان ثبت و ذخیره کرد تا داده ها را برای پیشرفت های بیشتر یا اهداف تجاری تجزیه و تحلیل کند.

برای کار با مولفه amp-analytics، باید اسکریپت زیر را در بخش head اضافه کنیم –

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

 

برای ثبت وقایع مورد استفاده در amp-analytics، می توانیم از فروشنده شخص ثالث استفاده کنیم یا همچنین می توانیم از سیستم ردیابی داخلی استفاده کنیم.

مثال amp-analytics با استفاده از فروشنده GoogleAnalytics

<amp-analytics type = googleanalytics>
   <script type = application/json>{
      "requests": {
         "pageview": "${eventId}"
      },
      "vars": {
         "account": "UA-44450152-1"
      },
      "triggers": {
         "trackPageview" : {
            "on": "visible",
            "request": "pageview",
            "vars": {
               "eventId": "pageview"
            }
         }
      }
   }
   </script>
</amp-analytics>

 

مثال amp-analytics با استفاده از comscore vendor

 

<amp-analytics type = comscore>
   <script type = application/json>
      {"vars": {"c2":"7922264"}}
   </script>
</amp-analytics>

 

مثال amp-analytics با استفاده از chartbeat vendor

<amp-analytics type = chartbeat>
   <script type = application/json>{
      "vars": {
         "uid": "230",
         "domain": "dummyurl.com",
         "sections": "us",
         "authors": "Hello World"
      }
   }</script>
</amp-analytics>

 

لیست دقیق فروشندگان در اینجا موجود است.

یک مثال مفید در مورد نحوه استفاده از فروشنده تجزیه و تحلیل داخلی در زیر آورده شده است –

 

مثال

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics" 
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalytics.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>
      <h1>Google Amp - Analytics</h1>
      <amp-analytics>
         <script type = "application/json">
            {
               "requests": {
                  "event": "http://localhost:8080/googleamp/tracking.php?
                  user=test&account=localhost&event=${eventId}"
               },
               "triggers": {
                  "trackPageview": {
                     "on": "visible",
                     "request": "event",
                        "vars": {
                           "eventId": "pageview"
                        }
                  }
               }
            }
         </script>
      </amp-analytics>
   </body>
</html>

 

وقتی صفحه در مرورگر قرار گرفت، ردیاب برای مشاهده صفحه اخراج می شود. همانطور که در زیر نشان داده شده است ، می توانید آن را در زبانه شبکه google مشاهده کنید.

Amp Pageview
همچنین وقتی عنصر خاصی در صفحه قابل مشاهده است ، می توانید رویداد amp-analytics را خاموش کنید. یک مثال فعال برای همان در اینجا نشان داده شده است –

 

مثال

 

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics" 
         src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalytics.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-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <amp-video controls 
         id = "videoplayer"
         width = "640"
         height = "360"
         layout = "responsive"
         poster = "images/videoposter.png"
         autoplay>
            <source src = "video/bunny.webm" type = "video/webm" />
            <source src = "video/samplevideo.mp4" type = "video/mp4" />
               <div fallback>
                  <p>This browser does not support the video element.</p>
               </div>
      </amp-video>
      <amp-analytics>
         <script type = "application/json">
         {
         "requests": {
            "event": "http://localhost:8080/googleamp/tracking.php?
            user=test&account=localhost&event=${eventId}"
         },
         "triggers": {
            "trackPageview": {
               "on": "visible",
               "request": "event",
                  "visibilitySpec": {
                     "selector": "#videoplayer",
                     "visiblePercentageMin": 20,
                     "totalTimeMin": 2000,
                     "continuousTimeMin": 200
                  },
                  "vars": {
                     "eventId": "video"
                  }
               }
            }
         }
         </script>
      </amp-analytics>
   </body>
</html>

 

خروجی

Amp Analytics

 

مولفه Amp-Analytics نیاز دارد که یک شی j json به تگ اسکریپت منتقل شود. قالب json به شرح زیر است –

{
   "requests": {
      request-name: request-value,
      ...
   },
   "vars": {
      var-name: var-value,
      ...
   },
   "extraUrlParams": {
      extraurlparam-name: extraurlparam-value,
      ...
   },
   "triggers": {
      trigger-name: trigger-object,
      ...
   },
   "transport": {
      "beacon": *boolean*,
      "xhrpost": *boolean*,
      "image": *boolean*,
   }
}

 

تمام اشیا مشخص شده در بالا اجباری نیستند که به amp-analytics منتقل شوند. اگر از فروشگاه شخص ثالثی استفاده می کنید، فروشگاه قالب خود را خواهد داشت و کاربر باید داده ها را به همان شکل منتقل کند.

بگذارید هر یک از این شی ها را با جزئیات درک کنیم –

درخواست ها در تجزیه و تحلیل در گوگل AMP

شی درخواستها دارای یک آدرس اینترنتی است که در صورت تحقق شرایط برای شلیک استفاده می شود. نمونه ای از آبجکت درخواست ها در اینجا نشان داده شده است –

"requests": {
   "request-name": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},

 

 

 vars

تمام متغیرهای مورد استفاده در شی درخواست در شی vars مشخص شده اند.

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}"
},
"vars": {
   "eventId": "video"
}

 

پارامترهای اضافی URL 

پارامترهای دیگری که به عنوان رشته کوئری به آدرس درخواست اضافه می شوند ، می توانند در این شی تعریف شوند. مثال زیر را مشاهده کنید

"requests": {
   "event": "http://localhost:8080/googleamp/tracking.php?
   user=test&account=localhost&event=${eventId}&x=1&y=2&z=3"
},
"vars": {
   "eventId": "video"
},
"extraUrlParams": {
   "x": "1",
   "y": "2",
   "z": "3"
}

 

 

Triggers

این شی زمانی را درخواست می کند که url درخواست درخواست شود. جفت های مقدار-کلید که در داخل بدنه Triggersدر دسترس هستند به شرح زیر است –

on  – باید به رویدادی که گوش داده می شود اشاره کنید. مقادیر موجود برای روشن عبارتند از: شروع رندر ، بارگذاری ini، کلیک، پیمایش، تایمر، قابل مشاهده، پنهان، خطای کاربر ، دسترسی- * و فیلم- * و…

request– این نام درخواست است. این باید با نام درخواست در شی درخواست مطابقت داشته باشد.

vars – این شی با متغیرهای مقدار کلیدی است که برای استفاده در داخل بدنه Triggers تعریف شده یا برای لغو مقدار کلیدی vars تعریف شده استفاده می شود.

Selector – این جزئیات عنصری را که Triggers روی آن تنظیم شده است نشان می دهد.

scrollSpec – این جزئیات Triggers پیمایش را دارد.

timerSpec – این جزئیات زمان داده شده را نشان می دهد.

videoSpec – این جزئیاتی است که برای یک ویدیو فراخوانی می شود.

در اینجا مثالی آورده شده است که در آن amp-video اضافه کرده ایم. وقتی عنصر ویدیو در صفحه موجود باشد ، حداقل ۲۰٪ در صفحه قابل مشاهده باشد ، تجزیه و تحلیل Amp ردیاب را روشن می کند ، ویدئو باید حداقل ۲ ثانیه پخش شود و از نظر دید ۲۰۰ میلی ثانیه مداوم است. وقتی همه این شرایط محقق شود ، فقط ردیاب اخراج می شود. جزئیات در زیر نشان داده شده است –

Amp Analytics Ex

اضافه کردن شرایط مربوط به قابلیت مشاهده عنصر و سایر شرایط مانند اینکه عنصر باید حداقل ۲۰٪ قابل مشاهده باشد ، فیلم باید برای ۲ ثانیه پخش شود ، همه این شرایط باید در داخل visibilitySpec مشخص شود همانطور که در زیر نشان داده شده است –

<amp-analytics>
  <script type = "application/json">
   {
      "requests": {
         "event": "http://localhost:8080/googleamp/tracking.php?
         user=test&account=localhost&event=${eventId}"
      },
      "triggers": {
         "trackPageview": {
            "on": "visible",
            "request": "event",
               "visibilitySpec": {
                  "selector": "#videoplayer",
                  "visiblePercentageMin": 20,
                  "totalTimeMin": 2000,
                  "continuousTimeMin": 200
               },
               "vars": {
                  "eventId": "video"
               }
         }
      }
   }
   </script>
</amp-analytics>

 

videoSpec به شما امکان می دهد شرایطی را تعیین کنید که براساس آن می خواهید Triggers کننده ردیاب را آغاز کند. شرایط در اینجا ذکر شده است –

waitFor

این ویژگی برای محرک دید استفاده می شود تا قبل از Triggers منتظر مورد خاصی باشید. گزینه های موجود برای waitFor هیچ کدام نیست ، ini-load و render-start است. به طور پیش فرض ، مقدار waitFor از نوع ini است.

reportWhen

این ویژگی برای محرک دید به کار می رود تا قبل از شلیک منتظر مورد خاصی باشید. مقدار پشتیبانی شده documentExit است. شما نمی توانید از reportWhen استفاده کنید و ویژگی را با هم در داخل visibilitySpec تکرار کنید

continuousTimeMin و continuousTimeMax

این ویژگی نشان می دهد که ردیاب دید برای Triggers به عنصر مورد نظر باید به طور مداوم در بین viewTimeMin و ContinuTimeMax در ویوپورت باشد. اگر ContinousTimeMin مشخص نشده باشد ، به طور پیش فرض روی ۰ تنظیم می شود. مقدار در میلی ثانیه تعیین می شود.

totalTimeMin و totalTimeMin

این ویژگی نشان می دهد که ردیاب قابلیت مشاهده برای روشن کردن عنصر مورد نظر باید برای مدت زمان کلی بین totalTimeMin و totalTimeMin در viewport باشد. اگر totalTimeMin مشخص نشده باشد به طور پیش فرض ۰ می شود. مقدار در میلی ثانیه مشخص شده است.

قابل مشاهدهPercentageMin و قابل مشاهدهPercentageMax

این ویژگی نشان می دهد که ردیاب قابلیت مشاهده برای روشن کردن نیاز به عنصری است که در ویوپورت بین درصد اختصاص داده شده به قابل مشاهده PercetageMin و قابل مشاهده PercentageMax قابل مشاهده باشد. مقادیر پیش فرض قابل مشاهده برایPercentageMin 0 و ۱۰۰ برای visibilePercentageMax است. هر دو مقادیر ۰ دارند ، وقتی که عنصر قابل مشاهده نباشد و اگر هردو دارای ۱۰۰ باشند ، مقادیر ۰ خاموش می شود وقتی که عنصر کاملاً قابل مشاهده است.

تکرار

اگر روی درست تنظیم شود، هر زمان که شرایط مشاهده وجود داشته باشد ، ماشه آتش می زند. به طور پیش فرض ، مقدار تکرار نادرست است. نمی توان از آن به همراه ویژگی reportWhen استفاده کرد.

یک مثال برای کلیک ماشه در اینجا نشان داده شده است –

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>amp-analytics</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <script async custom-element = "amp-analytics" 
      src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
      </script>
      <link rel = "canonical" href = "ampanalytics.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-video" 
         src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
      </script>
      <style amp-custom>
         a {
            color: blue;
         }
      </style>
   </head>
   <body>
      <h1>Google Amp - Analytics</h1>
      <a>Click Here</a>
      <amp-analytics>
         <script type = "application/json">
            {
               "requests": {
                  "event": "http://localhost:8080/googleamp/tracking.php?
                  user=test&account=localhost&event=${eventId}"
               },
               "triggers": {
                  "trackAnchorClicks": {
                  "on": "click",
                  "selector": "a",
                  "request": "event",
                     "vars": {
                        "eventId": "clickonlink"
                     }
                  }
               }
            }
         </script>
      </amp-analytics>
   </body>
</html>

 

خروجی

Amp Visibility

با کلیک روی لینک، رویداد مطابق شکل زیر اخراج می شود –

 

Amp Visibility Link

 

منبع.

لیست جلسات قبل آموزش گوگل 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

دیدگاه شما

بدون دیدگاه