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

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

ইনস্টলেশন

Google ট্যাগ আপনাকে এএমপি পৃষ্ঠাগুলিতে Google Analytics, Google বিজ্ঞাপন এবং অন্যান্য Google পণ্য ইনস্টল করতে দেয়। Google ট্যাগ ম্যানেজার একটি AMP কন্টেইনার সেট আপ করে এবং আপনাকে উন্নত কনফিগারেশন তৈরি করার এবং ট্যাগ ম্যানেজার ইন্টারফেস থেকে তৃতীয় পক্ষের ট্যাগ স্থাপন করার ক্ষমতা দেয়।

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

গুগল ট্যাগ

gtag.js-এর এএমপি বাস্তবায়ন amp-analytics কাঠামো ব্যবহার করে আপনাকে আপনার এএমপি ওয়েবসাইটে ইনস্ট্রুমেন্ট অ্যানালিটিক্স করার ক্ষমতা দেয়। একই 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 বিজ্ঞাপন, Google Analytics) ট্যাগ ID দিয়ে <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 ডকুমেন্টেশন দেখুন।

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

আপনার পণ্যগুলিতে নির্দিষ্ট ডেটা পাঠাতে, ক্লিকগুলির মতো ইভেন্টগুলির উপর ভিত্তি করে ট্রিগারগুলি কনফিগার করুন৷ এএমপি-তে 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"
    }
  }
}

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

ডোমেইন লিঙ্কার আলাদা ডোমেনে দুই বা ততোধিক সম্পর্কিত সাইটকে এক হিসাবে পরিমাপ করতে সক্ষম করে। যে ডোমেনগুলিকে লিঙ্ক করা উচিত তা নির্দিষ্ট করতে, "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>

এএমপি ক্যাশে থেকে আপনার ক্যানোনিকাল ডোমেনের সাথে লিঙ্ক করার ক্ষমতা ডিফল্টরূপে সক্ষম করা আছে। ডোমেন ট্র্যাফিক লিঙ্ক করার ক্ষমতা বন্ধ করতে, config পরামিতিগুলিতে "linker": "false" যোগ করুন:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</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>

সমস্যা সমাধান

আপনার ট্যাগিং সেটআপ যাচাই করতে amptagtest.appspot.com ব্যবহার করুন অথবা আপনি নিম্নলিখিতগুলি করে ডোমেন জুড়ে cid মানটি সামঞ্জস্যপূর্ণ কিনা তা ম্যানুয়ালি নিশ্চিত করতে পারেন:

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

  • একবার আপনি Google CDN থেকে ক্লায়েন্ট ওয়েবসাইটে পাস করলে, cid এবং gclid মান URL সজ্জার মাধ্যমে পাস করা উচিত: 

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

  • চূড়ান্ত ল্যান্ডিং পৃষ্ঠার এখনও প্রাথমিক ল্যান্ডিং পৃষ্ঠার মতো একই cid মান থাকা উচিত।

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