تنظیم برچسب برای AMP

پروژه Accelerated Mobile Pages (AMP) یک پلت فرم وب منبع باز است که به بهبود عملکرد محتوای وب شما کمک می کند. AMP شامل پشتیبانی داخلی برای تگ Google و Google Tag Manager است. این راهنما نحوه تنظیم Google Analytics برای صفحات AMP را شرح می دهد.

نصب و راه اندازی

تگ Google به شما امکان می دهد Google Analytics، Google Ads و سایر محصولات Google را در صفحات AMP نصب کنید. Google Tag Manager یک کانتینر AMP را راه‌اندازی می‌کند و به شما امکان ایجاد تنظیمات پیشرفته و استقرار برچسب‌های شخص ثالث را از رابط Tag Manager می‌دهد.

پلتفرم ترجیحی خود را از دکمه های زیر انتخاب کنید:

تگ گوگل

اجرای AMP gtag.js از چارچوب amp-analytics استفاده می کند تا به شما امکان تجزیه و تحلیل ابزار را در وب سایت AMP خود بدهد. داده ها را می توان از صفحات AMP به Google Ads، Google Analytics و سایر محصولات Google از همان پیاده سازی gtag.js ارسال کرد.

نصب و راه اندازی

برای پیکربندی gtag.js در یک صفحه AMP، ابتدا مطمئن شوید که جزء amp-analytics در تگ <head> در صفحه قرار داده اید:

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

سپس، تگ Google را به عنوان یک جزء JSON در تگ <body> در صفحه به صفحه AMP خود اضافه کنید. <TARGET_ID> را با شناسه برچسب محصولاتی (به عنوان مثال، Google Ads، Google Analytics) که می‌خواهید داده‌ها را به آنها ارسال کنید، جایگزین کنید:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

برای پیکربندی چندین محصول در تگ Google، نیازی به نصب کل تگ از آن محصول ندارید. فقط باید شناسه مقصد را به یک دستور config جداگانه اضافه کنید.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

برای اطلاعات بیشتر، به مستندات amp-analytics مراجعه کنید.

محرک های رویداد

برای ارسال داده‌های خاص به محصولات خود، محرک‌ها را بر اساس رویدادهایی مانند کلیک‌ها پیکربندی کنید. تریگرها برای gtag.js در AMP از همان الگوهای JSON پیروی می کنند که سایر پیکربندی های راه انداز amp-analytics .

این مثال نحوه ارسال یک رویداد click به Google Analytics را نشان می دهد. مقدار selector یک انتخابگر CSS است که به شما امکان می دهد مشخص کنید کدام عنصر مورد نظر است. مقدار on نوع رویداد را مشخص می کند که در این مورد یک رویداد click است. در قسمت vars نوع رویداد را در event_name مشخص کنید و در صورت لزوم پارامترهای اضافی اضافه کنید.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

علاوه بر رویدادهای توصیه شده ، می توانید رویدادهای سفارشی خود را مشخص کنید.

پیوند دهنده دامنه دو یا چند سایت مرتبط در دامنه های جداگانه را قادر می سازد تا به عنوان یک اندازه گیری شوند. برای تعیین دامنه هایی که باید پیوند داده شوند، از "linker": { "domains": [...] } :

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

قابلیت پیوند دادن به دامنه متعارف خود از حافظه نهان AMP به طور پیش فرض فعال است. برای غیرفعال کردن امکان پیوند دادن ترافیک دامنه، "linker": "false" را به پارامترهای config اضافه کنید:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

مثال کامل

این مثال کد یک نسخه نمایشی کامل از یک صفحه AMP را نشان می دهد که یک صفحه AMP ایجاد می کند و با کلیک button-click دکمه را به Google Analytics ارسال می کند. <TAG_ID> با یک شناسه برچسب معتبر جایگزین کنید:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <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>

    <!-- 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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

عیب یابی

از amptagtest.appspot.com برای تأیید تنظیم برچسب‌گذاری خود استفاده کنید یا می‌توانید با انجام کارهای زیر به صورت دستی اطمینان حاصل کنید که مقدار cid در بین دامنه‌ها سازگار است:

  • مطمئن شوید که کوکی‌ها را پاک کنید یا از حالت ناشناس استفاده کنید.
  • اگر cid در یک کوکی Google Analytics یافت نشد، می‌توانید آن را در برگه شبکه مرورگر وب شما نیز مشاهده کنید. collect request را جستجو کنید و محموله باید حاوی مقدار cid باشد.

  • هنگامی که از Google CDN به وب سایت مشتری منتقل شدید، مقدار cid و gclid باید از طریق دکوراسیون URL ارسال شود: 

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • صفحه فرود نهایی همچنان باید همان مقدار cid در صفحه فرود اولیه داشته باشد.

  • مراقب تغییر مسیرها و تغییرات دامنه بین صفحه اصلی و صفحات فرود غیرAMP باشید.