প্লাগইনগুলি হল স্ক্রিপ্ট যা analytics.js এর কার্যকারিতা বাড়ায় সমস্যা সমাধানে সাহায্য করে এবং ব্যবহারকারীর মিথস্ক্রিয়া পরিমাপ করতে সহায়তা করে। এই নির্দেশিকা আপনার নিজস্ব analytics.js প্লাগইন লেখার প্রক্রিয়া বর্ণনা করে। আপনার নিজস্ব বাস্তবায়নে analytics.js প্লাগইনগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে তথ্যের জন্য, প্লাগইন ব্যবহার করা দেখুন।
একটি প্লাগইন সংজ্ঞায়িত করা
প্লাগইনগুলি provide
কমান্ডের মাধ্যমে সংজ্ঞায়িত করা হয়, যা প্লাগইনের কনস্ট্রাক্টর ফাংশন দ্বারা অনুসরণ করা প্রথম আর্গুমেন্ট হিসাবে প্লাগইনের নামের সাথে আহ্বান করতে হবে। যখন provide
কমান্ড চালানো হয়, এটি ga()
কমান্ড সারির সাথে ব্যবহার করার জন্য প্লাগইন নিবন্ধন করে।
প্লাগইন কনস্ট্রাক্টর
নিম্নলিখিতটি একটি analytics.js প্লাগইনের সবচেয়ে মৌলিক উদাহরণ:
// Defines the plugin constructor.
function MyPlugin() {
console.log('myplugin has been required...');
}
// Registers the plugin for use.
ga('provide', 'myplugin', MyPlugin);
গ্লোবাল ga
অবজেক্টের নাম পরিবর্তন করা হয়েছে এমন ক্ষেত্রেও প্লাগইনগুলি সঠিকভাবে কাজ করতে হবে, তাই আপনি যদি তৃতীয় পক্ষের ব্যবহারের জন্য একটি প্লাগইন লিখছেন, তাহলে GoogleAnalyticsObject
ভেরিয়েবলটি অন্য কোনো স্ট্রিং-এ সেট করা হয়েছে কিনা তা দেখার জন্য আপনার একটি চেক অন্তর্ভুক্ত করা উচিত 'ga'
। নিম্নলিখিত providePlugin
ফাংশন এটি করে:
// Provides a plugin name and constructor function to analytics.js. This
// function works even if the site has customized the ga global identifier.
function providePlugin(pluginName, pluginConstructor) {
var ga = window[window['GoogleAnalyticsObject'] || 'ga'];
if (typeof ga == 'function') {
ga('provide', pluginName, pluginConstructor);
}
}
প্লাগইন ইনস্ট্যান্স কনফিগার করা হচ্ছে
যখন ga()
কমান্ড সারি একটি require
কমান্ড কার্যকর করে, এটি provide
প্লাগইন এর কনস্ট্রাক্টর ফাংশনে new
অপারেটর ব্যবহার করে একটি নতুন অবজেক্টকে তাৎক্ষণিক করে। কনস্ট্রাক্টরকে তার প্রথম আর্গুমেন্ট হিসেবে ট্র্যাকার অবজেক্ট পাস করা হয় এবং যেকোনো কনফিগারেশন অপশন require
কমান্ডে তার দ্বিতীয় আর্গুমেন্ট হিসেবে পাস করা হয়।
গুগল অ্যানালিটিক্স ট্যাগে যোগ করা নিম্নলিখিত require
কমান্ডটি বিবেচনা করুন:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'localHitSender', {path: '/log', debug: true});
ga('send', 'pageview');
এবং localHitSender
কোড:
function LocalHitSender(tracker, config) {
this.path = config.path;
this.debug = config.debug;
if (this.debug) {
console.log('localHitSender enabled for path: ' + this.path);
console.log('on tracker: ' + tracker.get('name'));
}
}
providePlugin('localHitSender', LocalHitSender);
যখন require
কমান্ডটি চালানো হয়, নিম্নলিখিতগুলি কনসোলে লগ করা হবে (মনে রাখবেন যে ডিফল্ট ট্র্যাকারের নাম "t0"):
// localHitSender enabled for path: /log
// on tracker: t0
প্লাগইন পদ্ধতি সংজ্ঞায়িত করা
প্লাগইনগুলি তাদের নিজস্ব পদ্ধতিগুলি প্রকাশ করতে পারে যা ga
কমান্ড সারি সিনট্যাক্স ব্যবহার করে আহ্বান করা যেতে পারে:
ga('[trackerName.]pluginName:methodName', ...args);
যেখানে trackerName
ঐচ্ছিক এবং methodName
প্লাগইন কনস্ট্রাক্টর প্রোটোটাইপের একটি ফাংশনের নামের সাথে মিলে যায়। প্লাগইনে methodName
না থাকলে বা প্লাগইনটি বিদ্যমান না থাকলে একটি ত্রুটি ঘটবে।
প্লাগইন পদ্ধতি কলের উদাহরণ:
// Execute the 'doStuff' method using the 'myplugin' plugin.
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'myplugin');
ga('myplugin:doStuff');
// Execute the 'setEnabled' method of the 'hitCopy' plugin on tracker 't3'.
ga('create', 'UA-XXXXX-Y', 'auto', {name: 't3'});
ga('t3.require', 'hitcopy');
ga('t3.hitcopy:setEnabled', false);
উদাহরণ প্লাগইন পদ্ধতি সংজ্ঞা:
// myplugin constructor.
var MyPlugin = function(tracker) {
};
// myplugin:doStuff method definition.
MyPlugin.prototype.doStuff = function() {
alert('doStuff method called!');
};
// hitcopy plugin.
var HitCopy = function(tracker) {
};
// hitcopy:setEnabled method definition.
HitCopy.prototype.setEnabled = function(isEnabled) {
this.isEnabled = isEnabled;
}:
প্লাগইন লোড হচ্ছে
প্লাগইনগুলি সাধারণত একটি পৃথক জাভাস্ক্রিপ্ট ফাইল থেকে লোড করা হয় বা আপনার প্রধান অ্যাপ্লিকেশন কোডের সাথে একত্রিত করা হয়।
<script async src="myplugin.js"></script>
প্লাগইনগুলি প্রয়োজনীয় হওয়ার আগে সংজ্ঞায়িত করার প্রয়োজন নেই৷ যেহেতু analytics.js অ্যাসিঙ্ক্রোনাসভাবে লোড করা হয় এবং প্লাগইনগুলি প্রায়ই অ্যাসিঙ্ক্রোনাসভাবে লোড করা হয়, তাই এটি পরিচালনা করার জন্য ga()
কমান্ড সারি তৈরি করা হয়েছে।
যদি কমান্ড সারি এমন একটি প্লাগইনের জন্য একটি require
কমান্ড পায় যা এখনও প্রদান করা হয়নি, তাহলে প্লাগইনটি উপলব্ধ না হওয়া পর্যন্ত এটি সারিতে থাকা অবশিষ্ট আইটেমগুলির সম্পাদন বন্ধ করবে।
নিম্নলিখিত কোডটি দেখায় কিভাবে ga('require', 'myplugin')
কমান্ডটি বাস্তবে কার্যকর হয় না যতক্ষণ না ga('provide', 'myplugin', ...)
কমান্ডটি তিন সেকেন্ড পরে সম্মুখীন হয়।
ga('require', 'myplugin');
function MyPlugin() {
console.log('myplugin has been required...');
}
// Waits 3 second after running the `require`
// command before running the `provide` command.
setTimeout(function() {
ga('provide', 'myplugin', MyPlugin);
}, 3000);
উদাহরণ
নিম্নলিখিত উদাহরণ প্লাগইনটি একটি পৃষ্ঠার URL থেকে কাস্টম প্রচারাভিযানের মানগুলি ক্যাপচার করার জন্য ডিজাইন করা হয়েছে এবং সেগুলিকে ট্র্যাকারে প্রেরণ করা হয়েছে৷ এই প্লাগইনটি দেখায় কিভাবে একটি প্লাগইন স্ক্রিপ্ট সংজ্ঞায়িত এবং নিবন্ধন করতে হয়, প্লাগইন কনফিগারেশন প্যারামিটার পাস করতে হয় এবং প্লাগইন পদ্ধতি সংজ্ঞায়িত এবং কল করতে হয়।
// campaign-loader.js
function providePlugin(pluginName, pluginConstructor) {
var ga = window[window['GoogleAnalyticsObject'] || 'ga'];
if (typeof ga == 'function') {
ga('provide', pluginName, pluginConstructor);
}
}
/**
* Constructor for the campaignLoader plugin.
*/
var CampaignLoader = function(tracker, config) {
this.tracker = tracker;
this.nameParam = config.nameParam || 'name';
this.sourceParam = config.sourceParam || 'source';
this.mediumParam = config.mediumParam || 'medium';
this.isDebug = config.debug;
};
/**
* Loads campaign fields from the URL and updates the tracker.
*/
CampaignLoader.prototype.loadCampaignFields = function() {
this.debugMessage('Loading custom campaign parameters');
var nameValue = getUrlParam(this.nameParam);
if (nameValue) {
this.tracker.set('campaignName', nameValue);
this.debugMessage('Loaded campaign name: ' + nameValue);
}
var sourceValue = getUrlParam(this.sourceParam);
if (sourceValue) {
this.tracker.set('campaignSource', sourceValue);
this.debugMessage('Loaded campaign source: ' + sourceValue);
}
var mediumValue = getUrlParam(this.mediumParam);
if (mediumValue) {
this.tracker.set('campaignMedium', mediumValue);
this.debugMessage('Loaded campaign medium: ' + mediumValue);
}
};
/**
* Enables / disables debug output.
*/
CampaignLoader.prototype.setDebug = function(enabled) {
this.isDebug = enabled;
};
/**
* Displays a debug message in the console, if debugging is enabled.
*/
CampaignLoader.prototype.debugMessage = function(message) {
if (!this.isDebug) return;
if (console) console.debug(message);
};
/**
* Utility function to extract a URL parameter value.
*/
function getUrlParam(param) {
var match = document.location.search.match('(?:\\?|&)' + param + '=([^&#]*)');
return (match && match.length == 2) ? decodeURIComponent(match[1]) : '';
}
// Register the plugin.
providePlugin('campaignLoader', CampaignLoader);
উপরের কোডটি নিম্নরূপ একটি HTML পৃষ্ঠায় অন্তর্ভুক্ত করা যেতে পারে:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'campaignLoader', {
debug: true,
nameParam: 'cname',
sourceParam: 'csrc',
mediumParam: 'cmed'
});
ga('campaignLoader:loadCampaignFields');
ga('send', 'pageview');
</script>
<!--Note: plugin scripts must be included after the tracking snippet. -->
<script async src="campaign-loader.js"></script>
অটোট্র্যাক প্লাগইন
অটোট্র্যাক লাইব্রেরি হল ওপেন সোর্স, GitHub-এ উপলব্ধ, এবং এতে বেশ কিছু analytics.js প্লাগইন রয়েছে যা সাধারণ ব্যবহারকারীর মিথস্ক্রিয়া ট্র্যাক করতে সাহায্য করে। প্লাগইনগুলি কীভাবে কাজ করে তা আরও ভালভাবে বোঝার জন্য অটোট্র্যাক সোর্স কোডটি পড়ুন।