راه‌اندازی برچسب برای AMP

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

نصب

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

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

برچسب Google

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

نصب

برای پیکربندی 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"
    }
  }
}

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

ارسال ابعاد و پارامترهای سفارشی با Google Analytics

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

  • برای پارامترهای رویداد با مقدار رشته‌ای، از پیشوند 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 در کوکی Google Analytics پیدا نشد، می‌توانید آن را در برگه «شبکه» مرورگر وب خود نیز مشاهده کنید. collect request را جستجو کنید، و محتوای پیام باید مقدار cid داشته باشد.
  • پس‌از اینکه از صفحه AMP به دامنه دیگری از وب‌سایتتان منتقل شدید، cid و مقدار gclid باید بااستفاده از تزئین نشانی وب منتقل شوند:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
    
  • صفحه مقصد نهایی باید همچنان مقدار cid یکسانی با صفحه مقصد اولیه داشته باشد.

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