राइटिंग प्लगिन

प्लग इन, ऐसी स्क्रिप्ट होते हैं जो 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 कमांड को दूसरे तर्क के तौर पर पास करता है.

Google Analytics टैग में जोड़ा गया यह 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;
}:

प्लग इन लोड हो रहे हैं

प्लग इन आम तौर पर एक अलग JavaScript फ़ाइल से लोड किए जाते हैं या आपके मुख्य ऐप्लिकेशन कोड के साथ बंडल किए जाते हैं.

<script async src="myplugin.js"></script>

यह ज़रूरी नहीं है कि प्लगिन की जानकारी देने से पहले, उसे तय करना ज़रूरी हो. analytics.js को एसिंक्रोनस रूप से लोड किया जाता है और प्लगिन भी अक्सर एसिंक्रोनस रूप से लोड होते हैं. इसलिए, इसे मैनेज करने के लिए ga() कमांड सूची बनाई गई है.

अगर कमांड सूची को किसी ऐसे प्लगिन के लिए require कमांड मिलता है जो अब तक उपलब्ध नहीं कराया गया है, तो इससे सूची में बचे हुए आइटम तब तक काम नहीं करेंगे, जब तक वह प्लगिन उपलब्ध नहीं हो जाता.

इस कोड से पता चलता है कि तीन सेकंड बाद, जब तक ga('provide', 'myplugin', ...) निर्देश नहीं मिलता, तब तक ga('require', '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);

उदाहरण

नीचे दिए गए उदाहरण प्लगिन को, पेज के यूआरएल से कस्टम कैंपेन वैल्यू को कैप्चर करने और उन्हें ट्रैकर में भेजने के लिए डिज़ाइन किया गया है. इस प्लगिन की मदद से, प्लगिन स्क्रिप्ट तय करने और रजिस्टर करने, प्लगिन कॉन्फ़िगरेशन पैरामीटर पास करने, और प्लगिन के तरीके तय करने और उन्हें कॉल करने के तरीकों की जानकारी मिलती है.

// 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);

ऊपर दिए गए कोड को किसी एचटीएमएल पेज में इस तरह शामिल किया जा सकता है:

<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>

ऑटोट्रैक प्लग इन

autotrack लाइब्रेरी एक ओपन सोर्स है. यह GitHub पर उपलब्ध है. इसमें कई analytics.js प्लगिन शामिल हैं, जिनकी मदद से उपयोगकर्ता के सामान्य इंटरैक्शन को ट्रैक किया जा सकता है. प्लग इन के काम करने के तरीके को बेहतर ढंग से समझने के लिए ऑटोट्रैक सोर्स कोड देखें.