এএমপি পৃষ্ঠাগুলিতে বিশ্লেষণ যোগ করুন

Accelerated Mobile Pages (AMP) হল একটি প্ল্যাটফর্ম যা স্ট্যাটিক কন্টেন্টের জন্য ওয়েব পেজ তৈরি করতে ব্যবহৃত হয় যা দ্রুত রেন্ডার করে। AMP-এ একটি <amp-analytics> উপাদান রয়েছে যা ব্যবহারকারীর মিথস্ক্রিয়া পরিমাপ করতে সক্ষম করে এবং এটি Google Analytics-এর জন্য অন্তর্নির্মিত সমর্থন রয়েছে।

পৃষ্ঠা দর্শন পরিমাপ করার জন্য মৌলিক সেটআপ

একটি AMP পৃষ্ঠায় Google Analytics-এর একটি প্রাথমিক ইনস্টলেশন তৈরি করতে, এই কোড স্নিপেটটি অনুলিপি করুন এবং আপনার Google ট্যাগ ID দিয়ে <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> ট্যাগ সহ একাধিক গন্তব্যে ডেটা পাঠাতে পারেন, কেবলমাত্র আপনার config কমান্ডে নতুন পরিমাপ আইডি <GA_MEASUREMENT_ID_NEW> যোগ করুন।

<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> উপাদানটি একটি বর্ধিত এএমপি উপাদান এবং একটি স্ক্রিপ্ট ট্যাগে একটি custom-element হিসাবে স্পষ্টভাবে সক্ষম করা হয়েছে।

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

Google পরিমাপ পণ্যগুলির জন্য সমর্থন সক্ষম করতে <amp-analytics> উপাদান ব্লক কনফিগার করা হয়েছে। <amp-analytics> এর জন্য type অ্যাট্রিবিউটকে " gtag " (gtag.js সমর্থন সক্ষম করতে) এবং data-credentials বৈশিষ্ট্যকে " অন্তর্ভুক্ত " (কুকিজ সক্ষম করতে) তে সেট করুন।

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

এএমপি তার নিজস্ব অনুমোদিত লাইব্রেরির বাইরে কোনো জাভাস্ক্রিপ্টকে অনুমতি দেয় না, তাই কনফিগারেশন পরিবর্তে JSON-এর সাথে সঞ্চালিত হয়। একটি বৈধ <GA_MEASUREMENT_ID> সহ একটি gtag_id প্রপার্টি vars ব্লকে যোগ করা হয়েছে এবং তার নিচে <GA_MEASUREMENT_ID>: {} মান হিসেবে যোগ করা হয়েছে।

ঘটনা পরিমাপ

এএমপি পৃষ্ঠাগুলিতে ইভেন্ট পরিমাপ করতে সংজ্ঞায়িত মান সহ triggers ব্যবহার করুন। এই বৈশিষ্ট্যগুলি একটি ট্রিগার কনফিগারেশনে ব্যবহৃত হয়:

  • selector : একটি লক্ষ্য উপাদান নির্দিষ্ট করার জন্য একটি CSS নির্বাচক।
  • on : ইভেন্টের ধরন নির্দিষ্ট করে।
  • vars : event_name এ ইভেন্টের ধরন নির্দিষ্ট করুন এবং প্রয়োজনে অতিরিক্ত প্যারামিটার যোগ করুন।

এই উদাহরণটি দেখায় কিভাবে একটি মৌলিক Google Analytics ইভেন্ট সেট আপ করতে হয়। " বোতাম " নামক একটি ট্রিগার তৈরি করুন যেটি যখন " দ্য-বোতাম " আইডি মান সহ একটি উপাদান ক্লিক করা হয় তখন ফায়ার হবে৷ এই ট্রিগারটি Google Analytics-এ " লগইন " এর একটি event_name মান এবং " Google " এর একটি method মান পাঠাবে:

<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>

Google Analytics ইভেন্টগুলি হল Google 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 প্যারামিটার ওভাররাইড করতে বা নতুন প্যারামিটার যোগ করতে, আপনার config ব্লকের parameter বিভাগে পছন্দসই মান যোগ করুন। এই উদাহরণটি 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>

Google Analytics কনফিগার করা এএমপি পৃষ্ঠাগুলিতে, এএমপি ক্যাশে থেকে আপনার ক্যানোনিকাল ডোমেনের সাথে লিঙ্ক করার ক্ষমতা ডিফল্টরূপে সক্রিয় থাকে। ডোমেন ট্রাফিক লিঙ্ক করার জন্য 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>

ইউনিভার্সাল অ্যানালিটিক্সের জন্য সাইটের গতি

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>

এএমপি বনাম নন-এএমপি ট্রাফিক

এএমপি ট্রাফিক ডিফল্টভাবে ওয়েব ট্রাফিকের জন্য আলাদা ক্লায়েন্ট আইডি ব্যবহার করে। এএমপি পৃষ্ঠাগুলি দ্রুত লোড হয় এবং তাদের স্ট্যান্ডার্ড ওয়েব পৃষ্ঠার সমকক্ষের তুলনায় ভিন্ন ট্রাফিক প্যাটার্ন দেখায়, যার মানে প্রায়ই আপনি এএমপি এবং নন-এএমপি ট্র্যাফিকের মধ্যে বিভিন্ন মেট্রিক্স পাবেন।

এএমপি ট্র্যাফিক পরিমাপ করার জন্য একটি পৃথক প্রপার্টি ব্যবহার করলে মেট্রিক্সের আরও ভাল বিশ্লেষণ এবং আপনার ট্র্যাফিকের আরও সঠিক চিত্র পাওয়া যায়। যদি আপনি একটি একক প্রপার্টি ব্যবহার করতে চান তাহলে এএমপি এবং নন-এএমপি ট্রাফিকের মধ্যে পার্থক্য করতে:

  • ডেটা সোর্স ডাইমেনশন বা একটি কাস্টম ডাইমেনশন (ইউনিভার্সাল অ্যানালিটিক্স) ব্যবহার করুন।
  • একটি কাস্টম ইভেন্ট প্যারামিটার ব্যবহার করুন (Google Analytics 4)।

আপনার কনফিগারেশন ডিবাগ করুন

কোনো ওয়েব পৃষ্ঠা এএমপি এইচটিএমএল স্পেসিফিকেশন পূরণ করে না তা শনাক্ত করতে AMP ভ্যালিডেটর ব্যবহার করা যেতে পারে। যাচাইকারী চালু করতে একটি পৃষ্ঠার URL-এ #development=1 যোগ করুন।

amp-analytics এক্সটেনশন একটি কনফিগারেশন ডিবাগ এবং সমস্যা সমাধানে সহায়তা করার জন্য সতর্কতা এবং ত্রুটি বার্তা প্রদান করে। আপনার ওয়েব ব্রাউজারের কনসোলে লগ করা ত্রুটি বার্তা দেখতে একটি পৃষ্ঠার URL-এ #log=1 যোগ করুন।

সম্পূর্ণ উদাহরণ

এই উদাহরণটি একটি পৃষ্ঠায় একটি বোতাম সহ একটি সম্পূর্ণ 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>