এএমপি-র জন্য ট্যাগ সেট-আপ করা

Accelerated Mobile Pages (AMP) প্রোজেক্ট হল একটি ওপেন-সোর্স ওয়েব প্ল্যাটফর্ম যা আপনার ওয়েব কন্টেন্টের পারফর্ম্যান্স উন্নত করতে সাহায্য করে। Google ট্যাগ ও Google Tag Manager-এর জন্য বিল্ট-ইন সহায়তা AMP-তে অন্তর্ভুক্ত থাকে। এই নির্দেশিকায় এএমপি পৃষ্ঠার জন্য Google Analytics কীভাবে সেট-আপ করতে হয় তা বর্ণনা করা হয়েছে।

ইনস্টল করা

Google ট্যাগ আপনাকে এএমপি পৃষ্ঠায় Google Analytics, Google Ads এবং অন্যান্য Google প্রোডাক্ট ইনস্টল করতে দেয়। Google Tag Manager একটি এএমপি কন্টেনার সেট-আপ করে এবং আপনাকে উন্নত কনফিগারেশন তৈরি করার এবং Tag Manager ইন্টারফেস থেকে থার্ড-পার্টি ট্যাগ ডিপ্লয় করার ক্ষমতা দেয়।

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

Tag Manager Google ট্যাগ

Google ট্যাগ

gtag.js-এর AMP প্রয়োগ amp-analytics ফ্রেমওয়ার্ক ব্যবহার করে আপনাকে নিজের AMP ওয়েবসাইটে অ্যানালিটিক্স ইনস্ট্রুমেন্ট করার ক্ষমতা দেয়। একই gtag.js ইমপ্লিমেন্টেশন থেকে 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>

এরপর, পৃষ্ঠার <body> ট্যাগের মধ্যে JSON কম্পোনেন্ট হিসেবে আপনার AMP পৃষ্ঠায় Google ট্যাগ যোগ করুন। আপনি যে প্রোডাক্টে (যেমন, Google Ads, Google Analytics) ডেটা পাঠাতে চান, সেটির ট্যাগ আইডি দিয়ে <TARGET_ID> পরিবর্তন করুন:

<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 ডকুমেন্টেশন দেখুন।

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

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

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

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

সাজেস্ট করা ইভেন্ট ছাড়াও, আপনি নিজের কাস্টম ইভেন্ট নির্দিষ্ট করতে পারবেন।

Google Analytics-এর মাধ্যমে কাস্টম ডাইমেনশন ও প্যারামিটার পাঠানো

gtag.js ব্যবহার করে AMP পৃষ্ঠা থেকে Google Analytics-এ কাস্টম ডাইমেনশন ও মেট্রিক পাঠাতে, <amp-analytics> JSON-এ আপনার ট্রিগার কনফিগারেশনের মধ্যে extraUrlParams প্রপার্টি ব্যবহার করতে পারবেন। 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>

উদাহরণ: ক্লিক ইভেন্টের সাথে কাস্টম প্যারামিটার

ID 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 ভ্যালু নিম্নলিখিত কাজগুলি করে ডোমেন জুড়ে একই আছে:

• কুকি মুছে দিতে বা ছদ্মবেশী মোড ব্যবহার করতে ভুলবেন না।
• Google Analytics কুকিতে cid খুঁজে না পাওয়া গেলে, এটি আপনার ওয়েব ব্রাউজারের নেটওয়ার্ক ট্যাবেও দেখা যেতে পারে। collect request-এর জন্য সার্চ করুন, এবং পেলোডে cid ভ্যালু থাকতে হবে।

• আপনি AMP পৃষ্ঠা থেকে আপনার ওয়েবসাইটের অন্য ডোমেনে ট্রানজিট করার পরে, URL ডেকোরেশন ব্যবহার করে cid এবং gclid ভ্যালু পাস করতে হবে:

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

• ফাইনাল ল্যান্ডিং পৃষ্ঠায় এখনও প্রাথমিক ল্যান্ডিং পৃষ্ঠার মতো একই cid ভ্যালু থাকতে হবে।

• আদর্শ পৃষ্ঠা এবং নন-এএমপি ল্যান্ডিং পৃষ্ঠার মধ্যে রিডাইরেক্ট এবং ডোমেন পরিবর্তন করার সময় সতর্ক থাকুন।