صفحات موبایل تسریع شده (AMP) پلتفرمی است که برای ساخت صفحات وب برای محتوای ثابت که سریع رندر می شوند استفاده می شود. AMP شامل یک عنصر <amp-analytics>
است که اندازه گیری تعاملات کاربر را امکان پذیر می کند و دارای پشتیبانی داخلی برای Google Analytics است.
راه اندازی اولیه برای اندازه گیری بازدید از صفحه
برای ایجاد یک نصب اولیه Google Analytics در یک صفحه AMP، این قطعه کد را کپی کنید و <GA_MEASUREMENT_ID>
را با شناسه برچسب Google خود جایگزین کنید. شناسه تگ گوگل خود را پیدا کنید .
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
ارسال داده به مقصدهای مختلف
میتوانید با یک برچسب <amp-analytics>
دادهها را به چند مقصد ارسال کنید، به سادگی شناسه اندازهگیری جدید <GA_MEASUREMENT_ID_NEW>
را به دستور config
خود اضافه کنید.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" },
"<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
چگونه کار می کند
عنصر <amp-analytics>
یک جزء AMP توسعه یافته است و به طور واضح به عنوان یک custom-element
در یک تگ اسکریپت فعال می شود.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
بلوک عنصر <amp-analytics>
برای فعال کردن پشتیبانی از محصولات اندازهگیری Google پیکربندی شده است. ویژگی type
را برای <amp-analytics>
روی " gtag " (برای فعال کردن پشتیبانی gtag.js) و ویژگی data-credentials
را روی " شامل " (برای فعال کردن کوکی ها) تنظیم کنید.
<amp-analytics type="gtag" data-credentials="include">
...
</amp-analytics>
AMP هیچ جاوا اسکریپتی را فراتر از کتابخانه های تایید شده خود اجازه نمی دهد، بنابراین پیکربندی در عوض با JSON انجام می شود. یک ویژگی gtag_id
با یک <GA_MEASUREMENT_ID>
معتبر به بلوک vars
اضافه میشود و در زیر آن یک ویژگی پیکربندی با <GA_MEASUREMENT_ID>: {}
به عنوان مقدار اضافه میشود.
رویدادها را اندازه گیری کنید
از triggers
با مقادیر تعریف شده برای اندازه گیری رویدادها در صفحات AMP استفاده کنید. این ویژگی ها در یک پیکربندی تریگر استفاده می شوند:
-
selector
: یک انتخابگر CSS برای تعیین یک عنصر هدف. -
on
: نوع رویداد را مشخص می کند. -
vars
: نوع رویداد را درevent_name
مشخص کنید و در صورت لزوم پارامترهای اضافی را اضافه کنید.
این مثال نحوه تنظیم یک رویداد اصلی Google Analytics را نشان می دهد. یک ماشه به نام " دکمه " ایجاد کنید که با کلیک روی عنصری با مقدار شناسه " the-button " فعال می شود. این راهانداز یک مقدار event_name
از « ورود » و یک مقدار method
« Google » را به Google Analytics ارسال میکند:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#the-button", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
رویدادهای گوگل آنالیتیکس دسته ای از رویدادهای خاص گوگل آنالیتیکس هستند که معمولاً برای ایجاد گزارش در کمپین ها استفاده می شوند. این مقادیر را می توان در بلوک vars با پارامترهای event_category
، event_label
و value
مشخص کرد:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#login", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
برای کسب اطلاعات بیشتر در مورد پیکربندی تریگر، به مستندات amp-analytics
مراجعه کنید.
تغییر پارامترها
برای نادیده گرفتن پارامترهای پیش فرض Google Analytics یا افزودن پارامترهای جدید، مقادیر مورد نظر را به بخش parameter
بلوک config
خود اضافه کنید. این مثال مقادیر پیشفرض نمای صفحه و رویداد را برای page_title
و page_location
لغو میکند:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "page_title": "Beethoven symphonies", "page_location": "https://www.example.com/beethoven.html" } } } } </script> </amp-analytics>
پیوند دامنه ها
پیوند دهنده دامنه دو یا چند سایت مرتبط در دامنه های جداگانه را قادر می سازد تا به عنوان یک اندازه گیری شوند. دامنه هایی را که باید با "linker": { "domains": [...] }
خاصیت:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": { "domains": ["example.com", "example2.com"] } } } } } </script> </amp-analytics>
در صفحات AMP با پیکربندی گوگل آنالیتیکس، قابلیت پیوند دادن به دامنه متعارف خود از کش AMP به طور پیش فرض فعال است. برای غیرفعال کردن توانایی Google Analytics برای پیوند دادن ترافیک دامنه، "linker": "false"
را به پارامترهای پیکربندی اضافه کنید:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": "false" } } } } </script> </amp-analytics>
سرعت سایت برای Universal Analytics
Google Analytics طوری پیکربندی شده است که به طور خودکار داده های سرعت سایت را برای بخش کوچکی از ترافیک سایت شما جمع آوری کند. برای جمع آوری داده های بیشتر یا کمتر می توانید نرخ نمونه را تغییر دهید. برای تنظیم نرخ نمونه روی 100٪، کد برجسته شده را به پیکربندی خود اضافه کنید:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 100 } } } } </script> </amp-analytics>
برای توقف جمع آوری داده های سرعت سایت، از کد برجسته شده استفاده کنید:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 0 } } } } </script> </amp-analytics>
ترافیک AMP در مقابل ترافیک غیر AMP
ترافیک AMP به طور پیشفرض از شناسههای مشتری متفاوت از شناسههای ترافیک وب استفاده میکند. صفحات AMP سریعتر بارگیری میشوند و الگوهای ترافیکی متفاوتی نسبت به صفحات وب استاندارد خود نشان میدهند، که اغلب به این معنی است که معیارهای متفاوتی بین ترافیک AMP و غیرAMP دریافت خواهید کرد.
استفاده از ویژگی جداگانه برای اندازه گیری ترافیک AMP امکان تجزیه و تحلیل بهتر معیارها و تصویر دقیق تری از ترافیک شما را فراهم می کند. برای تشخیص ترافیک AMP و غیر AMP در صورت نیاز به استفاده از یک ویژگی:
- از بعد منبع داده یا یک بعد سفارشی (Universal Analytics) استفاده کنید.
- از یک پارامتر رویداد سفارشی (Google Analytics 4) استفاده کنید.
پیکربندی خود را اشکال زدایی کنید
AMP Validator می تواند برای تشخیص اینکه آیا یک صفحه وب با مشخصات AMP HTML مطابقت ندارد استفاده می شود. برای روشن کردن اعتباردهنده، #development=1
به URL یک صفحه اضافه کنید.
افزونه amp-analytics
پیامهای هشدار و خطا را برای کمک به اشکالزدایی و عیبیابی پیکربندی ارائه میکند. برای مشاهده پیامهای خطای ثبتشده در کنسول مرورگر وب #log=1
به URL یک صفحه اضافه کنید.
مثال کامل
این مثال یک صفحه AMP کامل را با یک دکمه در یک صفحه نشان می دهد. این پیکربندی دادههای استاندارد مشاهده صفحه و رویدادهای « دکمه کلیک » را به Google Analytics ارسال میکند:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="self.html" />
<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>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Make it so.</h1>
<div>
<button type="button" id="the-button">Engage!</button>
</div>
</body>
</html>
منابع مرتبط
- AMP: پروژه AMP
- AMP: AMP چیست؟
- AMP: amp-analytics
- gtag.js: از gtag.js با AMP استفاده کنید
- مرکز راهنمایی یونیورسال آنالیتیکس: صفحات موبایل شتاب (AMP)
- مرکز راهنمایی گوگل آنالیتیکس 4: صفحات موبایل شتاب (AMP)