এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

AMP-এর জন্য ট্যাগ সেটআপ

অ্যাক্সিলারেটেড মোবাইল পেজেস (AMP) প্রজেক্ট হলো একটি ওপেন-সোর্স ওয়েব প্ল্যাটফর্ম যা আপনার ওয়েব কন্টেন্টের পারফরম্যান্স উন্নত করতে সাহায্য করে। AMP-তে গুগল ট্যাগ এবং গুগল ট্যাগ ম্যানেজারের জন্য বিল্ট-ইন সাপোর্ট রয়েছে। এই গাইডে AMP পেজগুলোর জন্য কীভাবে গুগল অ্যানালিটিক্স সেট আপ করতে হয় তা বর্ণনা করা হয়েছে।

ইনস্টলেশন

গুগল ট্যাগ আপনাকে AMP পেজে গুগল অ্যানালিটিক্স, গুগল অ্যাডস এবং অন্যান্য গুগল প্রোডাক্ট ইনস্টল করার সুযোগ দেয়। গুগল ট্যাগ ম্যানেজার একটি AMP কন্টেইনার সেট আপ করে এবং আপনাকে ট্যাগ ম্যানেজার ইন্টারফেস থেকে অ্যাডভান্সড কনফিগারেশন তৈরি ও থার্ড-পার্টি ট্যাগ ডেপ্লয় করার সুবিধা দেয়।

নিচের বাটনগুলো থেকে আপনার পছন্দের প্ল্যাটফর্ম নির্বাচন করুন:

গুগল ট্যাগ

gtag.js-এর AMP ইমপ্লিমেন্টেশনটি আপনার AMP ওয়েবসাইটে অ্যানালিটিক্স পরিচালনা করার ক্ষমতা দিতে amp-analytics ফ্রেমওয়ার্ক ব্যবহার করে। একই gtag.js ইমপ্লিমেন্টেশন থেকে AMP পেজগুলো থেকে Google Ads, Google Analytics এবং অন্যান্য Google প্রোডাক্টে ডেটা পাঠানো যায়।

ইনস্টলেশন

একটি AMP পেজে gtag.js কনফিগার করতে, প্রথমে নিশ্চিত করুন যে আপনি পেজটির <head> ট্যাগের মধ্যে amp-analytics কম্পোনেন্টটি অন্তর্ভুক্ত করেছেন:

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

এরপরে, আপনার AMP পেজে <body> ট্যাগের ভিতরে একটি JSON কম্পোনেন্ট হিসেবে Google ট্যাগটি যোগ করুন। <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>

দ্রষ্টব্য: আপনার গুগল ট্যাগের আইডিগুলো পরস্পর পরিবর্তনযোগ্য। আপনি যদি একটি আইডি যোগ করে থাকেন, তবে অন্যটির জন্য আলাদা config লাইনের প্রয়োজন নেই। উদাহরণস্বরূপ, আপনি যদি অ্যানালিটিক্স-এর জন্য আইডি (অর্থাৎ, "G-" দিয়ে শুরু হওয়া একটি আইডি) আগে থেকেই যোগ করে থাকেন, তাহলে আপনাকে অ্যাডস-এর জন্য আইডি (অর্থাৎ, "AW-" দিয়ে শুরু হওয়া একটি আইডি) যোগ করতে হবে না।

আরও তথ্যের জন্য, amp-analytics ডকুমেন্টেশন দেখুন।

ইভেন্ট ট্রিগার

আপনার প্রোডাক্টগুলিতে নির্দিষ্ট ডেটা পাঠাতে, ক্লিকের মতো ইভেন্টের উপর ভিত্তি করে ট্রিগার কনফিগার করুন। AMP-তে gtag.js এর জন্য ট্রিগারগুলি অন্যান্য amp-analytics ট্রিগার কনফিগারেশনের মতোই একই JSON প্যাটার্ন অনুসরণ করে।

এই উদাহরণটি দেখায় কিভাবে গুগল অ্যানালিটিক্সে একটি click ইভেন্ট পাঠাতে হয়। selector ভ্যালুটি একটি CSS সিলেক্টর যা আপনাকে নির্দিষ্ট করতে দেয় কোন এলিমেন্টকে টার্গেট করা হবে। ' on ' ভ্যালুটি ইভেন্টের ধরন নির্দিষ্ট করে, যা এই ক্ষেত্রে একটি click ইভেন্ট। vars সেকশনে, event_name এ ইভেন্টের ধরন নির্দিষ্ট করুন এবং প্রয়োজন অনুযায়ী অতিরিক্ত প্যারামিটার যোগ করুন।

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

প্রস্তাবিত ইভেন্টগুলোর পাশাপাশি, আপনি আপনার নিজস্ব ইভেন্টও নির্দিষ্ট করতে পারেন।

গুগল অ্যানালিটিক্সের সাথে কাস্টম ডাইমেনশন এবং প্যারামিটার পাঠান

gtag.js ব্যবহার করে AMP পেজ থেকে Google Analytics-এ কাস্টম ডাইমেনশন এবং মেট্রিক্স পাঠাতে, আপনি <amp-analytics> JSON-এর মধ্যে আপনার ট্রিগার কনফিগারেশনে extraUrlParams প্রপার্টিটি ব্যবহার করতে পারেন। Google Analytics-এ কাস্টম প্যারামিটারগুলো ইভেন্ট প্যারামিটার হিসেবে পাঠানো হয়।

স্ট্রিং-মানের ইভেন্ট প্যারামিটারের জন্য ep. উপসর্গটি ব্যবহার করুন।
সংখ্যাসূচক ইভেন্ট প্যারামিটারের জন্য epn. উপসর্গটি ব্যবহার করুন।

পাঠানোর আগে, নিশ্চিত করুন যে এই কাস্টম ডাইমেনশন এবং মেট্রিকগুলি আপনার গুগল অ্যানালিটিক্স প্রপার্টিতে নিবন্ধিত আছে।

উদাহরণ: পেজ ভিউ সহ কাস্টম প্যারামিটার

এই কনফিগারেশনটি প্রাথমিক পেজ ভিউয়ের সাথে একটি কাস্টম ডাইমেনশন 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 পেজ তৈরি করে এবং বাটনটি ক্লিক করা হলে Google Analytics-এ একটি button-click ইভেন্ট পাঠায়। <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 খুঁজে না পাওয়া যায়, তবে এটি আপনার ওয়েব ব্রাউজারের নেটওয়ার্ক ট্যাবেও দেখা যেতে পারে। collect request লিখে সার্চ করুন, এবং পেলোডে একটি cid ভ্যালু থাকা উচিত।
একবার আপনি AMP পৃষ্ঠা থেকে আপনার ওয়েবসাইটের অন্য কোনো ডোমেনে স্থানান্তরিত হলে, URL ডেকোরেশন ব্যবহার করে cid এবং gclid মান পাস করতে হবে:
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
চূড়ান্ত ল্যান্ডিং পেজটিতেও প্রাথমিক ল্যান্ডিং পেজের মতো একই cid ভ্যালু থাকা উচিত।
ক্যানোনিকাল পেজ এবং নন-এএমপি ল্যান্ডিং পেজগুলোর মধ্যে রিডাইরেক্ট ও ডোমেইন পরিবর্তনের ক্ষেত্রে সতর্ক থাকুন।