Analytics را به صفحات AMP اضافه کنید

صفحات موبایل تسریع شده (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>