Google Analytics 4 ব্যবহার করুন

এই টিউটোরিয়ালটি Google Analytics ব্যবহার করে আপনার এক্সটেনশনের ব্যবহার কীভাবে ট্র্যাক করবেন তা প্রদর্শন করে। আপনি Github-এ একটি কার্যকর Google Analytics 4 নমুনা খুঁজে পেতে পারেন, যেখানে google-analytics.js Google Analytics সম্পর্কিত সমস্ত কোড অন্তর্ভুক্ত থাকে।

আবশ্যকতা

এই টিউটোরিয়ালটি ধরে নিয়েছে যে আপনি Chrome এক্সটেনশন লেখার সাথে পরিচিত। যদি আপনার এক্সটেনশন লেখার বিষয়ে তথ্যের প্রয়োজন হয়, তাহলে অনুগ্রহ করে "শুরু করা" টিউটোরিয়ালটি পড়ুন।

আপনার এক্সটেনশন ট্র্যাক করার জন্য আপনাকে একটি Google Analytics 4 অ্যাকাউন্টও সেট আপ করতে হবে। মনে রাখবেন যে অ্যাকাউন্ট সেট আপ করার সময়, আপনি ওয়েবসাইটের URL ক্ষেত্রের যেকোনো মান ব্যবহার করতে পারেন, কারণ আপনার এক্সটেনশনের নিজস্ব কোনও URL থাকবে না।

Using the Google Analytics Measurement Protocol

Since Manifest V3, Chrome Extensions are not allowed to execute remote hosted code . This means you have to use the Google Analytics Measurement Protocol for tracking extension events. The Measurement Protocol lets you send events directly to Google Analytics servers via HTTP requests. A benefit of this approach is that it lets you send analytics events from everywhere in your extension, including your service worker.

Set up API credentials

প্রথম ধাপ হল একটি api_secret এবং measurement_id সংগ্রহ করা। আপনার Analytics অ্যাকাউন্টের জন্য এগুলি কীভাবে পাবেন তার জন্য Measurement Protocol ডকুমেন্টেশন অনুসরণ করুন।

Generate a client_id

দ্বিতীয় ধাপ হল একটি নির্দিষ্ট ডিভাইস/ব্যবহারকারীর জন্য একটি অনন্য শনাক্তকারী তৈরি করা, client_id । ব্যবহারকারীর ব্রাউজারে এক্সটেনশনটি ইনস্টল থাকা পর্যন্ত আইডিটি একই থাকবে। এটি একটি ইচ্ছামত স্ট্রিং হতে পারে, তবে ক্লায়েন্টের জন্য অনন্য হওয়া উচিত। client_id টি chrome.storage.local এ সংরক্ষণ করুন যাতে এক্সটেনশনটি ইনস্টল থাকা পর্যন্ত এটি একই থাকে।

chrome.storage.local ব্যবহার করার জন্য আপনার ম্যানিফেস্ট ফাইলে storage অনুমতি প্রয়োজন:

manifest.json:

{
  …
  "permissions": ["storage"],
  …
}

তারপর আপনি client_id সংরক্ষণ করতে chrome.storage.local ব্যবহার করতে পারেন:

function getRandomId() {
  const digits = '123456789'.split('');
  let result = '';

  for (let i = 0; i < 10; i++) {
    result += digits[Math.floor(Math.random() * 9)];
  }

  return result;
}

async function getOrCreateClientId() {
  const result = await chrome.storage.local.get('clientId');
  let clientId = result.clientId;
  if (!clientId) {
    // Generate a unique client ID, the actual value is not relevant. We use
    // the <number>.<number> format since this is typical for GA client IDs.
    const unixTimestampSeconds = Math.floor(new Date().getTime() / 1000);
    clientId = `${this.getRandomId()}.${unixTimestampSeconds}`;
    await chrome.storage.local.set({clientId});
  }
  return clientId;
}

Send an analytics event

API শংসাপত্র এবং client_id ব্যবহার করে, আপনি একটি fetch অনুরোধের মাধ্যমে Google Analytics-এ একটি ইভেন্ট পাঠাতে পারেন:

const GA_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
const MEASUREMENT_ID = `G-...`;
const API_SECRET = `...`;

fetch(
  `${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,
  {
    method: 'POST',
    body: JSON.stringify({
      client_id: await getOrCreateClientId(),
      events: [
        {
          name: 'button_clicked',
          params: {
            id: 'my-button',
          },
        },
      ],
    }),
  }
);

এটি একটি button_clicked ইভেন্ট পাঠাবে যা আপনার Google Analytics ইভেন্ট রিপোর্টে প্রদর্শিত হবে। আপনি যদি Google Analytics রিয়েলটাইম রিপোর্টে আপনার ইভেন্টগুলি দেখতে চান, তাহলে আপনাকে দুটি অতিরিক্ত প্যারামিটার প্রদান করতে হবে: session_id এবং engagement_time_msec ।

প্রস্তাবিত প্যারামিটার session_id এবং engagement_time_msec ব্যবহার করুন

Both session_id and engagement_time_msec are recommended parameters when using the Google Analytics Measurement Protocol as they are required for user activity to display in standard reports like Realtime.

A session_id describes a period of time, during which a user continuously interacts with your extension. By default, a session ends after 30 minutes of user inactivity. There is no limit to how long a session can last.

সাধারণ ওয়েবসাইটের মতো, Chrome এক্সটেনশনে ব্যবহারকারীর সেশনের কোনও স্পষ্ট ধারণা থাকে না। অতএব, আপনার এক্সটেনশনে ব্যবহারকারীর সেশনের অর্থ কী তা আপনাকে অবশ্যই সংজ্ঞায়িত করতে হবে। উদাহরণস্বরূপ, প্রতিটি নতুন ব্যবহারকারীর ইন্টারঅ্যাকশন একটি নতুন সেশন হতে পারে। সেক্ষেত্রে, আপনি প্রতিটি ইভেন্টের সাথে একটি নতুন সেশন আইডি তৈরি করতে পারেন (অর্থাৎ একটি টাইমস্ট্যাম্প ব্যবহার করে)।

নিচের উদাহরণটি এমন একটি পদ্ধতি প্রদর্শন করে যা ৩০ মিনিটের মধ্যে কোনও ইভেন্ট রিপোর্ট না করার পরে একটি নতুন সেশনের সময়সীমা শেষ করে দেয় (এই সময়টি আপনার এক্সটেনশনের ব্যবহারকারীর আচরণের সাথে আরও উপযুক্ত করে কাস্টমাইজ করা যেতে পারে)। উদাহরণটি ব্রাউজার চলাকালীন সক্রিয় সেশন সংরক্ষণ করতে chrome.storage.session ব্যবহার করে। সেশনের সাথে আমরা শেষবার কোনও ইভেন্ট চালানোর সময় সংরক্ষণ করি। এইভাবে আমরা জানতে পারি সক্রিয় সেশনের মেয়াদ শেষ হয়ে গেছে কিনা:

const SESSION_EXPIRATION_IN_MIN = 30;

async function getOrCreateSessionId() {
  // Store session in memory storage
  let {sessionData} = await chrome.storage.session.get('sessionData');
  // Check if session exists and is still valid
  const currentTimeInMs = Date.now();
  if (sessionData && sessionData.timestamp) {
    // Calculate how long ago the session was last updated
    const durationInMin = (currentTimeInMs - sessionData.timestamp) / 60000;
    // Check if last update lays past the session expiration threshold
    if (durationInMin > SESSION_EXPIRATION_IN_MIN) {
      // Delete old session id to start a new session
      sessionData = null;
    } else {
      // Update timestamp to keep session alive
      sessionData.timestamp = currentTimeInMs;
      await chrome.storage.session.set({sessionData});
    }
  }
  if (!sessionData) {
    // Create and store a new session
    sessionData = {
      session_id: currentTimeInMs.toString(),
      timestamp: currentTimeInMs.toString(),
    };
    await chrome.storage.session.set({sessionData});
  }
  return sessionData.session_id;
}

নিচের উদাহরণটি পূর্ববর্তী বোতাম ক্লিক ইভেন্ট অনুরোধে session_id এবং engagement_time_msec যোগ করে। engagement_time_msec এর জন্য আপনি 100 ms এর একটি ডিফল্ট মান প্রদান করতে পারেন।

const GA_ENDPOINT = "https://www.google-analytics.com/mp/collect";
const MEASUREMENT_ID = `G-...`;
const API_SECRET = `...`;
const DEFAULT_ENGAGEMENT_TIME_IN_MSEC = 100;

fetch(
`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,
  {
    method: "POST",
    body: JSON.stringify({
      client_id: await getOrCreateClientId(),
      events: [
        {
          name: "button_clicked",
          params: {
            session_id: await this.getOrCreateSessionId(),
            engagement_time_msec: DEFAULT_ENGAGEMENT_TIME_IN_MSEC,
            id: "my-button",
          },
        },
      ],
    }),
  }
);

গুগল অ্যানালিটিক্স রিয়েলটাইম রিপোর্টে ইভেন্টটি নিম্নরূপ প্রদর্শিত হবে।

পপআপ, সাইড প্যানেল এবং এক্সটেনশন পৃষ্ঠাগুলিতে পৃষ্ঠা দর্শন ট্র্যাক করা

গুগল অ্যানালিটিক্স মেজারমেন্ট প্রোটোকল পেজ ভিউ ট্র্যাক করার জন্য একটি বিশেষ page_view ইভেন্ট সমর্থন করে। একটি নতুন ট্যাবে আপনার পপআপ পেজ, সাইড প্যানেল বা এক্সটেনশন পেজ পরিদর্শনকারী ব্যবহারকারীদের ট্র্যাক করতে এটি ব্যবহার করুন। page_view ইভেন্টের জন্য page_title এবং page_location প্যারামিটারও প্রয়োজন। নিম্নলিখিত উদাহরণটি একটি এক্সটেনশন পপআপের জন্য ডকুমেন্ট load ইভেন্টে একটি পেজ ভিউ ইভেন্ট চালু করে।:

popup.js:

window.addEventListener("load", async () => {
  fetch(`${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,
  {
    method: "POST",
    body: JSON.stringify({
      client_id: await getOrCreateClientId(),
      events: [
        {
          name: "page_view",
          params: {
            session_id: await getOrCreateSessionId(),
            engagement_time_msec: DEFAULT_ENGAGEMENT_TIME_IN_MSEC,
            page_title: document.title,
            page_location: document.location.href
          },
        },
      ],
    }),
  });
});

popup.js স্ক্রিপ্টটি আপনার পপআপের html ফাইলে আমদানি করতে হবে এবং অন্য কোনও স্ক্রিপ্ট কার্যকর হওয়ার আগে এটি চালানো উচিত:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Analytics Demo Popup</title>
    <script src="./popup.js" type="module"></script>
  </head>
  <body>
    <h1>Analytics Demo</h1>
  </body>
</html>

গুগল অ্যানালিটিক্স রিয়েলটাইম রিপোর্টে পপআপ ভিউটি অন্য যেকোনো পেজ ভিউয়ের মতোই প্রদর্শিত হবে:

Tracking analytics events in service workers

গুগল অ্যানালিটিক্স মেজারমেন্ট প্রোটোকল ব্যবহার করে এক্সটেনশন সার্ভিস কর্মীদের মধ্যে অ্যানালিটিক্স ইভেন্টগুলি ট্র্যাক করা সম্ভব হয়। উদাহরণস্বরূপ, আপনার সার্ভিস কর্মীর unhandledrejection event শুনে, আপনি আপনার সার্ভিস কর্মীর যেকোনো অচেনা ব্যতিক্রম গুগল অ্যানালিটিক্সে লগ করতে পারেন, যা আপনার ব্যবহারকারীরা যে সমস্যাগুলি রিপোর্ট করতে পারে তা ডিবাগ করতে ব্যাপকভাবে সাহায্য করতে পারে।

service-worker.js:

addEventListener("unhandledrejection", async (event) => {
  `${GA_ENDPOINT}?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`,
  {
    method: "POST",
    body: JSON.stringify({
      client_id: getOrCreateClientId(),
      events: [
        {
          // Note: 'error' is a reserved event name and cannot be used
          // see https://developers.google.com/analytics/devguides/collection/protocol/ga4/reference?client_type=gtag#reserved_names
          name: "extension_error",
          params: {
            session_id: await this.getOrCreateSessionId(),
            engagement_time_msec: DEFAULT_ENGAGEMENT_TIME_IN_MSEC,
            message: error.message,
            stack: error.stack,
          },
        },
      ],
    }),
  }
});

আপনি এখন আপনার Google Analytics রিপোর্টে ত্রুটির ঘটনাটি দেখতে পাবেন:

Debugging

আপনার এক্সটেনশনে অ্যানালিটিক্স ইভেন্ট ডিবাগ করার জন্য গুগল অ্যানালিটিক্স দুটি সহায়ক বৈশিষ্ট্য প্রদান করে:

1. একটি বিশেষ ডিবাগিং এন্ডপয়েন্ট https://www.google-analytics.com**/debug**/mp/collect যা আপনার ইভেন্ট সংজ্ঞায় যেকোনো ত্রুটি রিপোর্ট করবে।
2. গুগল অ্যানালিটিক্স রিয়েলটাইম রিপোর্ট যা ইভেন্টগুলি আসার সাথে সাথে প্রদর্শন করবে।