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

একটি বিদ্যমান ট্যাগ রূপান্তর করুন

এই নির্দেশিকাটিতে, আপনি শিখবেন কিভাবে স্যান্ডবক্সযুক্ত জাভাস্ক্রিপ্ট ব্যবহার করার জন্য একটি বিদ্যমান কাস্টম HTML ট্যাগ রূপান্তর করতে হয়।

এই টিউটোরিয়ালটি injectScript এপিআই ব্যবহার করবে। injectScript হল একটি সাধারণ API যা একটি বিদ্যমান ট্যাগ রূপান্তর করতে ব্যবহৃত হয় যা তৃতীয় পক্ষের স্ক্রিপ্টের উপর নির্ভর করে। একটি স্ক্রিপ্ট লোড হওয়ার সময় এই ট্যাগগুলি প্রায়শই মৌলিক কার্যকারিতা সেট আপ করে, তারপর স্ক্রিপ্ট লোড হওয়ার পরে অতিরিক্ত কার্যকারিতা সহ এটিকে বৃদ্ধি করে৷

আসল ট্যাগ

<!-- Google Analytics -->
<script>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXXX-1', 'auto');
  ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

কোডটি রূপান্তর করুন

উপরের ট্যাগের জাভাস্ক্রিপ্ট অংশটি বিবেচনা করুন:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');

প্রয়োজনীয় স্যান্ডবক্সযুক্ত জাভাস্ক্রিপ্ট তৈরি করতে, এই স্ক্রিপ্টটি কোন নেটিভ জাভাস্ক্রিপ্ট API ব্যবহার করে তা দেখুন এবং আপনার কোডকে সমতুল্য স্যান্ডবক্সযুক্ত JavaScript API ব্যবহার করতে রূপান্তর করুন।

উদাহরণস্বরূপ, analytics.js ট্যাগে, এই নেটিভ জাভাস্ক্রিপ্ট API ব্যবহার করা হয়:

নেটিভ জাভাস্ক্রিপ্ট	স্যান্ডবক্সযুক্ত জাভাস্ক্রিপ্ট
`window.ga`	`setInWindow`
`arguments`	`createArgumentsQueue`
`+ new Date`	`getTimestamp`

আপনার স্ক্রিপ্টে স্যান্ডবক্সযুক্ত JavaScript API ব্যবহার করতে, আপনাকে তাদের require । উদাহরণস্বরূপ, setInWindow() API ব্যবহার করতে, এটি আপনার স্ক্রিপ্টের শীর্ষে যোগ করুন:

const setInWindow = require('setInWindow');

এরপর, window.ga রূপান্তর করুন:

window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)}
// becomes
const createArgumentsQueue = require('createArgumentsQueue');
const ga = createArgumentsQueue('ga', 'ga.q');

তারপর, ga.l অ্যাসাইনমেন্ট রূপান্তর করুন:

ga.l=+new Date;
// becomes
const getTimestamp = require('getTimestamp');
setInWindow('ga.l', getTimestamp(), true);

অবশেষে, দুটি কলকে ga() তে রূপান্তর করুন:

ga('create', 'UA-XXXXXX-1', 'auto');
ga('send', 'pageview');
// becomes
const trackingId = data.trackingId;
ga('create', trackingId, 'auto');
ga('send', 'pageview');

data.trackingId ব্যবহার করার জন্য, আপনার টেমপ্লেটে একটি ক্ষেত্র যোগ করুন:

Fields ট্যাবে নেভিগেট করুন, এবং Add Field ক্লিক করুন।
Text input ক্ষেত্রের প্রকার নির্বাচন করুন।
text1 থেকে trackingId আইডি পরিবর্তন করুন।

এই মুহুর্তে, আপনি প্রথম <script/> ট্যাগটি রূপান্তর করেছেন, তবে আপনাকে সমর্থনকারী স্ক্রিপ্টেও লোড করতে হবে।

এটা করতে:

<script async src='https://www.google-analytics.com/analytics.js'></script>

// becomes
const injectScript = require('injectScript');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);

injectScript() এ একটি cacheToken পাস করা একটি অপ্টিমাইজেশান সক্ষম করে৷ নিম্নলিখিত পরিস্থিতিতে, analytics.js স্ক্রিপ্ট শুধুমাত্র একবার লোড করা হবে:

একটি ট্যাগ যা একাধিকবার চলে
একই পাত্রে এই কাস্টম টেমপ্লেট থেকে একাধিক ট্যাগ।
একই cacheToken সহ injectScript() ব্যবহার করে অন্যান্য কাস্টম টেমপ্লেট

অনুমতি

আপনি যদি এই পয়েন্টের আগে এই কোডটি চালানোর চেষ্টা করেন তবে আপনি কনসোলে কিছু ত্রুটি লক্ষ্য করেছেন।

গ্লোবাল অ্যাক্সেস করতে ত্রুটি৷

এই ত্রুটিগুলি উপস্থিত হয় কারণ স্যান্ডবক্সযুক্ত জাভাস্ক্রিপ্টের জন্য আপনাকে আপনার অ্যাক্সেস করা মান এবং URLগুলি ঘোষণা করতে হবে৷ এই উদাহরণে, আপনাকে ga.q , ga.l , এবং ga গ্লোবাল ভেরিয়েবল অ্যাক্সেস করতে হবে এবং আপনি একটি স্ক্রিপ্ট ইনজেক্ট করতে চান যা https://www.google-analytics.com/analytics.js এ হোস্ট করা হয়েছে।

Global Variables অনুমতি কনফিগার করতে:

Permissions ট্যাবে নেভিগেট করুন, Accesses Global Variables প্রসারিত করুন এবং তারপরে Add Key ক্লিক করুন।
কী-এর জন্য ga ব্যবহার করুন, এবং Read , Write , এবং Execute এর জন্য বাক্সগুলি চেক করুন।
ga.q এবং ga.l এর জন্য এই প্রক্রিয়াটি পুনরাবৃত্তি করুন। মনে রাখবেন যে এই ক্ষেত্রগুলির Execute অনুমতির প্রয়োজন নেই।

এই মুহুর্তে আপনি যদি আবার কোড চালান ক্লিক করেন, আপনি কনসোলে একটি নতুন ত্রুটি পাবেন। এইবার, ত্রুটিটি Inject Scripts উল্লেখ করেছে।

ইনজেক্ট স্ক্রিপ্ট কনসোল ত্রুটি

Inject Scripts অনুমতি কনফিগার করতে:

Allowed URL Match Patterns https://www.google-analytics.com/analytics.js যোগ করুন।
দ্রষ্টব্য: URL Match Patterns সাবডোমেন এবং পথের জন্য ওয়াইল্ডকার্ডের অনুমতি দেয়, তাই আপনি https://www.google-analytics.com/* ব্যবহার করতে পারতেন। যাইহোক, সম্ভব হলে আরও নির্দিষ্ট ম্যাচ প্যাটার্ন পছন্দ করা হয়। সম্পূর্ণ নীতির বিবরণের জন্য inject_script নীতি দেখুন।

এখন আপনি যখন Run Code এ ক্লিক করবেন, কনসোলে কোনো ত্রুটি থাকবে না। আপনি সফলভাবে ট্যাগটিকে একটি কাস্টম টেমপ্লেটে রূপান্তর করেছেন৷ Google ট্যাগ ম্যানেজারের অন্যান্য ট্যাগের মতোই Save ক্লিক করুন এবং আপনার নতুন ট্যাগ ব্যবহার করুন৷

সম্পূর্ণ রূপান্তরিত ট্যাগ

আপনার চূড়ান্ত স্যান্ডবক্সযুক্ত জাভাস্ক্রিপ্ট ফলাফল এইরকম হওয়া উচিত:

const setInWindow = require('setInWindow');
const copyFromWindow = require('copyFromWindow');
const createArgumentsQueue = require('createArgumentsQueue');
const getTimestamp = require('getTimestamp');
const injectScript = require('injectScript');
const trackingId = data.trackingId;

const ga = createArgumentsQueue('ga', 'ga.q');
setInWindow('ga.l', getTimestamp(), false);
ga('create', trackingId, 'auto');
ga('send', 'pageview');
const url = 'https://www.google-analytics.com/analytics.js';
injectScript(url, data.gtmOnSuccess, data.gtmOnFailure, url);