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

پروژه صفحات موبایل پرشتاب (AMP) یک پلتفرم وب متن‌باز است که به بهبود عملکرد محتوای وب شما کمک می‌کند. AMP شامل پشتیبانی داخلی از تگ گوگل و گوگل تگ منیجر است. این راهنما نحوه تنظیم گوگل آنالیتیکس برای صفحات AMP را شرح می‌دهد.

نصب

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

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

برچسب گوگل

پیاده‌سازی 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>

سپس، تگ گوگل را به عنوان یک کامپوننت 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>

برای پیکربندی چندین محصول در تگ گوگل، نیازی به نصب کل تگ از آن محصول ندارید. فقط باید شناسه مقصد را به یک دستور 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 به گوگل آنالیتیکس را نشان می‌دهد. مقدار selector یک انتخابگر CSS است که به شما امکان می‌دهد مشخص کنید کدام عنصر هدف قرار گیرد. مقدار on نوع رویداد را مشخص می‌کند که در این مورد یک رویداد click است. در بخش vars ، نوع رویداد را در event_name مشخص کنید و در صورت لزوم پارامترهای اضافی را اضافه کنید.

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

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

ارسال ابعاد و پارامترهای سفارشی با گوگل آنالیتیکس

برای ارسال ابعاد و معیارهای سفارشی به گوگل آنالیتیکس از صفحات AMP با استفاده از gtag.js ، می‌توانید از ویژگی extraUrlParams در پیکربندی‌های تریگر خود در <amp-analytics> JSON استفاده کنید. پارامترهای سفارشی در گوگل آنالیتیکس به عنوان پارامترهای رویداد ارسال می‌شوند.

  • برای پارامترهای رویداد رشته‌ای از پیشوند ep. استفاده کنید.
  • برای پارامترهای رویداد با مقدار عددی از پیشوند epn. استفاده کنید.

قبل از ارسال، مطمئن شوید که این ابعاد و معیارهای سفارشی در ویژگی Google Analytics شما ثبت شده‌اند.

مثال: پارامترهای سفارشی با نمای صفحه

این پیکربندی یک بُعد سفارشی my_custom_dimension و یک معیار سفارشی my_page_score را به همراه نمای اولیه صفحه ارسال می‌کند:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

مثال: پارامترهای سفارشی با رویداد کلیک

این پیکربندی، پارامترهای سفارشی را هنگام کلیک روی عنصری با شناسه myButton ارسال می‌کند:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

لینک‌دهنده دامنه این امکان را فراهم می‌کند که دو یا چند سایت مرتبط در دامنه‌های جداگانه به عنوان یک سایت واحد اندازه‌گیری شوند. برای مشخص کردن دامنه‌هایی که باید به هم لینک شوند، از "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 را نشان می‌دهد که یک صفحه 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>

عیب‌یابی

برای اعتبارسنجی تنظیمات برچسب‌گذاری خود از validator.amp.dev استفاده کنید یا می‌توانید با انجام موارد زیر به صورت دستی مطمئن شوید که مقدار cid در بین دامنه‌ها یکسان است:

  • حتماً کوکی‌ها را پاک کنید یا از حالت ناشناس استفاده کنید.
  • اگر cid در کوکی گوگل آنالیتیکس یافت نشد، می‌توانید آن را در تب Network مرورگر وب خود نیز مشاهده کنید. عبارت collect request را جستجو کنید، و payload باید حاوی مقدار cid باشد.

  • پس از انتقال از صفحه AMP به دامنه دیگری از وب‌سایت خود، مقدار cid و gclid باید با استفاده از تزئین URL ارسال شوند: 

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

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

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