কাস্টম টেমপ্লেট দ্রুত শুরু গাইড

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

কাস্টম ট্যাগ এবং পরিবর্তনশীল টেমপ্লেটগুলি Google ট্যাগ ম্যানেজারের টেমপ্লেট বিভাগে সংজ্ঞায়িত করা হয়েছে। প্রধান টেমপ্লেট স্ক্রীন আপনার কন্টেইনারে ইতিমধ্যে সংজ্ঞায়িত করা হয়েছে এমন কোনো ট্যাগ বা পরিবর্তনশীল টেমপ্লেট তালিকাভুক্ত করবে। আপনি এই স্ক্রীন থেকে নতুন টেমপ্লেটও তৈরি করতে পারেন।

আপনি একটি টেমপ্লেট রপ্তানি করতে পারেন এবং আপনার সংস্থার অন্যদের সাথে শেয়ার করতে পারেন এবং কমিউনিটি টেমপ্লেট গ্যালারিতে বিস্তৃত বিতরণের জন্য টেমপ্লেটগুলি তৈরি করা যেতে পারে।

টেমপ্লেট সম্পাদক

টেমপ্লেট এডিটর আপনাকে কাস্টম টেমপ্লেট তৈরি, পূর্বরূপ এবং পরীক্ষা করতে সক্ষম করে। আপনার ট্যাগ টেমপ্লেট সংজ্ঞায়িত করতে সাহায্য করার জন্য এটিতে ইনপুটের জন্য চারটি প্রাথমিক ক্ষেত্র রয়েছে:

  • তথ্য - টেমপ্লেটের মৌলিক বৈশিষ্ট্য সংজ্ঞায়িত করুন, যেমন ট্যাগ বা পরিবর্তনশীল নাম এবং আইকন।
  • ক্ষেত্র - এটি আপনার ট্যাগ টেমপ্লেটে ইনপুট ক্ষেত্র যোগ করার জন্য একটি ভিজ্যুয়াল এডিটর।
  • কোড - আপনার ট্যাগ বা ভেরিয়েবলের আচরণ কেমন হবে তা নির্ধারণ করতে স্যান্ডবক্সযুক্ত জাভাস্ক্রিপ্ট লিখুন।
  • অনুমতি - দেখুন এবং আপনার ট্যাগ বা ভেরিয়েবল কি করার অনুমতি আছে তার সীমা সেট করুন।

আপনার প্রথম কাস্টম ট্যাগ টেমপ্লেট তৈরি করুন

কিভাবে একটি মৌলিক উদাহরণ পিক্সেল ট্যাগ তৈরি করতে হয় এই উদাহরণটি আপনাকে নিয়ে যাবে। যখন এই ট্যাগটি একটি ওয়েব পেজে ফায়ার করা হয়, তখন এটি ট্যাগ প্রদানকারীর সার্ভারে সঠিক অ্যাকাউন্টের তথ্য সহ একটি হিট পাঠাবে৷

1. আপনার প্রথম টেমপ্লেট শুরু করতে, বাম নেভিগেশনে টেমপ্লেট ক্লিক করুন এবং ট্যাগ টেমপ্লেট বিভাগের অধীনে নতুন বোতামে ক্লিক করুন।

2. তথ্য ক্লিক করুন এবং ট্যাগের নাম (প্রয়োজনীয়), বিবরণ এবং আইকন সংজ্ঞায়িত করুন।

ব্যবহারকারীরা যখন ট্যাগ ম্যানেজার ইউজার ইন্টারফেস জুড়ে এই ট্যাগটি প্রয়োগ করতে যাবেন তখন নামটি তাদের কাছে উপস্থাপন করা হবে৷

বর্ণনার মত শোনাচ্ছে - এই ট্যাগটি কী করে তার একটি সংক্ষিপ্ত (200 অক্ষর বা কম) বর্ণনা৷

আইকন আপনাকে এমন একটি চিত্র চয়ন করতে দেয় যা ট্যাগটি আইকন বৈশিষ্ট্য সমর্থন করে এমন তালিকায় প্রদর্শিত হলে প্রদর্শিত হবে। আইকন চিত্রগুলি বর্গাকার PNG, JPEG, বা GIF ফাইলগুলি হওয়া উচিত যা 50 kB এর চেয়ে বড় নয় এবং কমপক্ষে 64px x 64px।

3. আপনার টেমপ্লেটের পূর্বরূপ দেখতে রিফ্রেশ ক্লিক করুন৷

ফিল্ড ইনপুটগুলির ডানদিকে, একটি টেমপ্লেট প্রিভিউ উইন্ডো রয়েছে। প্রতিবার সম্পাদকে পরিবর্তন করা হলে, রিফ্রেশ বোতামটি প্রদর্শিত হবে। আপনার পরিবর্তনগুলি আপনার ট্যাগের উপস্থিতিতে কী করে তা দেখতে রিফ্রেশ ক্লিক করুন৷

4. আপনার ট্যাগ টেমপ্লেটে ক্ষেত্র যোগ করতে ক্ষেত্রগুলিতে ক্লিক করুন।

টেমপ্লেট এডিটরের ফিল্ড ট্যাব আপনাকে ট্যাগ টেমপ্লেটে ক্ষেত্র তৈরি ও সম্পাদনা করতে দেয়। ক্ষেত্রগুলি কাস্টম ডেটা প্রবেশ করতে ব্যবহৃত হয়, যেমন একটি অ্যাকাউন্ট আইডি। আপনি টেক্সট ক্ষেত্র, ড্রপ ডাউন মেনু, রেডিও বোতাম এবং চেকবক্সের মতো স্ট্যান্ডার্ড ফর্ম উপাদান যোগ করতে পারেন।

5. ক্ষেত্র যোগ করুন ক্লিক করুন এবং পাঠ্য ইনপুট নির্বাচন করুন। ডিফল্ট নাম (যেমন "টেক্সট1" ) প্রতিস্থাপন করুন "accountId" দিয়ে। টেমপ্লেট প্রিভিউতে , রিফ্রেশ ক্লিক করুন।

ক্ষেত্রের পরিচিত পরিবর্তনশীল নির্বাচক থাকবে ( পরিবর্তনশীল নির্বাচক আইকন ) এর পাশে আইকন। এই টেমপ্লেটের ব্যবহারকারীরা এই কন্টেইনারে সক্রিয় ভেরিয়েবল বেছে নিতে পরিবর্তনশীল নির্বাচক আইকনে ক্লিক করতে পারেন।

পরবর্তী ধাপ হল ক্ষেত্রে একটি লেবেল যোগ করা:

6. প্রসারিত আইকনে ক্লিক করুন ( আইকন প্রসারিত করুন ) এই ক্ষেত্রের জন্য আরও বিকল্প খুলতে পাঠ্য ক্ষেত্রের পাশে। প্রদর্শন নামের ক্ষেত্রে " অ্যাকাউন্ট আইডি " লিখুন। টেমপ্লেট প্রিভিউতে , রিফ্রেশ ক্লিক করুন।

" অ্যাকাউন্ট আইডি " শিরোনামের একটি পাঠ্য লেবেল ক্ষেত্রের উপরে উপস্থিত হওয়া উচিত৷

7. কোড ট্যাবে ক্লিক করুন এবং সম্পাদকে স্যান্ডবক্সযুক্ত জাভাস্ক্রিপ্ট লিখুন:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

কোডের প্রথম লাইন, const sendPixel = require('sendPixel') , sendPixel API আমদানি করে।

কোডের দ্বিতীয় লাইন, const encodeUriComponent = require('encodeUriComponent') , encodeUriComponent API আমদানি করে।

পরবর্তী লাইন, const account = data.accountId; , step 5 এ তৈরি করা accountId এর মান পায় এবং এটিকে একটি ধ্রুবক account সঞ্চয় করে।

কোডের 3য় লাইন, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account); , একটি url ধ্রুবক সেট আপ করে যা একটি নির্দিষ্ট URL এন্ডপয়েন্টকে সংযুক্ত করে যা বিশ্লেষণ ডেটা এবং এনকোড করা অ্যাকাউন্ট আইডি লগ করে যার সাথে ট্যাগটি কনফিগার করা হয়েছে৷

শেষ লাইন, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure) , প্রয়োজনীয় প্যারামিটার সহ sendPixel() ফাংশন চালায় এবং নির্দিষ্ট URL-এ একটি অনুরোধ করে। data.gtmOnSuccess এবং data.gtmOnFailure মানগুলি Google ট্যাগ ম্যানেজারকে বলে যখন ট্যাগটি তার কাজ সম্পূর্ণ করে বা ব্যর্থ হয় এবং তারপর ট্যাগ সিকোয়েন্সিং বা পূর্বরূপ মোডের মতো বৈশিষ্ট্যগুলির জন্য Google ট্যাগ ম্যানেজার ব্যবহার করে।

8. আপনার অগ্রগতি সংরক্ষণ করতে সংরক্ষণ ক্লিক করুন. এটি টেমপ্লেট এডিটরে যেকোনো সনাক্ত করা অনুমতি লোড করবে।

কিছু টেমপ্লেট API-এর সাথে সংশ্লিষ্ট অনুমতি রয়েছে যা নির্দেশ করে যে তারা কী করতে পারে বা কী করতে পারে না। আপনি যখন আপনার কোডে sendPixel এর মতো একটি টেমপ্লেট API ব্যবহার করেন, তখন ট্যাগ ম্যানেজার অনুমতি ট্যাবে প্রাসঙ্গিক অনুমতি দেখাবে।

9. sendPixel কোন ডোমেনগুলিতে ডেটা পাঠাতে অনুমোদিত তা পরিমার্জন করতে অনুমতিগুলিতে ক্লিক করুন৷ সেন্ড পিক্সেল এন্ট্রির জন্য, প্রসারিত আইকনে ক্লিক করুন ( আইকন প্রসারিত করুন ) এবং অনুমোদিত URL ম্যাচ প্যাটার্নে https://endpoint.example.com/ লিখুন।

যখন একটি ট্যাগ টেমপ্লেট ডেটা পাঠানোর জন্য কনফিগার করা হয়, তখন যেখানে ডেটা পাঠানো যেতে পারে তা সীমাবদ্ধ করার জন্য সংশ্লিষ্ট অনুমতির অধীনে আপনাকে অবশ্যই একটি অনুমোদিত URL ম্যাচ প্যাটার্ন নির্দিষ্ট করতে হবে। যদি আপনার কোডে উল্লেখ করা URL একটি অনুমোদিত URL ম্যাচ প্যাটার্নের সাথে মেলে না, তাহলে sendPixel কল ব্যর্থ হবে৷

একটি URL ম্যাচ প্যাটার্ন অবশ্যই HTTPS ব্যবহার করবে এবং হোস্ট এবং পাথ প্যাটার্ন উভয়ই নির্দিষ্ট করবে। হোস্ট একটি ডোমেন হতে পারে (যেমন " https://example.com/ ") বা একটি নির্দিষ্ট সাবডোমেন (যেমন " https://sub.example.com/ ")। পাথ অন্তত একটি " / " নিয়ে গঠিত। যেকোনো দৈর্ঘ্যের একটি সাবডোমেন বা পাথ প্যাটার্ন নির্দেশ করতে ওয়াইল্ডকার্ড হিসেবে একটি তারকাচিহ্ন ( * ) ব্যবহার করুন (যেমন " https://\*.example.com/test/ ")। তারকাচিহ্ন হল একটি ওয়াইল্ডকার্ড অক্ষর যা বিভিন্ন সম্ভাব্য প্যাটার্ন ধরবে, যেমন " \*.example.com/ " www.example.com , shop.example.com , blog.example.com , ইত্যাদির সাথে মিলবে৷ তারকাচিহ্নটি অবশ্যই হতে হবে একটি ব্যাকস্ল্যাশ অক্ষর দিয়ে পালিয়ে গেছে: " \* "। কোনো অতিরিক্ত অক্ষর ছাড়াই একটি URL (যেমন " https://example.com/ ") একটি ওয়াইল্ডকার্ডে শেষ হওয়া হিসাবে বিবেচিত হয় (যেমন " https://example.com/\* " এর সমতুল্য৷

আলাদা লাইনে অতিরিক্ত URL ম্যাচ প্যাটার্ন নির্দিষ্ট করুন।

10. Run Code-এ ক্লিক করুন এবং যেকোনো সমস্যার জন্য কনসোল উইন্ডোটি দেখুন।

যেকোন শনাক্ত ত্রুটি কনসোল উইন্ডোতে প্রদর্শিত হবে।

11. সেভ এ ক্লিক করুন এবং টেমপ্লেট এডিটর বন্ধ করুন।

ট্যাগ টেমপ্লেটটি এখন ব্যবহারের জন্য প্রস্তুত হওয়া উচিত।

আপনার নতুন ট্যাগ ব্যবহার করুন

আপনার নতুন-সংজ্ঞায়িত কাস্টম ট্যাগ টেমপ্লেট ব্যবহার করে এমন একটি নতুন ট্যাগ তৈরি করার প্রক্রিয়াটি অন্য ট্যাগের মতোই:

  1. Google ট্যাগ ম্যানেজারে, ট্যাগ > নতুন ক্লিক করুন।
  2. আপনার নতুন ট্যাগটি নতুন ট্যাগ উইন্ডোর কাস্টম বিভাগে প্রদর্শিত হবে। ট্যাগ টেমপ্লেট খুলতে এটি ক্লিক করুন.
  3. ট্যাগ টেমপ্লেট কনফিগারেশনের জন্য প্রয়োজনীয় ক্ষেত্রগুলি পূরণ করুন।
  4. ট্রিগারিং-এ ক্লিক করুন এবং ট্যাগটি কখন ফায়ার হবে তার জন্য একটি উপযুক্ত ট্রিগার নির্বাচন করুন৷
  5. ট্যাগ সংরক্ষণ করুন এবং আপনার ধারক প্রকাশ করুন.

আপনার প্রথম কাস্টম পরিবর্তনশীল টেমপ্লেট তৈরি করুন

কাস্টম ভেরিয়েবল টেমপ্লেটগুলি ট্যাগ টেমপ্লেটের মতো, কয়েকটি উল্লেখযোগ্য পার্থক্য সহ:

  • কাস্টম ভেরিয়েবল টেমপ্লেট অবশ্যই একটি মান প্রদান করবে।

    সম্পূর্ণতা নির্দেশ করার জন্য data['gtmOnSuccess'] কল করার পরিবর্তে, ভেরিয়েবল সরাসরি একটি মান প্রদান করে।

  • ট্যাগ ম্যানেজার UI-এর বিভিন্ন অংশে কাস্টম ভেরিয়েবল টেমপ্লেট ব্যবহার করা হয়।

  • আপনার কাস্টম ভেরিয়েবলের উপর ভিত্তি করে একটি নতুন ভেরিয়েবল তৈরি করতে Tags > New এ যাওয়ার পরিবর্তে আপনি ভেরিয়েবল > নতুন এ যান

একটি কাস্টম ভেরিয়েবল টেমপ্লেট তৈরি করার জন্য একটি সম্পূর্ণ গাইডের জন্য একটি কাস্টম ভেরিয়েবল তৈরি করুন দেখুন।

রপ্তানি এবং আমদানি

আপনার প্রতিষ্ঠানের সাথে একটি কাস্টম টেমপ্লেট শেয়ার করতে, আপনি কাস্টম টেমপ্লেটটি রপ্তানি করতে পারেন এবং অন্যান্য ট্যাগ ম্যানেজার কন্টেনারে আমদানি করতে পারেন। একটি টেমপ্লেট রপ্তানি করতে:

  1. ট্যাগ ম্যানেজারে, টেমপ্লেট ক্লিক করুন।
  2. তালিকা থেকে আপনি যে টেমপ্লেটটি রপ্তানি করতে চান তার নামে ক্লিক করুন। এটি টেমপ্লেট এডিটরে টেমপ্লেটটি খুলবে।
  3. আরও অ্যাকশন মেনুতে ক্লিক করুন ( ) এবং এক্সপোর্ট নির্বাচন করুন।

একটি টেমপ্লেট আমদানি করতে:

  1. ট্যাগ ম্যানেজারে, টেমপ্লেট ক্লিক করুন।
  2. নতুন ক্লিক করুন. এটি টেমপ্লেট এডিটরে একটি ফাঁকা টেমপ্লেট খুলবে।
  3. আরও অ্যাকশন মেনুতে ক্লিক করুন ( ) এবং আমদানি নির্বাচন করুন।
  4. আপনি যে .tpl ফাইলটি আমদানি করতে চান সেটি নির্বাচন করুন।